diff --git a/android/app/src/main/AndroidManifest.xml b/android/app/src/main/AndroidManifest.xml
index 6c9f35c..e7df0ed 100644
--- a/android/app/src/main/AndroidManifest.xml
+++ b/android/app/src/main/AndroidManifest.xml
@@ -1,7 +1,7 @@
 <!-- Author: fruit.com.cn -->
-
 <manifest xmlns:android="http://schemas.android.com/apk/res/android">
-    <uses-permission android:name="android.permission.INTERNET"/>
+    <uses-permission
+        android:name="android.permission.INTERNET"/>
     <application
         android:label="FruitShorts"
         android:name="${applicationName}"
@@ -23,9 +23,8 @@
                  while the Flutter UI initializes. After that, this theme continues
                  to determine the Window background behind the Flutter UI. -->
             <meta-data
-              android:name="io.flutter.embedding.android.NormalTheme"
-              android:resource="@style/NormalTheme"
-              />
+                android:name="io.flutter.embedding.android.NormalTheme"
+                android:resource="@style/NormalTheme"/>
             <intent-filter>
                 <action android:name="android.intent.action.MAIN"/>
                 <category android:name="android.intent.category.LAUNCHER"/>
@@ -35,7 +34,7 @@
              This is used by the Flutter tool to generate GeneratedPluginRegistrant.java -->
         <meta-data
             android:name="flutterEmbedding"
-            android:value="2" />
+            android:value="2"/>
     </application>
     <!-- Required to query activities that can process text, see:
          https://developer.android.com/training/package-visibility and
@@ -44,8 +43,10 @@
          In particular, this is used by the Flutter engine in io.flutter.plugin.text.ProcessTextPlugin. -->
     <queries>
         <intent>
-            <action android:name="android.intent.action.PROCESS_TEXT"/>
-            <data android:mimeType="text/plain"/>
+            <action
+                android:name="android.intent.action.PROCESS_TEXT"/>
+            <data
+                android:mimeType="text/plain"/>
         </intent>
     </queries>
 </manifest>
diff --git a/android/app/src/main/kotlin/com/stormg/lumadrama/MainActivity.kt b/android/app/src/main/kotlin/com/stormg/lumadrama/MainActivity.kt
index 3fc470e..8f25c38 100644
--- a/android/app/src/main/kotlin/com/stormg/lumadrama/MainActivity.kt
+++ b/android/app/src/main/kotlin/com/stormg/lumadrama/MainActivity.kt
@@ -5,22 +5,44 @@ package com.stormg.lumadrama
 import android.content.Intent
 import android.app.PictureInPictureParams
 import android.content.res.Configuration
+import android.graphics.Bitmap
+import android.media.MediaMetadataRetriever
+import android.net.Uri
 import android.os.Build
+import android.os.Bundle
+import android.os.Handler
+import android.os.Looper
 import android.util.Rational
 import android.content.pm.PackageManager
+import android.view.WindowManager
 import androidx.core.view.ViewCompat
 import androidx.core.view.WindowInsetsCompat
 import io.flutter.embedding.android.FlutterActivity
 import io.flutter.embedding.engine.FlutterEngine
 import io.flutter.plugin.common.MethodChannel
+import java.io.ByteArrayOutputStream
+import java.util.concurrent.ExecutorService
+import java.util.concurrent.Executors
+import java.util.concurrent.atomic.AtomicBoolean
 
 class MainActivity : FlutterActivity() {
     private val shareRequestCode = 9041
+    private val thumbnailExecutor: ExecutorService = Executors.newSingleThreadExecutor()
+    private val thumbnailHandler = Handler(Looper.getMainLooper())
     private var pendingShare: MethodChannel.Result? = null
     private var pipChannel: MethodChannel? = null
     private var keyboardChannel: MethodChannel? = null
+    private var thumbnailChannel: MethodChannel? = null
     private var imeInset = 0
 
+    override fun onCreate(savedInstanceState: Bundle?) {
+        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
+            splashScreen.setOnExitAnimationListener { screen -> screen.remove() }
+        }
+        super.onCreate(savedInstanceState)
+        window.addFlags(WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON)
+    }
+
     override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
         super.configureFlutterEngine(flutterEngine)
         pipChannel = MethodChannel(flutterEngine.dartExecutor.binaryMessenger, "com.stormg.lumadrama/pip")
@@ -79,6 +101,47 @@ class MainActivity : FlutterActivity() {
             emitImeInset(inset)
             result.success(inset)
         }
+        thumbnailChannel = MethodChannel(
+            flutterEngine.dartExecutor.binaryMessenger,
+            "com.stormg.lumadrama/thumbnail"
+        )
+        thumbnailChannel?.setMethodCallHandler { call, result ->
+            if (call.method != "frame") {
+                result.notImplemented()
+                return@setMethodCallHandler
+            }
+            val timeMs = (call.argument<Number>("timeMs"))?.toLong()
+            if (timeMs == null) {
+                result.success(null)
+                return@setMethodCallHandler
+            }
+            val localPath = call.argument<String>("localPath").orEmpty()
+            val remoteUrl = call.argument<String>("url").orEmpty()
+            val rawHeaders = call.argument<Map<*, *>>("headers")
+            val headers = rawHeaders?.entries
+                ?.associate { it.key.toString() to it.value.toString() }
+                .orEmpty()
+            val responded = AtomicBoolean(false)
+            val task = thumbnailExecutor.submit {
+                val bytes = renderThumbnail(
+                    timeMs = timeMs,
+                    localPath = localPath,
+                    remoteUrl = remoteUrl,
+                    headers = headers
+                )
+                thumbnailHandler.post {
+                    if (responded.compareAndSet(false, true)) {
+                        result.success(bytes)
+                    }
+                }
+            }
+            thumbnailHandler.postDelayed({
+                if (responded.compareAndSet(false, true)) {
+                    task.cancel(true)
+                    result.success(null)
+                }
+            }, thumbnailTimeoutMs)
+        }
         val decorView = window.decorView
         ViewCompat.setOnApplyWindowInsetsListener(decorView) { view, insets ->
             emitImeInset(insets.getInsets(WindowInsetsCompat.Type.ime()).bottom)
@@ -99,6 +162,59 @@ class MainActivity : FlutterActivity() {
         keyboardChannel?.invokeMethod("insetsChanged", value)
     }
 
+    private fun renderThumbnail(
+        timeMs: Long,
+        localPath: String,
+        remoteUrl: String,
+        headers: Map<String, String>
+    ): ByteArray? {
+        val retriever = MediaMetadataRetriever()
+        var frame: Bitmap? = null
+        var scaled: Bitmap? = null
+        return try {
+            when {
+                localPath.isNotEmpty() -> retriever.setDataSource(normalizeLocalPath(localPath))
+                remoteUrl.isNotEmpty() -> retriever.setDataSource(remoteUrl, headers)
+                else -> return null
+            }
+            frame = retriever.getFrameAtTime(
+                timeMs * 1000,
+                MediaMetadataRetriever.OPTION_CLOSEST_SYNC
+            )
+            val source = frame ?: return null
+            scaled = if (source.width > thumbnailMaxWidth) {
+                val targetHeight = (source.height * thumbnailMaxWidth / source.width)
+                    .coerceAtLeast(1)
+                Bitmap.createScaledBitmap(
+                    source,
+                    thumbnailMaxWidth,
+                    targetHeight,
+                    true
+                )
+            } else {
+                source
+            }
+            val outputBitmap = scaled ?: source
+            val output = ByteArrayOutputStream()
+            val compressed = outputBitmap.compress(
+                Bitmap.CompressFormat.JPEG,
+                thumbnailJpegQuality,
+                output
+            )
+            if (!compressed) return null
+            output.toByteArray()
+        } catch (_: Exception) {
+            null
+        } finally {
+            if (scaled != null && scaled !== frame) scaled.recycle()
+            frame?.recycle()
+            retriever.release()
+        }
+    }
+
+    private fun normalizeLocalPath(path: String): String =
+        if (path.startsWith("file:")) Uri.parse(path).path ?: path else path
+
     override fun onPictureInPictureModeChanged(isInPictureInPictureMode: Boolean, newConfig: Configuration) {
         super.onPictureInPictureModeChanged(isInPictureInPictureMode, newConfig)
         pipChannel?.invokeMethod("onPipChanged", isInPictureInPictureMode)
@@ -117,6 +233,16 @@ class MainActivity : FlutterActivity() {
         ViewCompat.setOnApplyWindowInsetsListener(window.decorView, null)
         keyboardChannel?.setMethodCallHandler(null)
         keyboardChannel = null
+        thumbnailChannel?.setMethodCallHandler(null)
+        thumbnailChannel = null
+        thumbnailHandler.removeCallbacksAndMessages(null)
+        thumbnailExecutor.shutdownNow()
         super.onDestroy()
     }
+
+    companion object {
+        private const val thumbnailMaxWidth = 240
+        private const val thumbnailJpegQuality = 70
+        private const val thumbnailTimeoutMs = 1500L
+    }
 }
diff --git a/android/app/src/main/res/drawable-hdpi/android12splash.png b/android/app/src/main/res/drawable-hdpi/android12splash.png
deleted file mode 100644
index b83ff04..0000000
Binary files a/android/app/src/main/res/drawable-hdpi/android12splash.png and /dev/null differ
diff --git a/android/app/src/main/res/drawable-hdpi/ic_launcher_foreground.png b/android/app/src/main/res/drawable-hdpi/ic_launcher_foreground.png
index 958fa59..f74caef 100644
Binary files a/android/app/src/main/res/drawable-hdpi/ic_launcher_foreground.png and b/android/app/src/main/res/drawable-hdpi/ic_launcher_foreground.png differ
diff --git a/android/app/src/main/res/drawable-hdpi/splash.png b/android/app/src/main/res/drawable-hdpi/splash.png
deleted file mode 100644
index f7ad471..0000000
Binary files a/android/app/src/main/res/drawable-hdpi/splash.png and /dev/null differ
diff --git a/android/app/src/main/res/drawable-mdpi/android12splash.png b/android/app/src/main/res/drawable-mdpi/android12splash.png
deleted file mode 100644
index fdcfb53..0000000
Binary files a/android/app/src/main/res/drawable-mdpi/android12splash.png and /dev/null differ
diff --git a/android/app/src/main/res/drawable-mdpi/ic_launcher_foreground.png b/android/app/src/main/res/drawable-mdpi/ic_launcher_foreground.png
index e67ebad..e6ba224 100644
Binary files a/android/app/src/main/res/drawable-mdpi/ic_launcher_foreground.png and b/android/app/src/main/res/drawable-mdpi/ic_launcher_foreground.png differ
diff --git a/android/app/src/main/res/drawable-mdpi/splash.png b/android/app/src/main/res/drawable-mdpi/splash.png
deleted file mode 100644
index b2ebfd8..0000000
Binary files a/android/app/src/main/res/drawable-mdpi/splash.png and /dev/null differ
diff --git a/android/app/src/main/res/drawable-night-hdpi/android12splash.png b/android/app/src/main/res/drawable-night-hdpi/android12splash.png
deleted file mode 100644
index b83ff04..0000000
Binary files a/android/app/src/main/res/drawable-night-hdpi/android12splash.png and /dev/null differ
diff --git a/android/app/src/main/res/drawable-night-mdpi/android12splash.png b/android/app/src/main/res/drawable-night-mdpi/android12splash.png
deleted file mode 100644
index fdcfb53..0000000
Binary files a/android/app/src/main/res/drawable-night-mdpi/android12splash.png and /dev/null differ
diff --git a/android/app/src/main/res/drawable-night-v21/launch_background.xml b/android/app/src/main/res/drawable-night-v21/launch_background.xml
index d933a92..35eaddd 100644
--- a/android/app/src/main/res/drawable-night-v21/launch_background.xml
+++ b/android/app/src/main/res/drawable-night-v21/launch_background.xml
@@ -1,4 +1,10 @@
 <?xml version="1.0" encoding="utf-8"?>
+<!-- Author: fruit.com.cn -->
 <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:drawable="@color/splash_background" />
+    <item>
+        <bitmap
+            android:gravity="center"
+            android:src="@drawable/splash_screen" />
+    </item>
 </layer-list>
diff --git a/android/app/src/main/res/drawable-night-xhdpi/android12splash.png b/android/app/src/main/res/drawable-night-xhdpi/android12splash.png
deleted file mode 100644
index 902356d..0000000
Binary files a/android/app/src/main/res/drawable-night-xhdpi/android12splash.png and /dev/null differ
diff --git a/android/app/src/main/res/drawable-night-xxhdpi/android12splash.png b/android/app/src/main/res/drawable-night-xxhdpi/android12splash.png
deleted file mode 100644
index b111cdb..0000000
Binary files a/android/app/src/main/res/drawable-night-xxhdpi/android12splash.png and /dev/null differ
diff --git a/android/app/src/main/res/drawable-night-xxxhdpi/android12splash.png b/android/app/src/main/res/drawable-night-xxxhdpi/android12splash.png
deleted file mode 100644
index 54c03f6..0000000
Binary files a/android/app/src/main/res/drawable-night-xxxhdpi/android12splash.png and /dev/null differ
diff --git a/android/app/src/main/res/drawable-night/launch_background.xml b/android/app/src/main/res/drawable-night/launch_background.xml
index d933a92..35eaddd 100644
--- a/android/app/src/main/res/drawable-night/launch_background.xml
+++ b/android/app/src/main/res/drawable-night/launch_background.xml
@@ -1,4 +1,10 @@
 <?xml version="1.0" encoding="utf-8"?>
+<!-- Author: fruit.com.cn -->
 <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:drawable="@color/splash_background" />
+    <item>
+        <bitmap
+            android:gravity="center"
+            android:src="@drawable/splash_screen" />
+    </item>
 </layer-list>
diff --git a/android/app/src/main/res/drawable-nodpi/splash_brand.png b/android/app/src/main/res/drawable-nodpi/splash_brand.png
new file mode 100644
index 0000000..2ca5a39
Binary files /dev/null and b/android/app/src/main/res/drawable-nodpi/splash_brand.png differ
diff --git a/android/app/src/main/res/drawable-nodpi/splash_screen.png b/android/app/src/main/res/drawable-nodpi/splash_screen.png
new file mode 100644
index 0000000..96e1134
Binary files /dev/null and b/android/app/src/main/res/drawable-nodpi/splash_screen.png differ
diff --git a/android/app/src/main/res/drawable-v21/background.png b/android/app/src/main/res/drawable-v21/background.png
index 3f0a992..e815fd6 100644
Binary files a/android/app/src/main/res/drawable-v21/background.png and b/android/app/src/main/res/drawable-v21/background.png differ
diff --git a/android/app/src/main/res/drawable-v21/launch_background.xml b/android/app/src/main/res/drawable-v21/launch_background.xml
index 3cc4948..35eaddd 100644
--- a/android/app/src/main/res/drawable-v21/launch_background.xml
+++ b/android/app/src/main/res/drawable-v21/launch_background.xml
@@ -1,9 +1,10 @@
 <?xml version="1.0" encoding="utf-8"?>
+<!-- Author: fruit.com.cn -->
 <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:drawable="@color/splash_background" />
     <item>
-        <bitmap android:gravity="fill" android:src="@drawable/background"/>
-    </item>
-    <item>
-        <bitmap android:gravity="center" android:src="@drawable/splash"/>
+        <bitmap
+            android:gravity="center"
+            android:src="@drawable/splash_screen" />
     </item>
 </layer-list>
diff --git a/android/app/src/main/res/drawable-v31/launch_background.xml b/android/app/src/main/res/drawable-v31/launch_background.xml
index 515a7fb..35eaddd 100644
--- a/android/app/src/main/res/drawable-v31/launch_background.xml
+++ b/android/app/src/main/res/drawable-v31/launch_background.xml
@@ -1,6 +1,10 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Author: fruit.com.cn -->
-
 <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:drawable="@color/splash_background" />
+    <item>
+        <bitmap
+            android:gravity="center"
+            android:src="@drawable/splash_screen" />
+    </item>
 </layer-list>
diff --git a/android/app/src/main/res/drawable-xhdpi/android12splash.png b/android/app/src/main/res/drawable-xhdpi/android12splash.png
deleted file mode 100644
index 902356d..0000000
Binary files a/android/app/src/main/res/drawable-xhdpi/android12splash.png and /dev/null differ
diff --git a/android/app/src/main/res/drawable-xhdpi/ic_launcher_foreground.png b/android/app/src/main/res/drawable-xhdpi/ic_launcher_foreground.png
index e36966c..41cd6fd 100644
Binary files a/android/app/src/main/res/drawable-xhdpi/ic_launcher_foreground.png and b/android/app/src/main/res/drawable-xhdpi/ic_launcher_foreground.png differ
diff --git a/android/app/src/main/res/drawable-xhdpi/splash.png b/android/app/src/main/res/drawable-xhdpi/splash.png
deleted file mode 100644
index b01e86c..0000000
Binary files a/android/app/src/main/res/drawable-xhdpi/splash.png and /dev/null differ
diff --git a/android/app/src/main/res/drawable-xxhdpi/android12splash.png b/android/app/src/main/res/drawable-xxhdpi/android12splash.png
deleted file mode 100644
index b111cdb..0000000
Binary files a/android/app/src/main/res/drawable-xxhdpi/android12splash.png and /dev/null differ
diff --git a/android/app/src/main/res/drawable-xxhdpi/ic_launcher_foreground.png b/android/app/src/main/res/drawable-xxhdpi/ic_launcher_foreground.png
index 5b61cb8..30e3303 100644
Binary files a/android/app/src/main/res/drawable-xxhdpi/ic_launcher_foreground.png and b/android/app/src/main/res/drawable-xxhdpi/ic_launcher_foreground.png differ
diff --git a/android/app/src/main/res/drawable-xxhdpi/splash.png b/android/app/src/main/res/drawable-xxhdpi/splash.png
deleted file mode 100644
index 5143af8..0000000
Binary files a/android/app/src/main/res/drawable-xxhdpi/splash.png and /dev/null differ
diff --git a/android/app/src/main/res/drawable-xxxhdpi/android12splash.png b/android/app/src/main/res/drawable-xxxhdpi/android12splash.png
deleted file mode 100644
index 54c03f6..0000000
Binary files a/android/app/src/main/res/drawable-xxxhdpi/android12splash.png and /dev/null differ
diff --git a/android/app/src/main/res/drawable-xxxhdpi/ic_launcher_foreground.png b/android/app/src/main/res/drawable-xxxhdpi/ic_launcher_foreground.png
index 7943abd..bf427ce 100644
Binary files a/android/app/src/main/res/drawable-xxxhdpi/ic_launcher_foreground.png and b/android/app/src/main/res/drawable-xxxhdpi/ic_launcher_foreground.png differ
diff --git a/android/app/src/main/res/drawable-xxxhdpi/splash.png b/android/app/src/main/res/drawable-xxxhdpi/splash.png
deleted file mode 100644
index d255ff4..0000000
Binary files a/android/app/src/main/res/drawable-xxxhdpi/splash.png and /dev/null differ
diff --git a/android/app/src/main/res/drawable/background.png b/android/app/src/main/res/drawable/background.png
index 3f0a992..e815fd6 100644
Binary files a/android/app/src/main/res/drawable/background.png and b/android/app/src/main/res/drawable/background.png differ
diff --git a/android/app/src/main/res/drawable/launch_background.xml b/android/app/src/main/res/drawable/launch_background.xml
index 3cc4948..35eaddd 100644
--- a/android/app/src/main/res/drawable/launch_background.xml
+++ b/android/app/src/main/res/drawable/launch_background.xml
@@ -1,9 +1,10 @@
 <?xml version="1.0" encoding="utf-8"?>
+<!-- Author: fruit.com.cn -->
 <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:drawable="@color/splash_background" />
     <item>
-        <bitmap android:gravity="fill" android:src="@drawable/background"/>
-    </item>
-    <item>
-        <bitmap android:gravity="center" android:src="@drawable/splash"/>
+        <bitmap
+            android:gravity="center"
+            android:src="@drawable/splash_screen" />
     </item>
 </layer-list>
diff --git a/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml b/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml
index 18d2d58..c79c58a 100644
--- a/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml
+++ b/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml
@@ -1,5 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
 <adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
-  <background android:drawable="@mipmap/ic_launcher_background"/>
-  <foreground android:drawable="@drawable/ic_launcher_foreground"/>
+  <background android:drawable="@color/ic_launcher_background"/>
+  <foreground>
+      <inset
+          android:drawable="@drawable/ic_launcher_foreground"
+          android:inset="16%" />
+  </foreground>
 </adaptive-icon>
diff --git a/android/app/src/main/res/mipmap-hdpi/ic_launcher.png b/android/app/src/main/res/mipmap-hdpi/ic_launcher.png
index 045ed69..81ea1a3 100644
Binary files a/android/app/src/main/res/mipmap-hdpi/ic_launcher.png and b/android/app/src/main/res/mipmap-hdpi/ic_launcher.png differ
diff --git a/android/app/src/main/res/mipmap-mdpi/ic_launcher.png b/android/app/src/main/res/mipmap-mdpi/ic_launcher.png
index 36c8583..bb256a1 100644
Binary files a/android/app/src/main/res/mipmap-mdpi/ic_launcher.png and b/android/app/src/main/res/mipmap-mdpi/ic_launcher.png differ
diff --git a/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png b/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png
index dacd5ff..e89d692 100644
Binary files a/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png and b/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png differ
diff --git a/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png b/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png
index 66a7a49..ded1644 100644
Binary files a/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png and b/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png differ
diff --git a/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png b/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png
index ad7574a..f8dd70e 100644
Binary files a/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png and b/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png differ
diff --git a/android/app/src/main/res/values-night-v31/styles.xml b/android/app/src/main/res/values-night-v31/styles.xml
index e4f4e80..13a688d 100644
--- a/android/app/src/main/res/values-night-v31/styles.xml
+++ b/android/app/src/main/res/values-night-v31/styles.xml
@@ -1,11 +1,15 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Author: fruit.com.cn -->
-
 <resources>
     <style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
         <item name="android:windowBackground">@drawable/launch_background</item>
-        <item name="android:windowSplashScreenBackground">@color/splash_background</item>
-        <item name="android:windowSplashScreenAnimatedIcon">@drawable/android12splash</item>
+        <item name="android:forceDarkAllowed">false</item>
+        <item name="android:windowFullscreen">false</item>
+        <item name="android:windowDrawsSystemBarBackgrounds">false</item>
+        <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
+        <item name="android:windowSplashScreenBackground">#000000</item>
+        <item name="android:windowSplashScreenAnimatedIcon">@drawable/splash_brand</item>
+        <item name="android:windowSplashScreenAnimationDuration">0</item>
     </style>
     <style name="NormalTheme" parent="@android:style/Theme.Black.NoTitleBar">
         <item name="android:windowBackground">@color/splash_background</item>
diff --git a/android/app/src/main/res/values-v31/styles.xml b/android/app/src/main/res/values-v31/styles.xml
index a7d85a0..0e7ec1a 100644
--- a/android/app/src/main/res/values-v31/styles.xml
+++ b/android/app/src/main/res/values-v31/styles.xml
@@ -1,11 +1,15 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Author: fruit.com.cn -->
-
 <resources>
     <style name="LaunchTheme" parent="@android:style/Theme.Light.NoTitleBar">
         <item name="android:windowBackground">@drawable/launch_background</item>
-        <item name="android:windowSplashScreenBackground">@color/splash_background</item>
-        <item name="android:windowSplashScreenAnimatedIcon">@drawable/android12splash</item>
+        <item name="android:forceDarkAllowed">false</item>
+        <item name="android:windowFullscreen">false</item>
+        <item name="android:windowDrawsSystemBarBackgrounds">false</item>
+        <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
+        <item name="android:windowSplashScreenBackground">#000000</item>
+        <item name="android:windowSplashScreenAnimatedIcon">@drawable/splash_brand</item>
+        <item name="android:windowSplashScreenAnimationDuration">0</item>
     </style>
     <style name="NormalTheme" parent="@android:style/Theme.Light.NoTitleBar">
         <item name="android:windowBackground">@color/splash_background</item>
diff --git a/android/app/src/main/res/values/colors.xml b/android/app/src/main/res/values/colors.xml
index 7ae7661..45fd4e0 100644
--- a/android/app/src/main/res/values/colors.xml
+++ b/android/app/src/main/res/values/colors.xml
@@ -2,5 +2,6 @@
 <!-- Author: fruit.com.cn -->
 
 <resources>
-    <color name="splash_background">#1F1B16</color>
-</resources>
+	<color name="splash_background">#000000</color>
+	<color name="ic_launcher_background">#FF6B2C</color>
+</resources>
\ No newline at end of file
diff --git a/assets/icon/crown.png b/assets/icon/crown.png
new file mode 100644
index 0000000..e2a823b
Binary files /dev/null and b/assets/icon/crown.png differ
diff --git a/assets/icon/film_reel.png b/assets/icon/film_reel.png
new file mode 100644
index 0000000..771e41f
Binary files /dev/null and b/assets/icon/film_reel.png differ
diff --git a/assets/icon/film_reel_filled.png b/assets/icon/film_reel_filled.png
new file mode 100644
index 0000000..044fbad
Binary files /dev/null and b/assets/icon/film_reel_filled.png differ
diff --git a/assets/icon/fruitshorts.png b/assets/icon/fruitshorts.png
index 81a691d..a615522 100644
Binary files a/assets/icon/fruitshorts.png and b/assets/icon/fruitshorts.png differ
diff --git a/assets/icon/gift.png b/assets/icon/gift.png
new file mode 100644
index 0000000..f3bcdc7
Binary files /dev/null and b/assets/icon/gift.png differ
diff --git a/assets/icon/splash_logo.png b/assets/icon/splash_logo.png
index d8dbc36..2523a1e 100644
Binary files a/assets/icon/splash_logo.png and b/assets/icon/splash_logo.png differ
diff --git a/assets/icon/splash_logo_android12.png b/assets/icon/splash_logo_android12.png
index c3a14e3..07cfb12 100644
Binary files a/assets/icon/splash_logo_android12.png and b/assets/icon/splash_logo_android12.png differ
diff --git a/docs/plans/2026-10-22-dark-theme-client.md b/docs/plans/2026-10-22-dark-theme-client.md
new file mode 100644
index 0000000..6f2e2fd
--- /dev/null
+++ b/docs/plans/2026-10-22-dark-theme-client.md
@@ -0,0 +1,28 @@
+# ReelShort 客户端深色视觉改造
+
+## 目标
+
+- 深色设为默认且唯一主题，页面、卡片、浮层、播放器和底部导航保持一致。
+- 色板收敛到 `AppColors`，主题组件配置收敛到 `AppTheme`。
+- 保持现有布局、信息结构、路由、业务逻辑和文案不变。
+
+## 结果
+
+- 背景 `#0B1020`、卡片 `#151B2E`、浮层 `#1C2436`、分割线白色 6%。
+- 主文字白色 92%、次文字 64%、禁用 38%。
+- 主色 `#FF6B2C`，辅助链接色 `#22D3EE`。
+- 卡片 12、按钮/输入框 10、标签 6，阴影关闭，组件使用分割线分层。
+- 页面级透明、遮罩、阴影、媒体底、玻璃面和渐变全部映射到 AppColors 语义 token。
+- 系统栏统一浅色图标，AppBar 与底部导航使用深色表面。
+
+## 验证
+
+- 主题 token、对比度、系统栏、圆角与关键页 smoke 测试。
+- `dart analyze lib test`
+- `flutter test --no-pub`
+- `flutter build apk --debug`
+
+## 约束
+
+- 不提交 `pubspec.lock` 漂移。
+- 不启停服务、不操作真机。
diff --git a/docs/plans/2026-10-22-debug-http-logging.md b/docs/plans/2026-10-22-debug-http-logging.md
new file mode 100644
index 0000000..583255c
--- /dev/null
+++ b/docs/plans/2026-10-22-debug-http-logging.md
@@ -0,0 +1,24 @@
+# Android Studio 调试 HTTP 日志
+
+## 目标
+
+- 仅在调试构建中输出 Dio 请求、响应与异常日志。
+- Android Studio Run 控制台通过 `debugPrint` 展示，logcat 标签保持 `flutter`。
+- Authorization 脱敏，X-Device-Id 保留，二进制响应只显示字节数。
+- 单条请求体或响应体最多 3000 字符。
+
+## 实现步骤
+
+1. 新增 `NetworkLogInterceptor`，支持注入日志回调并保留请求耗时。
+2. 在 Envelope 解包前暂存原始 bytes；日志拦截器追加到拦截链末尾后读取暂存值。
+3. 在 `ApiClient` 注册调试拦截器，`kDebugMode` 与常量开关同时满足时才输出。
+4. 以 fake adapter 补单测，覆盖行格式、脱敏、UTF-8、截断、非 JSON 与二进制。
+5. 运行 `dart analyze lib test` 和 `flutter test`，更新 PROGRESS 留痕。
+
+## 风险与约束
+
+- `ResponseType.bytes` 不能直接 `toString`，响应体统一 `utf8.decode`。
+- Dio 响应拦截器按 FIFO 执行；链尾日志通过 Envelope 暂存的原始 bytes 读取，
+  避免拿到已解包后的 `data`。
+- release/profile 通过 `kDebugMode` 短路，不输出任何 HTTP 日志。
+- 不新增依赖，不提交现有 `pubspec.lock` 改动，不启停服务、不操作真机。
diff --git a/docs/plans/2026-10-22-favorite-card-synopsis.md b/docs/plans/2026-10-22-favorite-card-synopsis.md
new file mode 100644
index 0000000..8923018
--- /dev/null
+++ b/docs/plans/2026-10-22-favorite-card-synopsis.md
@@ -0,0 +1,20 @@
+# 收藏卡片简介
+
+## 目标
+
+- 收藏卡片在标题/标签下方显示后端 `synopsis`，最多 2 行并省略溢出。
+- 空白简介不创建文本节点、不占高度，不显示 `null/undefined`。
+- 保持封面 80x106 和现有卡片高度，不引入布局溢出。
+
+## 实现
+
+1. `_FavoriteCard` 对 synopsis 做 trim 后条件渲染。
+2. 简介使用 `Flexible` 占据标题、标签与底部统计之间的剩余空间，
+   `maxLines: 2`、`TextOverflow.ellipsis`、次要文案色和字号。
+3. 无简介时继续使用原 Spacer，保持原布局。
+4. widget 测试覆盖有简介、空简介和卡片高度稳定性。
+
+## 约束
+
+- 不改接口、后端、收藏分页。
+- 不新增依赖，不提交现有 `pubspec.lock`，不启停服务、不操作真机。
diff --git a/docs/plans/2026-10-22-keep-awake-auto-resume.md b/docs/plans/2026-10-22-keep-awake-auto-resume.md
new file mode 100644
index 0000000..b2781ed
--- /dev/null
+++ b/docs/plans/2026-10-22-keep-awake-auto-resume.md
@@ -0,0 +1,31 @@
+# 屏幕常亮与前台自动续播
+
+## 目标
+
+- Android 与 iOS 前台保持屏幕常亮，不引入插件或依赖。
+- 用户主动暂停后切后台再回前台，在播放器与票据状态安全时自动续播。
+- 锁定、blocked、票据失败、错误态及浮层遮挡场景不得强制起播。
+
+## 实施步骤
+
+1. Android `MainActivity.onCreate` 添加 `FLAG_KEEP_SCREEN_ON`，保留现有渠道逻辑。
+2. iOS `AppDelegate` 设置 `UIApplication.shared.isIdleTimerDisabled = true`。
+3. 为 `PlaybackSession` 增加无浮层、路线可见且 active 播放器可用的恢复判断。
+4. 调整 `PlayerLogic.onLifecycle`，在现有 PiP 复位和过期票据刷新流程后安全设置播放意图。
+5. 补用户暂停恢复、锁定/票据失败不恢复、后台保存并暂停测试。
+6. 执行 `dart analyze lib test` 与 `flutter test --no-pub`，回填 PROGRESS 后提交合并。
+
+## 风险 / 待确认
+
+- 真机常亮和生命周期行为由 PM 验收，本次不启停服务、不操作设备。
+- PiP 继续沿用现有可见性策略，不额外修改后台播放行为。
+
+## 执行结果
+
+- Android 主 Activity 已添加 `FLAG_KEEP_SCREEN_ON`，未改动 Flutter 渠道与 PiP 逻辑。
+- iOS AppDelegate 已设置 `UIApplication.shared.isIdleTimerDisabled = true`。
+- 用户主动暂停后回前台可安全恢复；过期票据会等待重取完成后再恢复。
+- locked、blocked、票据错误、会话错误、解锁/浮层遮挡和 PiP 场景均不会强制续播。
+- 后台仍先保存进度并暂停。
+- `dart analyze lib test` 零告警，`flutter test --no-pub` 580 项全过。
+- 未启停服务，未操作真机。
diff --git a/docs/plans/2026-10-22-library-paging-ui.md b/docs/plans/2026-10-22-library-paging-ui.md
new file mode 100644
index 0000000..f3c8202
--- /dev/null
+++ b/docs/plans/2026-10-22-library-paging-ui.md
@@ -0,0 +1,31 @@
+# 收藏与观看历史分页 UI
+
+## 目标
+
+- `/app/favorites` 与 `/app/watch/recent` 按 `PageResult{total,list}` 分页接入。
+- 收藏页、观看历史页支持首屏、触底加载、无更多、刷新、失败重试和总数展示。
+- 观看记录直接使用后端 `dramaTitle/dramaCover/episodeNumber`，缺失时安全兜底。
+
+## 实现步骤
+
+1. 新增通用 `PageResult<T>`，更新 LibraryApi、WatchApi、Repository 与内存替身。
+2. FavoriteController、WatchRecordsController 增加分页状态、请求代次、dramaId 去重。
+3. 页面通过滚动通知触发 `loadMore`，复用下拉刷新并增加通用分页 footer。
+4. 观看卡片优先渲染接口字段，标题为空时用本地化“第 N 集”，封面为空显示占位。
+5. 补 API、Controller 和 widget 测试，运行 analyze 与全量 flutter test。
+
+## 风险与约束
+
+- 刷新期间保持旧列表，成功后原子替换并回到第 1 页；失败保留旧数据。
+- loadMore 与 refresh 通过请求代次隔离，旧响应不得覆盖新列表。
+- 空页立即停止加载；`loaded >= total` 后不再请求。
+- 不新增依赖、不提交现有 `pubspec.lock`，不启停服务、不操作真机。
+
+## 2026-10-22 范围修订
+
+- 分页协议和 Controller 分页状态保持不改。
+- 观看历史优先使用后端 `dramaTitle/dramaCover/episodeNumber`，只有标题为空时才预取详情。
+- 标题为空且详情也未返回标题时，用本地化“第 N 集”兜底。
+- 有标题的条目点击播放时再按需加载详情，不在列表加载阶段产生 N+1。
+- 使用当前真实后端校验第 1/2 页请求参数、total 与 list；若运行实例仍忽略分页，
+  只在 PROGRESS 记录证据，不做前端全量兜底。
diff --git a/docs/plans/2026-10-22-login-error-center-dialog.md b/docs/plans/2026-10-22-login-error-center-dialog.md
new file mode 100644
index 0000000..fe5847f
--- /dev/null
+++ b/docs/plans/2026-10-22-login-error-center-dialog.md
@@ -0,0 +1,28 @@
+# 登录异常居中弹窗
+
+## 目标
+
+- 邮箱登录、邮箱注册及手机号 OTP 登录的提交异常改为屏幕居中弹窗。
+- 本地表单校验继续使用现有内联字段错误，不触发弹窗。
+
+## 实施步骤
+
+1. 新增 `lib/core/widgets/centered_error_dialog.dart`，统一弹窗样式、遮罩关闭和确认按钮。
+2. 补充登录失败、注册失败、确认按钮的中英文印尼语文案并重新生成 l10n。
+3. 调整邮箱认证页：接口异常展示居中弹窗，提交 busy 在展示弹窗前复位。
+4. 调整手机号弹窗：OTP 发送和验证码登录/注册异常展示居中弹窗，成功 SnackBar 保持不变。
+5. 补接口异常、注册标题、本地校验不弹窗和手机号两条异常路径测试。
+6. 执行 `dart analyze lib test` 与 `flutter test --no-pub`，回填 PROGRESS 后提交合并。
+
+## 风险 / 待确认
+
+- 同级 FruitServer 的 `INBOX.md` 当前顶部为已处理 K100，未找到本需求条目；以用户消息中的完整需求为准。
+- 现有主工作区处于 `feature/payment-iap` 且有未提交 `pubspec.lock`，本次使用独立 worktree，不触碰该文件。
+
+## 执行结果
+
+- 已新增居中错误弹窗组件及三语言文案，邮箱登录/注册和手机号 OTP/验证码提交异常均改为弹窗。
+- 本地字段校验仍走原内联错误；异常展示前提交 busy 已复位。
+- 接口异常、注册标题、未知异常网络文案、遮罩关闭、确认关闭、本地校验不弹窗均有测试覆盖。
+- `dart analyze lib test` 零告警，`flutter test --no-pub` 570 项全过。
+- 未启停服务，未操作真机。
diff --git a/docs/plans/2026-10-22-login-error-center-toast.md b/docs/plans/2026-10-22-login-error-center-toast.md
new file mode 100644
index 0000000..8897f34
--- /dev/null
+++ b/docs/plans/2026-10-22-login-error-center-toast.md
@@ -0,0 +1,29 @@
+# 登录异常居中吐司
+
+## 目标
+
+- 将上一版认证异常 AlertDialog 替换为无交互的屏幕居中吐司。
+- 吐司淡入展示约 2 秒后自动淡出，不遮罩、不拦截手势。
+- 同一时刻只存在一个吐司，新消息替换旧消息。
+
+## 实施步骤
+
+1. 删除 `centered_error_dialog.dart`，新增 `centered_toast.dart`。
+2. 认证页和手机号弹窗异常路径改用 `showCenteredToast`，保留 busy 复位和成功 SnackBar。
+3. 清理不再使用的认证错误标题与确认按钮 l10n 键，重新生成 AppLocalizations。
+4. 更新认证测试为吐司断言，并补单例替换、自动消失测试。
+5. 执行 `dart analyze lib test` 与 `flutter test --no-pub`，回填 PROGRESS 后提交合并。
+
+## 风险 / 待确认
+
+- 吐司使用 root Overlay，认证路由退出时仍会按自身计时器自动清理。
+- 测试必须 pump 超过展示和淡出时长，确保不遗留 Timer 或 OverlayEntry。
+
+## 执行结果
+
+- 已删除 AlertDialog 组件，新增 OverlayEntry 居中吐司。
+- 邮箱和手机号异常改用吐司；busy 复位、成功 SnackBar 和本地内联校验保持不变。
+- 已清理三个不再使用的 l10n 键并重新生成 AppLocalizations。
+- 覆盖单例替换、点击穿透、自动消失、接口异常和本地校验不弹吐司。
+- `dart analyze lib test` 零告警，`flutter test --no-pub` 573 项全过。
+- 未启停服务，未操作真机。
diff --git a/docs/plans/2026-10-22-playback-entry-no-buffer.md b/docs/plans/2026-10-22-playback-entry-no-buffer.md
new file mode 100644
index 0000000..8d2c409
--- /dev/null
+++ b/docs/plans/2026-10-22-playback-entry-no-buffer.md
@@ -0,0 +1,21 @@
+# 播放入口无缓冲提示
+
+## 目标
+
+- 未初始化进度条显示静态 inactive 轨道，不出现流动加载高光。
+- 仅真实 buffering 持续超过 350ms 时显示白色高光。
+- 起播定位阶段不叠加 session 居中 loading；只有 ticket loading 居中显示。
+- 同集返回复用 controller；重建时 initialize→seek→play。
+
+## 实施步骤
+
+1. 调整 SeekProgressBar 与 _FeedProgressBar 的初始化/缓冲状态判断。
+2. 删除 PlayerView 的 session loading 居中圈，仅保留 ticket loading。
+3. preparePlayer 统一通过 VideoPlayerPort.seekTo 定位缓存位置。
+4. 更新进度条、全屏入口、详情返回和重建顺序测试。
+5. 执行 `dart analyze lib test` 与 `flutter test --no-pub`，回填 PROGRESS 后提交合并。
+
+## 风险 / 待确认
+
+- 真实持续网络卡顿仍保留缓冲高光。
+- 锁定集继续沿用静态空轨道和禁用 seek 行为。
diff --git a/docs/plans/2026-10-22-playback-position-continuity.md b/docs/plans/2026-10-22-playback-position-continuity.md
new file mode 100644
index 0000000..40bb925
--- /dev/null
+++ b/docs/plans/2026-10-22-playback-position-continuity.md
@@ -0,0 +1,32 @@
+# 播放位置连续性
+
+## 目标
+
+- 首页进入详情、详情返回首页、详情再进播放器时保持同一集同一秒。
+- 新增进程内最近播放位置缓存，优先于服务端旧记录。
+- 跨剧、跨集不串位；锁定/票据失败不因缓存强行起播；进程重启仍回服务端。
+
+## 实施步骤
+
+1. 新增 `PlaybackPositionCache`，按 episodeId 保存 dramaId/position/duration/updatedAt。
+2. App Provider 注入单一缓存实例，PlayerPage 与详情页共享。
+3. PlayerLogic 进度监听、saveCurrentProgress 写入缓存；loadResumePoint 优先命中缓存。
+4. preparePlayer 对每个待准备集按 dramaId 校验缓存，并继续使用现有位置钳位。
+5. 详情页续看状态优先使用该剧最新缓存，未命中再请求服务端。
+6. 补缓存、缓存命中不请求服务端、跨剧隔离、服务端回落和详情返回位置测试。
+7. 执行 `dart analyze lib test` 与 `flutter test --no-pub`，回填 PROGRESS 后提交合并。
+
+## 风险 / 待确认
+
+- 缓存仅保存在进程内，App 重启后自动回落到服务端观看记录。
+- 片尾附近继续复用现有 `clampResumePosition` 完成保护。
+
+## 执行结果
+
+- 新增进程内按集缓存并通过 Provider 全局共享，详情页与播放器共用。
+- 进度监听、`saveCurrentProgress` 和进入详情前会写入缓存。
+- `loadResumePoint` 优先缓存，未命中或跨剧时才请求服务端。
+- 详情页继续观看与 CTA 优先进缓存集；返回首页保持原播放器与位置。
+- 已覆盖缓存读写/过期、跨剧隔离、缓存命中去网络、服务端回落和详情往返。
+- `dart analyze lib test` 零告警，`flutter test --no-pub` 589 项全过。
+- 未启停服务，未操作真机。
diff --git a/docs/plans/2026-10-22-playback-seek-position.md b/docs/plans/2026-10-22-playback-seek-position.md
new file mode 100644
index 0000000..6add3d3
--- /dev/null
+++ b/docs/plans/2026-10-22-playback-seek-position.md
@@ -0,0 +1,21 @@
+# Seek 后播放位置保持
+
+## 目标
+
+- 拖动进度条后，缓存与观看记录立即使用 seek 完成后的真实位置。
+- 拖动后立即进详情/离开也不会回退到旧进度。
+- 越界位置 clamp，锁定/票据失败不写无效缓存。
+
+## 实施步骤
+
+1. 增加播放位置 clamp 纯函数，缓存写入统一限制在 `0..duration`。
+2. VideoPlayerPort 暴露 seek 方法，PlayerLogic 等待 seek 完成后再读取 controller。
+3. PlayerLogic 统一当前播放快照，监听、缓存和上报共用同一份 position/duration。
+4. 增加 pending seek 屏障，saveCurrentProgress 与离开路径等待 seek 和上报完成。
+5. 补 seek 缓存、越界 clamp、seek 后进详情并返回测试。
+6. 执行 `dart analyze lib test` 与 `flutter test --no-pub`，回填 PROGRESS 后提交合并。
+
+## 风险 / 待确认
+
+- 片尾与完成逻辑继续沿用现有 controller/播放器行为。
+- 缓存仅在进程内，不改变服务端观看记录契约。
diff --git a/docs/plans/2026-10-22-player-loading-polish.md b/docs/plans/2026-10-22-player-loading-polish.md
new file mode 100644
index 0000000..b98133a
--- /dev/null
+++ b/docs/plans/2026-10-22-player-loading-polish.md
@@ -0,0 +1,30 @@
+# 播放器 loading 与锁定进度条调整
+
+## 目标
+
+- 播放器票据与 session loading 圈统一为 24×24、线宽 2。
+- 缓冲/加载进度高光改为白色。
+- 未解锁剧集显示静态 inactive 轨道，不进入 loading，不允许拖动 seek。
+
+## 实施步骤
+
+1. 更新 `LoadingProgressTrack` 默认高光颜色，并补颜色断言。
+2. 为 `SeekProgressBar`、`PlayerOverlayData`、`HomeFeedOverlay` 和 `_FeedProgressBar` 增加 locked 状态。
+3. `PlayerPage` 使用 `logic.session.isLocked || episode.locked` 传入两个浮层。
+4. 缩小 `player-ticket-loading` 与 `player-session-loading` 的尺寸和线宽。
+5. 补首页/全屏锁定态、缓冲高光和两个 loading 指示器尺寸测试。
+6. 执行 `dart analyze lib test` 与 `flutter test --no-pub`，回填 PROGRESS 后提交合并。
+
+## 风险 / 待确认
+
+- 锁定态只影响进度条 UI 与手势，不改播放、解锁或接口逻辑。
+- 首页浮层锁定线沿用当前 `Colors.white24` inactive 色，避免改变非锁定轨道样式。
+
+## 执行结果
+
+- 两个播放器 loading 圈均为 24×24、线宽 2、主色不变。
+- loading 高光默认改为白色，普通轨道与首页 white24 轨道颜色未变。
+- 首页与全屏播放器均按剧集锁定态渲染静态空轨道并禁用 seek。
+- 已覆盖锁定轨道高度、无 loading、无拖动 seek、loading 指示器尺寸和高光颜色。
+- `dart analyze lib test` 零告警，`flutter test --no-pub` 576 项全过。
+- 未启停服务，未操作真机。
diff --git a/docs/plans/2026-10-22-scrub-frame-preview.md b/docs/plans/2026-10-22-scrub-frame-preview.md
new file mode 100644
index 0000000..4c4c5bf
--- /dev/null
+++ b/docs/plans/2026-10-22-scrub-frame-preview.md
@@ -0,0 +1,62 @@
+# 播放器进度拖动画面预览
+
+## 目标
+
+首页 feed 与全屏播放器的进度条在拖动时显示当前时间点的视频画面缩略图、
+当前时间与总时长；松手立即隐藏并提交 seek。缩略图未返回或失败时显示短剧
+封面，不出现空白闪烁或错误文案。
+
+## 性能红线
+
+1. 拖动期间主线程无卡顿；图片解码和原生取帧不得阻塞 UI 线程。
+2. 原生取帧并发数不超过 1。
+3. 预览图最大宽度 240px。
+4. Dart 内存 LRU 缓存不超过 24 帧。
+5. 不新增 pub 依赖。
+6. 不改后端契约。
+
+## 实现
+
+### 缩略图服务
+
+- 新增 `PlaybackThumbnailService`，公开入口按 `episodeId + position` 取
+  `ByteData`，底层通过
+  `MethodChannel('com.stormg.lumadrama/thumbnail')` 调用原生。
+- 时间按 1 秒分桶；同一 bucket 的在途请求合流。
+- 最多 24 帧 LRU；成功和失败结果都做过期控制，避免旧拖动位置覆盖当前预览。
+- 全局单飞；拖动期间只保留最新 bucket，尚未开始的旧请求直接丢弃。
+- 拖动停顿 120ms 后最多预取相邻一个 bucket，松手取消尚未开始的请求。
+- 原生异常、缺失实现和超过 1.5 秒无结果统一返回 `null`。
+
+### 原生取帧
+
+- Android 使用 `MediaMetadataRetriever`，优先本地下载路径，其次签名 URL；
+  `OPTION_CLOSEST_SYNC` 取帧，最大宽 240px，JPEG 质量 70，单线程 Executor，
+  完成后立即 release。
+- iOS 使用 `AVAssetImageGenerator`，应用画面方向，最大尺寸约 240x426，
+  合理时间容差，后台串行队列生成 JPEG。
+- 两端均保证只回调一次；失败或 1.5 秒超时返回 `null`，不向 UI 抛异常。
+
+### UI
+
+- 新增 `ScrubPreviewCard`：宽 120dp、圆角 8、白色 1px 描边，显示
+  `当前时间 / 总时长`；沿拖动点水平跟随并做安全边距 clamp。
+- 首页 `_FeedProgressBar` 与全屏 `SeekProgressBar` 共用该卡片。
+- 封面始终铺在卡片底层；`Image.memory` 仅在帧到达后覆盖，并限制
+  `cacheWidth: 240`。
+- 开始拖动请求当前 bucket，拖动更新只保留最新位置；松手立即隐藏卡片并取消
+  未开始请求。
+- `PlayerPage` 持有页面级服务，dispose 时清空缓存，避免跨页面串集。
+
+## 测试
+
+- 单测：bucket、LRU 淘汰、同 bucket 合流、过期请求丢弃、松手取消、
+  相邻 bucket 防抖、异常/超时回落。
+- Widget：拖动显示预览卡片和时间、松手消失、无缩略图显示封面。
+- 门禁：`dart analyze lib test` 与 `flutter test --no-pub`。
+
+## 非目标
+
+- 不改服务端接口或持久化策略。
+- 不新增第三方依赖。
+- 不启停服务、不操作真机；原生取帧实际效果由 PM 真机验收。
diff --git a/docs/plans/2026-10-22-sprite-scrub-preview.md b/docs/plans/2026-10-22-sprite-scrub-preview.md
new file mode 100644
index 0000000..860a2a2
--- /dev/null
+++ b/docs/plans/2026-10-22-sprite-scrub-preview.md
@@ -0,0 +1,46 @@
+# 雪碧图 VTT 拖动预览
+
+## 目标
+
+将进度条拖动预览主链路改为服务端雪碧图 + WebVTT 局部裁剪，原生取帧只作为降级：
+
+1. `Episode` 与 `PlayTicket` 解析 `thumbnailsUrl`。
+2. VTT 只拉取/解析一次，内存缓存 10 分钟。
+3. cue 使用起止时间 + 相对 sprite 文件名 + `xywh`，按 position 二分选择。
+4. sprite 图最多缓存 2 张 `ui.Image`，拖动帧只绘制 sourceRect。
+5. 无 VTT、空轴或图片失败时回退现有 `PlaybackThumbnailService`，再回退封面。
+
+## 性能红线
+
+- 拖动帧禁止网络请求与图片解码，只允许 cue 二分查找和 `RawImage.sourceRect` 绘制。
+- VTT 每个 URL 只解析一次；sprite 解码不在 build/build paint 中执行。
+- sprite ui.Image LRU 上限 2 张，页面 dispose 清空。
+- 解码 sprite 最长边超过 2048px 时按比例缩小后常驻。
+- 签名 `thumbnailsUrl` 不写入任何持久化缓存。
+
+## 实施
+
+- 新增 `SpriteThumbnailAxisService`：
+  - Dio 拉取 VTT，403 清缓存后重试一次；
+  - 解析和选 cue 为纯函数，解析失败返回空轴；
+  - 播放器就绪时预取当前 cue 及相邻 sprite；
+  - LRU2 sprite 缓存和 10 分钟 VTT 缓存。
+- `PlayerPage` 持有页面级服务，按当前选中集预取，dispose 时清空。
+- `ScrubPreviewCard` 优先读取已缓存 sprite frame，显示 `RawImage` 裁剪；
+  VTT 未就绪时暂显封面，轴为空/不可用后启动本地取帧，全部失败保留封面。
+- 首页 feed 和全屏播放器都把 `thumbnailsUrl` 传到预览卡片。
+- 不新增 pub 依赖、不改后端契约。
+
+## 测试
+
+- VTT 解析：时间、xywh、多 sprite 文件。
+- cue 选择：命中、越界最近邻。
+- sprite LRU 最多 2 张。
+- 回退状态判定。
+- Widget：sprite 裁剪且不触发本地取帧；无 URL 回退本地；全部失败显示封面。
+- 门禁：`dart analyze lib test`、`flutter test --no-pub`。
+
+## 风险
+
+- 真实网络 VTT/sprite 可访问性和签名过期由 PM 真机验收。
+- 本次不启动服务、不操作真机、不修改 Web/FruitServer。
diff --git a/docs/plans/PROGRESS.md b/docs/plans/PROGRESS.md
index 2122f93..7495f1a 100644
--- a/docs/plans/PROGRESS.md
+++ b/docs/plans/PROGRESS.md
@@ -203,3 +203,1119 @@ Running Gradle task 'assembleDebug'... 35.7s
 
 解读：静态分析零告警，565 项全量测试通过，debug APK 构建成功；
 `pubspec.lock` 已还原，无依赖变更，未安装或操作真机。
+
+## 2026-10-22 登录异常改为屏幕居中弹窗
+
+- 已从 `origin/develop`（`9b78e43`）创建 `feature/login-error-center-dialog`。
+- 新增 `lib/core/widgets/centered_error_dialog.dart`，统一居中样式、遮罩关闭、确认按钮。
+- 邮箱登录/注册与手机号 OTP/验证码异常改为居中弹窗；字段校验保持内联，成功提示不变。
+- 新增 `authLoginFailed` / `authRegisterFailed` / `authErrorConfirm` 三语言文案并重新生成 l10n。
+- 异常弹窗前提交 busy 已复位，避免 loading 卡在弹窗打开期间。
+
+执行命令与原始输出：
+
+```text
+$ flutter gen-l10n
+Because l10n.yaml exists, the options defined there will be used instead.
+To use the command line arguments, delete the l10n.yaml file in the Flutter project.
+
+$ flutter test --no-pub test/auth/auth_page_test.dart test/auth/phone_auth_sheet_test.dart
+00:02 +20: All tests passed!
+
+$ dart analyze lib test
+Analyzing lib, test...
+No issues found!
+
+$ flutter test --no-pub
+00:49 +570: All tests passed!
+```
+
+解读：登录异常、注册标题、未知异常回退、本地校验不弹窗、遮罩/按钮关闭和手机号两条
+异常路径均通过；全量静态分析零告警，570 项测试全过。`pubspec.lock` 已还原，
+未启停服务，未操作真机。
+
+## 2026-10-22 登录异常调整为中心吐司
+
+- 已从 `develop`（`11e37a9`）创建 `feature/login-error-center-toast`。
+- 删除 AlertDialog 组件，新增 OverlayEntry 居中吐司：淡入淡出、约 2 秒消失、不拦截手势。
+- 吐司保持全局单例，新消息替换旧消息；邮箱与手机号异常路径均已切换。
+- 本地表单校验继续内联，手机号验证码发送成功 SnackBar 保持不变。
+- 清理 `authLoginFailed` / `authRegisterFailed` / `authErrorConfirm` 并重新生成 l10n。
+
+执行命令与原始输出：
+
+```text
+$ flutter gen-l10n
+Because l10n.yaml exists, the options defined there will be used instead.
+To use the command line arguments, delete the l10n.yaml file in the Flutter project.
+
+$ flutter test --no-pub test/core/centered_toast_test.dart
+00:00 +3: All tests passed!
+
+$ flutter test --no-pub test/auth/auth_page_test.dart test/auth/phone_auth_sheet_test.dart
+00:02 +20: All tests passed!
+
+$ dart analyze lib test
+Analyzing lib, test...
+No issues found!
+
+$ flutter test --no-pub
+01:00 +573: All tests passed!
+```
+
+解读：吐司单例替换、点击穿透和自动消失通过；认证异常与本地校验路径通过；
+全量静态分析零告警，573 项测试全过。`pubspec.lock` 已还原，未启停服务，
+未操作真机。
+
+## 2026-10-22 播放器 loading 与锁定进度条调整
+
+- 已从 `develop`（`7b068e8`）创建 `feature/player-loading-polish`。
+- 播放器票据与 session loading 圈统一为 24×24、线宽 2。
+- loading 高光默认改为白色，普通轨道色与首页 white24 轨道保持不变。
+- 首页和全屏播放器进度条增加 locked 状态；锁定态显示静态 inactive 线，不进入 loading，
+  禁用拖动与 seek。
+- 已补 loading 指示器尺寸、缓冲高光颜色、首页/全屏锁定态和锁定轨道高度测试。
+
+执行命令与原始输出：
+
+```text
+$ flutter test --no-pub test/player/loading_progress_track_test.dart test/playback/seek_progress_bar_test.dart
+00:00 +8: All tests passed!
+
+$ flutter test --no-pub test/home/home_preview_layout_test.dart
+00:01 +7: All tests passed!
+
+$ flutter test --no-pub test/player/player_fullscreen_test.dart
+00:09 +37: All tests passed!
+
+$ dart analyze lib test
+Analyzing lib, test...
+No issues found!
+
+$ flutter test --no-pub
+00:50 +576: All tests passed!
+```
+
+解读：加载高光、锁定静态轨道、拖动禁用和两个 loading 指示器尺寸均通过；
+全量静态分析零告警，576 项测试全过。`pubspec.lock` 已还原，未启停服务，
+未操作真机。
+
+## 2026-10-22 屏幕常亮与前台自动续播
+
+- 已从 `develop`（`5bf1022`）创建 `feature/keep-awake-auto-resume`。
+- Android 主 Activity 添加 `FLAG_KEEP_SCREEN_ON`，保留已有渠道、PiP 和键盘逻辑。
+- iOS AppDelegate 开启 `isIdleTimerDisabled`，前台保持常亮。
+- 用户主动暂停后回前台安全恢复；过期票据先完成重取再设置播放意图。
+- locked、blocked、票据错误、会话错误、解锁/浮层遮挡和 PiP 场景不会强制续播。
+- 后台仍立即保存进度并暂停，不做后台播放。
+
+执行命令与原始输出：
+
+```text
+$ flutter test --no-pub test/player/player_logic_test.dart
+00:00 +35: All tests passed!
+
+$ dart analyze lib test
+Analyzing lib, test...
+No issues found!
+
+$ flutter test --no-pub
+00:50 +580: All tests passed!
+```
+
+解读：用户暂停恢复、过期票据重取、locked/ticketError/浮层阻断及后台保存暂停
+均通过；全量静态分析零告警，580 项测试全过。`pubspec.lock` 已还原，
+未启停服务，未操作真机。
+
+## 2026-10-22 播放位置连续性
+
+- 已从 `develop`（`fe49c6d`）创建 `feature/playback-position-continuity`。
+- 新增 `PlaybackPositionCache`，按 episodeId 保存 dramaId、position、duration、updatedAt。
+- App Provider 注入单一缓存实例，PlayerLogic 与详情页共享。
+- 进度监听、保存进度与进入详情前更新缓存；loadResumePoint 优先缓存，未命中再回源。
+- 详情页继续观看与 CTA 优先使用最近缓存集，返回首页保持当前播放器位置。
+- 跨剧缓存不命中；片尾保护继续复用 `clampResumePosition`。
+
+执行命令与原始输出：
+
+```text
+$ flutter test --no-pub test/playback/playback_position_cache_test.dart
+00:00 +4: All tests passed!
+
+$ flutter test --no-pub test/player/player_logic_test.dart
+00:00 +38: All tests passed!
+
+$ flutter test --no-pub test/player/player_open_detail_test.dart
+00:00 +1: All tests passed!
+
+$ dart analyze lib test
+Analyzing lib, test...
+No issues found!
+
+$ flutter test --no-pub
+00:53 +589: All tests passed!
+```
+
+解读：缓存读写/过期、跨剧隔离、缓存命中去网络、服务端回落、详情 CTA 缓存集
+和详情往返同秒位置均通过；全量静态分析零告警，589 项测试全过。
+`pubspec.lock` 已还原，未启停服务，未操作真机。
+
+## 2026-10-22 Seek 后播放位置保持
+
+- 已从 `develop`（`47ca214`）创建 `feature/playback-seek-position`。
+- 新增播放位置 clamp；缓存、上报与详情返回统一使用 seek 完成后的 controller 位置。
+- PlayerLogic 增加 pending seek 屏障，saveCurrentProgress 与离开路径会等待 seek 和写入完成。
+- 监听器统一读取一次当前播放快照，避免旧位置覆盖新位置。
+- 已补 seek 目标缓存、越界 clamp、seek 后立即进详情并返回的位置测试。
+
+执行命令与原始输出：
+
+```text
+$ flutter test --no-pub test/playback/playback_position_cache_test.dart
+00:00 +5: All tests passed!
+
+$ flutter test --no-pub test/player/player_logic_test.dart --plain-name should_cache_actual_position_after_seek_completes
+00:00 +1: All tests passed!
+
+$ flutter test --no-pub test/player/player_open_detail_test.dart
+00:00 +1: All tests passed!
+
+$ dart analyze lib test
+Analyzing lib, test...
+No issues found!
+
+$ flutter test --no-pub
+00:49 +591: All tests passed!
+```
+
+解读：seek 完成后缓存与上报使用实际位置，越界目标被 clamp；seek 后立即
+进详情并返回仍保持目标位置。全量静态分析零告警，591 项测试全过。
+`pubspec.lock` 已还原，未启停服务，未操作真机。
+
+## 2026-10-22 播放入口无缓冲提示
+
+- 已从 Seek 修复合并后的 `develop`（`f302b39`）创建 `feature/playback-entry-no-buffer`。
+- 未初始化进度条改为静态 inactive 轨道，不显示流动高光且不可拖动。
+- 仅 initialized 且 isBuffering 持续超过 350ms 时显示白色缓冲高光。
+- PlayerView 删除 session 居中 loading，只保留 ticket loading。
+- preparePlayer 改为初始化完成后先 seek 缓存位置再 play；详情返回复用原 controller。
+
+执行命令与原始输出：
+
+```text
+$ flutter test --no-pub test/playback/seek_progress_bar_test.dart
+00:00 +7: All tests passed!
+
+$ flutter test --no-pub test/home/home_preview_layout_test.dart
+00:01 +8: All tests passed!
+
+$ flutter test --no-pub test/player/player_logic_test.dart
+00:00 +40: All tests passed!
+
+$ flutter test --no-pub test/player/player_fullscreen_test.dart
+00:09 +37: All tests passed!
+
+$ dart analyze lib test
+Analyzing lib, test...
+No issues found!
+
+$ flutter test --no-pub
+00:49 +593: All tests passed!
+```
+
+解读：短缓冲不闪、持续缓冲仍显示白色高光；未初始化/入口/返回/重建路径
+均无多余 loading，重建顺序为 initialize→seek→play。全量静态分析零告警，
+593 项测试全过。`pubspec.lock` 已还原，未启停服务，未操作真机。
+
+## 2026-10-22 播放器进度拖动画面预览
+
+- 已从最新 `develop`（`d06dce9`）创建 `feature/scrub-frame-preview`。
+- 计划文档：`docs/plans/2026-10-22-scrub-frame-preview.md`。
+- 性能红线：拖动期间主线程无卡顿；原生并发取帧不超过 1；预览图最大宽
+  240px；Dart LRU 缓存不超过 24 帧；不新增 pub 依赖；不改后端契约。
+- 实施顺序：缩略图服务与缓存 -> 预览卡片及两处进度条 -> Android/iOS
+  原生渠道 -> 单测/widget 测试与全量门禁。
+
+```text
+$ git status --short --branch
+## feature/scrub-frame-preview
+
+$ git log -5 --oneline --decorate
+d06dce9 (HEAD -> feature/scrub-frame-preview, origin/develop, develop) merge: 合并播放入口无缓冲提示
+```
+
+解读：工作树从最新 develop 创建且开工前无未提交改动。当前仅新增计划与
+PROGRESS 留痕，后续每完成一个阶段会补充命令原始输出与解读。
+
+### 实现结果
+
+- 新增 `PlaybackThumbnailService`：1 秒 bucket、24 帧 LRU、单飞合流、
+  最新 bucket 优先、停顿 120ms 后最多预取相邻 1 帧、1.5 秒统一回落。
+- 新增 `ScrubPreviewCard`：120dp 宽、圆角 8、白色 1px 描边，显示
+  `当前时间 / 总时长`，安全边距内跟随拖动点；帧到达前始终显示封面。
+- 首页 feed 与全屏播放器进度条均接入；松手立即隐藏并取消尚未开始的请求。
+- Android 使用单线程 `MediaMetadataRetriever`，iOS 使用串行
+  `AVAssetImageGenerator`；两端优先本地路径、最大宽 240px、JPEG 约 70、
+  失败或 1.5 秒超时回调 null。
+- 未新增 pub 依赖，未改后端契约；`pubspec.lock` 已还原，未启停服务，
+  未操作真机。
+
+执行命令与原始输出：
+
+```text
+$ flutter test --no-pub test/playback/playback_thumbnail_service_test.dart test/playback/seek_progress_bar_test.dart test/home/home_preview_layout_test.dart
+00:01 +28: All tests passed!
+
+$ dart analyze lib test
+Analyzing lib, test...
+No issues found!
+
+$ flutter test --no-pub
+00:56 +606: All tests passed!
+```
+
+解读：bucket、24 帧 LRU、同 bucket 合流、过期请求丢弃、松手取消、
+120ms 预取防覆盖、异常/超时回落、首页与全屏预览卡片、封面占位和松手立即
+消失均通过；全量静态分析零告警，606 项测试全过。性能红线保持：主线程不做
+图片解码/取帧、原生并发 1、预览最大宽 240px、缓存最多 24 帧、不增依赖、
+不改后端。原生取帧真实画面与设备性能由 PM 真机验收。
+
+## 2026-10-22 雪碧图 VTT 拖动预览
+
+- 已从 `develop`（`89a94f8`）创建 `feature/sprite-scrub-preview`。
+- 计划文档：`docs/plans/2026-10-22-sprite-scrub-preview.md`。
+- 性能红线：拖动帧不发起网络/解码，只做 cue 二分与 sourceRect 绘制；
+  VTT 缓存 10 分钟且只解析一次；sprite ui.Image 最多 2 张；超过 2048px
+  按比例缩放；签名地址不进入持久化缓存。
+- 回退链：雪碧图 -> 现有本地原生取帧 -> 集封面。
+
+```text
+$ git status --short --branch
+## feature/sprite-scrub-preview
+
+$ git rev-parse --short HEAD
+89a94f8
+```
+
+解读：工作树从指定最新 develop 创建，开工前无未提交改动；主工作区现有
+`pubspec.lock` 未复制、未修改。
+
+### 实现结果
+
+- `Episode` / `PlayTicket` 增加 nullable `thumbnailsUrl`；票据写回和详情来源都保留，
+  本地下载只覆盖视频地址，不丢 VTT；签名地址未进入持久化缓存。
+- 新增 `SpriteThumbnailAxisService`：Dio VTT 拉取、10 分钟缓存、403 清缓存重试一次、
+  cue 解析与二分、sprite `ui.Image` LRU2、2048px 解码上限。
+- `PlayerPage` 在选中集就绪时预取当前及相邻 sprite；dispose 释放 VTT 与图片。
+- `ScrubPreviewCard` 优先用 `CustomPaint.drawImageRect` 绘制 `sourceRect`；
+  VTT 未就绪显示封面，轴为空/加载失败回退本地原生取帧，再失败保留封面。
+- 拖动帧只做缓存查询、二分、矩形裁剪与 drawImageRect，不发起网络或图片解码。
+
+执行命令与原始输出：
+
+```text
+$ flutter test --no-pub test/playback/sprite_thumbnail_axis_test.dart test/player/scrub_preview_card_test.dart
+00:00 +11: All tests passed!
+
+$ flutter test --no-pub test/playback/seek_progress_bar_test.dart test/home/home_preview_layout_test.dart test/player/player_fullscreen_test.dart
+00:10 +55: All tests passed!
+
+$ dart analyze lib test
+Analyzing lib, test...
+No issues found!
+
+$ flutter test --no-pub
+00:54 +617: All tests passed!
+```
+
+解读：VTT 时间/xywh/多 sprite、越界最近 cue、LRU2、403 重试、10 分钟 TTL、
+回退链、sprite 零本地取帧、无 URL 本地回退和最终封面兜底均通过；全量静态分析
+零告警，617 项测试全过。`pubspec.lock` 已还原，未启停服务，未操作真机。
+
+## 2026-10-22 Android Studio 调试 HTTP 日志
+
+- 分支：`feature/debug-http-logging`
+- 基线：`develop` / `origin/develop` = `dc4b602`
+- 计划：`docs/plans/2026-10-22-debug-http-logging.md`
+
+```text
+$ git status --short --branch
+## develop...origin/develop
+ M pubspec.lock
+
+$ git rev-parse HEAD
+dc4b60270dd38d594510b45bd7a3d50b7dcd2602
+```
+
+解读：基于最新 develop 创建功能分支；开工时 `pubspec.lock` 已有未提交改动，
+本次未修改、未暂存该文件。
+
+### 实现结果
+
+- 新增 `NetworkLogInterceptor`，默认 `debugPrint`，可注入
+  `void Function(String)` 作为单测日志收集器。
+- `enabled` 常量与 `kDebugMode` 同时为真才输出，release/profile 零 HTTP 日志。
+- 请求行包含完整 URL 与 query，同时输出耗时起点、脱敏请求头和格式化请求体。
+- Authorization 仅保留前 8 字符后加 `...`；X-Device-Id 原样输出；
+  其余请求头值统一 `***`。
+- ResponseType.bytes 响应统一 `utf8.decode(..., allowMalformed: true)`，
+  JSON 自动缩进；图片/音视频/字体/PDF/ZIP 等只输出 MIME 与字节数。
+- 请求体和响应体超过 3000 字符时截断并追加 `…(truncated)`。
+- 拦截链为 `AuthHeaderInterceptor → EnvelopeInterceptor → NetworkLogInterceptor`。
+  Envelope 在解包前暂存原始 bytes，末尾日志读取暂存值，因此仍能打印 Envelope
+  处理前的原始响应。
+- 异常路径输出 `[HTTP] ✗ DioException类型 耗时ms URL message`，并继续
+  `handler.next(err)`，不吞异常。
+
+代表性原始日志：
+
+```text
+[HTTP] → POST http://logging.test/app/logging?keyword=%E4%B8%AD%E6%96%87
+[HTTP] → 耗时起点：2026-10-22T12:12:25.377357
+[HTTP] → headers：{"Accept":"***","Authorization":"Bearer e...","X-Device-Id":"device-raw-001"}
+[HTTP] → body：{
+  "filter": "中文"
+}
+[HTTP] ← 200 12ms POST http://logging.test/app/logging?keyword=%E4%B8%AD%E6%96%87
+[HTTP] ← body：{
+  "code": 0,
+  "message": "ok",
+  "data": {
+    "title": "中文标题"
+  }
+}
+```
+
+### 门禁
+
+```text
+$ flutter test --no-pub test/core/data/remote/network_log_interceptor_test.dart
+00:00 +0: should_log_request_and_response_lines_with_elapsed_when_requested
+00:00 +1: should_truncate_long_body_when_log_exceeds_limit
+00:00 +2: should_log_plain_text_without_throwing_when_response_is_not_json
+00:00 +3: should_log_byte_count_only_when_response_is_image
+00:00 +4: should_log_dio_exception_type_and_message_when_request_fails
+00:00 +5: All tests passed!
+
+$ dart analyze lib test
+Analyzing lib, test...
+No issues found!
+
+$ flutter test --no-pub
+00:58 +622: All tests passed!
+```
+
+解读：请求/响应行与耗时、Authorization 脱敏、X-Device-Id 原样、bytes 中文
+UTF-8 解码、3000 字符截断、非 JSON、二进制字节数、DioException 类型与 message
+均通过；全量静态分析零告警，622 项测试全过。
+
+未新增依赖、未启停服务、未操作真机；`pubspec.lock` 既有改动未提交。
+
+## 2026-10-22 收藏与观看历史分页 UI
+
+- 分支：`feature/library-paging-ui`
+- 基线：`develop` / `origin/develop` = `63d3b0f`
+- 后端依赖：FruitServer `7b69493`（收藏/观看历史 PageResult 与展示字段）
+- 计划：`docs/plans/2026-10-22-library-paging-ui.md`
+
+### 实现
+
+- 新增通用 `PageResult<T>`；`LibraryApi.favorites` 与 `WatchApi.recent`
+  统一请求 `pageIndex/pageSize` 并返回 `PageResult`。
+- 收藏与观看仓储、Controller 增加首屏、刷新、loadMore、total、hasMore、
+  loadingMore 和 loadMoreError；请求代次避免旧刷新/旧分页覆盖新列表。
+- 收藏按 dramaId 去重，观看按 dramaId 去重；空页或 `loaded >= total` 停止请求。
+- 收藏页、观看历史页接入滚动触底加载、下拉刷新、通用分页 footer、总数展示。
+- 观看卡片优先展示分页接口的 `dramaTitle/dramaCover/episodeNumber`；
+  标题为空时显示本地化“第 N 集”，封面缺失时显示占位图标。
+- API 严格解析服务端 PageResult；旧 List 不做客户端全量包装，由后端部署新契约解决。
+- MineLogic 改用分页首屏 `list`，不再调用旧 limit 接口。
+
+### 门禁
+
+定向测试：
+
+```text
+$ flutter test --no-pub test/library/library_api_test.dart test/library/favorite_controller_test.dart test/library/favorites_page_test.dart test/watch/watch_api_test.dart test/watch/watch_records_controller_test.dart test/watch/watch_records_page_test.dart test/mine/mine_logic_test.dart
+00:03 +40: All tests passed!
+```
+
+完整门禁：
+
+```text
+$ dart analyze lib test
+Analyzing lib, test...
+No issues found!
+
+$ flutter test --no-pub
+00:56 +632: All tests passed!
+```
+
+解读：分页第一页、追加去重、无更多不重复请求、loadMore 失败重试、
+观看标题/集号/封面展示及空标题兜底均通过；全量静态分析零告警，632 项测试全过。
+
+未新增依赖、未启停服务、未操作真机；现有 `pubspec.lock` 改动未提交。
+
+### 范围修订：观看标题优先与按需详情
+
+- 分页协议、Repository 与 Controller 分页状态保持不变。
+- `_hydrate` 只对 `dramaTitle` 为空的记录补拉详情；后端已有标题时不再请求详情。
+- 有标题的记录点击播放时才调用 `detailForOpen` 按需加载详情，避免列表阶段 N+1。
+- 标题仍为空时使用本地化“第 N 集”，封面缺失继续显示占位。
+- 移除了旧 List 自动包装为 PageResult 的前端全量兜底，避免掩盖后端契约问题。
+
+真实后端分页取证（仅测试账号写入，不启停服务）：
+
+```text
+GET /app/watch/recent?pageIndex=1&pageSize=1
+{"shape":"list","length":2,"dramaIds":["1","5"]}
+GET /app/watch/recent?pageIndex=2&pageSize=1
+{"shape":"list","length":2,"dramaIds":["1","5"]}
+GET /app/favorites?pageIndex=1&pageSize=1
+{"shape":"list","length":2,"dramaIds":["1","5"]}
+GET /app/favorites?pageIndex=2&pageSize=1
+{"shape":"list","length":2,"dramaIds":["1","5"]}
+```
+
+解读：当前 8081 运行实例仍是旧包，返回 List 且忽略 pageIndex/pageSize；第 1/2 页
+均返回相同两条数据。客户端不做全量兜底；live smoke 检测到旧 List 后明确标记 skipped，
+等待后端新包部署后再执行分页真实联调。
+
+门禁：
+
+```text
+$ flutter test --no-pub test/integration/live_watch_flow_test.dart test/library/library_api_test.dart test/watch/watch_api_test.dart test/watch/watch_records_controller_test.dart test/watch/watch_records_page_test.dart
+00:02 +22 ~1: All tests passed!
+
+$ dart analyze lib test
+Analyzing lib, test...
+No issues found!
+
+$ flutter test --no-pub
+00:52 +630 ~1: All tests passed!
+```
+
+解读：有 dramaTitle 时不触发详情请求、点击时才加载详情、空标题兜底、
+第 2 页追加去重和 hasMore 行为均通过；全量分析零告警，630 项通过、1 项旧服务
+能力探测跳过。`pubspec.lock` 既有改动未提交。
+
+## 2026-10-22 收藏卡片简介
+
+- 分支：`feature/favorite-card-synopsis`
+- 基线：`develop` / `origin/develop` = `9093700`
+- 计划：`docs/plans/2026-10-22-favorite-card-synopsis.md`
+
+### 实现
+
+- `_FavoriteCard` 在标题/标签下方条件渲染 `drama.synopsis.trim()`。
+- 简介最多 2 行、`TextOverflow.ellipsis`，使用 `AppColors.muted`、12 号字和
+  `1.15` 行高，由 `Flexible` 占据剩余空间，保持封面与卡片原高度。
+- 简介为空或纯空白时不创建文本节点，继续使用原 Spacer，不占高度。
+- 未改接口、后端和收藏分页逻辑。
+
+### 门禁
+
+```text
+$ flutter test --no-pub test/library/favorites_page_test.dart
+00:01 +7: All tests passed!
+
+$ dart analyze lib test
+Analyzing lib, test...
+No issues found!
+
+$ flutter test --no-pub
+00:51 +631 ~1: All tests passed!
+```
+
+解读：有简介时文本最多 2 行并省略，空简介不渲染且卡片高度与正常卡片一致；
+全量静态分析零告警，631 项通过、1 项运行中旧后端能力探测跳过。
+`pubspec.lock` 既有改动未提交。
+
+## 2026-10-22 ReelShort 客户端深色视觉改造
+
+- 分支：`feature/dark-theme-client`
+- 基线：开发前已有约 43 个未提交视觉文件，本次在原改动上继续收敛，未推倒重来。
+- 计划：`docs/plans/2026-10-22-dark-theme-client.md`
+
+### 颜色与主题
+
+- `AppTheme.dark()` 成为默认且唯一主题，系统状态栏/导航栏图标统一浅色。
+- 色板统一为背景 `#0B1020`、卡片 `#151B2E`、浮层 `#1C2436`、
+  divider `#0FFFFFFF`、主色 `#FF6B2C`、辅助链接色 `#22D3EE`。
+- 主/次/禁用文字分别使用白色 92% / 64% / 38%。
+- 卡片/按钮/输入框/标签圆角统一为 12/10/10/6，卡片阴影关闭。
+- 页面和组件内的 `Colors.*`、`Color(0x...)` 已全部映射到 `AppColors`
+  语义 token；剩余原始色值只在 `app_colors.dart` 中定义。
+- 导航、玻璃面板、播放器遮罩、加载轨道、渐变、边框和阴影均改为深色语义。
+- 修正全局输入装饰 padding 导致账户性别下拉溢出，保持原布局宽度。
+
+### 验证命令与原始结果
+
+```text
+$ git checkout -- pubspec.lock
+$ git status --short --branch
+## feature/dark-theme-client
+
+$ rg -n -P "Color\(0x|(?<!App)Colors\." lib | rg -v '^lib/core/theme/'
+(no output)
+
+$ rg -n "SystemUiOverlayStyle\.dark" lib
+(no output)
+```
+
+解读：pubspec.lock 漂移已还原；页面/组件层不再直接写颜色，所有状态栏均使用浅色图标。
+
+```text
+$ dart analyze lib test
+Analyzing lib, test...
+No issues found!
+```
+
+```text
+$ flutter test --no-pub
+00:51 +644: All tests passed!
+```
+
+```text
+$ flutter build apk --debug
+Running Gradle task 'assembleDebug'...
+    2,058ms
+✓ Built build/app/outputs/flutter-apk/app-debug.apk
+```
+
+解读：静态分析零告警，644 项测试全部通过，debug APK 构建成功；测试与构建后再次确认
+`pubspec.lock` 无改动，未启停服务、未操作真机。
+
+## 2026-10-22 客户端底部导航改为首页/推荐/追剧/我的
+
+- 分支：`feature/client-bottom-nav-4tabs`
+- 基线：`develop` / `origin/develop` = `ec3cb8f`
+- 计划：`docs/plans/2026-10-22-client-bottom-nav-4tabs.md`
+- 实现提交：`91e869d feat(nav): 底部导航改为首页推荐追剧我的`
+
+### 问题
+
+根导航仍为首页/剧场/创作/我的，底栏选中态使用品牌橙。追剧若通过新路由打开，
+会叠加第二层底栏并产生返回栈，不符合参考图和单根导航交互。
+
+### 改动
+
+- 新增 `AppRootTab` 统一四个 tab 的顺序、key、图标和 l10n 标签。
+- `AppBottomNav` 改为纯黑底、白色选中、`#8A8A8E` 未选中，图标 24、文字 11，
+  保留 SafeArea 与轻震动。
+- 首页 `IndexedStack` 第三槽直接使用 `FavoritesContent`，不再 push 收藏路由。
+  追剧保留顶部标题区、隐藏返回按钮，只有一个根底栏，不创建嵌套 Scaffold。
+- `FavoritesPage` 保留独立 Scaffold 和返回行为，继续供“我的”入口使用。
+- 推荐、追剧、我的三个根页面统一调用 `HomeLogic.select` 切换，不进入返回栈。
+- 创作页保留，`mine-creator-center` 入口保留；创作不再出现在根底栏。
+- 中文使用“追剧”，英文使用 `Home / Recommend / Following / My`，
+  印尼语使用 `Beranda / Rekomendasi / Daftar Tonton / Saya`。
+- `FavoritesContent` 内置顶部 SafeArea，避免嵌入首页后被状态栏遮挡。
+
+### 门禁命令与原始输出
+
+```text
+$ dart analyze lib test
+Analyzing lib, test...
+No issues found!
+```
+
+```text
+$ flutter test --no-pub
+04:38 +644: All tests passed!
+```
+
+导航测试覆盖：四个 tab 数量与顺序、纯白/灰色状态、点击追剧进入
+`FavoritesContent`、仅一个 `AppBottomNav`、追剧内部无嵌套 Scaffold、
+`Navigator.canPop == false`、创作不再出现在底栏且我的入口保留。
+
+解读：静态分析零告警，644 项测试全部通过；追剧与首页/推荐/我的均在同一根页面
+内切换，无叠加导航或返回栈。`pubspec.lock` 未提交，未启动或停止服务，未操作真机。
+
+## 2026-10-22 根导航布局规格对齐
+
+- 分支：`feature/client-bottom-nav-layout`
+- 基线：`develop` / `origin/develop` = `667fdc5`
+- 实现提交：`81787dc style(nav): 对齐四 Tab 底栏布局规格`
+
+### 改动
+
+- 新增 `AppRootBottomNav` 作为首页、推荐、追剧、我的唯一根导航入口，
+  三个 Shell 页面不再各自拼装 item。
+- 四列使用 `Expanded` 等分，图标在上、文字在下，间距 4。
+- 内容高度 56，另由 `SafeArea` 增加底部安全区；图标 26、文字 11、
+  `letterSpacing = 0`，选中 `w600`、未选中 `w400`。
+- 背景纯黑，取消顶部边框；选中 `#FFFFFF`，未选中 `#8E8E93`。
+- 首页、推荐、书签、人像继续使用各自的选中实心/未选中描边图标。
+
+### 门禁命令与原始输出
+
+```text
+$ flutter analyze
+Analyzing reelshort-bottom-nav...
+No issues found! (ran in 5.2s)
+```
+
+```text
+$ flutter test
+04:43 +645: All tests passed!
+```
+
+解读：四等分、56 内容高度、安全区、26 图标、4 间距、精确色值和无分割线
+均有测试覆盖；645 项测试全部通过。`pubspec.lock` 未提交，未操作真机。
+
+## 2026-10-22 首页改为三列探索网格
+
+- 分支：`feature/home-grid-layout`
+- 基线：`develop` / `origin/develop` = `6dea9d4`
+- 实现提交：`dd96792 feat(home): 首页改为三列探索网格`
+
+### 布局与数据
+
+- 首页按参考图改为纯黑探索页：搜索框、皇冠、礼物入口、一级分类、
+  二级标签与三列封面网格。
+- `HomeFeedController` 继续使用 10 条游标分页；支持下拉刷新、触底加载、
+  空态与失败重试，没有全量拉取。
+- 一级固定项为精选/新剧/分类/榜单；古装/社群仅在 `/app/categories`
+  名称匹配时显示。新剧/分类/榜单复用现有页面。
+- 二级标签按分类与题材可用性显示，筛选按钮复用 `FilterPage`。
+- 卡片封面 5:6、圆角 8、间距 8；包含真实热剧/新剧/漫剧角标、
+  播放量、最多两行标题与最多两个题材标签。
+- `Drama` 增加 `dramaType` 和可选 `createdAt`；卡片未下发上架时间时
+  从 Snowflake id 解析，不使用假数据。
+- 原 `PlayerPage(homeMode: true)` 保留并迁至推荐 tab，播放器文件与测试未删除。
+- 首页顶部中性色、卡片与描边 token 已沉淀到 `AppColors/AppDimens`，
+  后续 P14 复用。
+
+### 门禁命令与原始输出
+
+```text
+$ flutter analyze
+Analyzing reelshort-bottom-nav...
+No issues found! (ran in 2.7s)
+```
+
+```text
+$ flutter test
+02:32 +651: All tests passed!
+```
+
+解读：三列网格、分类顺序、动态入口隐藏、角标、卡片信息、分页大小、
+下一页追加和卡片进入播放器均有测试覆盖。`home_view.dart` 为 478 行，
+其余新增组件均低于 500 行。`pubspec.lock` 未提交，未操作真机。
+
+## 2026-10-22 「我的」页视觉风格统一
+
+- 分支：`feature/mine-visual-style`
+- 基线：`develop` / `origin/develop` = `47bf645`
+- 实现提交：`83129ac feat(mine): 统一我的页深色视觉风格`
+
+### Token 与改动
+
+- 复用 P11 的 `appBackground/contentCard/contentSurface/contentBorder`，
+  新增 `textPrimary/mineCardRadius/mineRowHeight/minePageTitle/mineSectionTitle`。
+- 页面底色改为纯黑，移除「我的」页的旧深蓝渐变；页头白色标题 21/w700。
+- 头像、三宫格、金币卡、会员卡、菜单统一为深灰 16 圆角、1px 极淡描边，
+  无阴影、无渐变、无发光。
+- 主文字/昵称/金额使用 `#FFFFFF`，次级说明和 chevron 使用 `#8E8E93`。
+- 三宫格等宽，入口图标 24 线性；菜单行高 52、标题 15，分割线只存在行间。
+- 橙色仅保留在充值、加入 VIP 等主操作；头像与菜单图标不再使用粉色/橙色装饰。
+- 区块顺序、全部入口、跳转与交互逻辑保持不变。
+
+### 门禁命令与原始输出
+
+```text
+$ flutter analyze
+Analyzing reelshort-bottom-nav...
+No issues found!
+```
+
+```text
+$ flutter test
+00:56 +651: All tests passed!
+```
+
+解读：背景、卡片 token、圆角/描边、无渐变阴影、三宫格等宽、菜单 52 行高、
+入口保留和收藏页跳转均有测试覆盖。`pubspec.lock` 未提交，未操作真机。
+
+## 2026-10-22 推荐页沉浸流 / 剧单 / 全部短剧
+
+- 分支：`feature/recommend-section-feed`、`feature/recommend-tab-feed-correction`
+- 修正基线：`develop` / `origin/develop` = `af6b9bb`
+
+固定顶部三 tab 为推荐 / 剧单 / 全部短剧，右侧保留搜索。推荐 tab 直接内嵌
+`PlayerPage(homeMode: true, embedded: true)`，支持一屏一剧、上下滑切换、
+收藏/点赞/选集/简介/进度条等现有播放器能力；播放器内部频道标题条关闭，
+只保留视频与浮层。剧单 tab 包含本週爆款推薦、本週精選新劇、古裝神劇大賞
+三条横滑卡片，数据分别本地按播放量、上架时间和古装分类/题材排序过滤。
+全部短剧提供四行可用筛选 chips、三列首页同款卡片和 20 条触底分页；
+无后端字段的本地/地区/字幕/配音筛选项不展示。根底栏始终保留四个入口。
+
+```text
+$ flutter analyze
+Analyzing reelshort-recommend-correction...
+No issues found! (ran in 3.2s)
+
+$ flutter test
+01:03 +644: All tests passed!
+```
+
+解读：沉浸式推荐播放器、剧单三分区横滑、四行筛选、三列网格、tab 状态保留、
+搜索、卡片播放、播放器路由覆盖/恢复均有测试覆盖；所有生效文件低于 500 行。
+`pubspec.lock` 未提交，未操作真机。
+
+## 2026-10-22 追剧页三 tab 与双列网格
+
+- 分支：`feature/following-tabs-grid`
+- 基线：`develop` / `origin/develop` = `73380ee`
+
+### 页面与数据
+
+- 根导航追剧槽位改为内嵌 `FollowingPage`，不再 push 收藏路由，也不叠加
+  第二层底部导航。
+- 页面提供追剧 / 播放历史 / 预约三个子 tab，使用 `IndexedStack` 保留各自
+  滚动位置；切换 tab 会退出编辑态。
+- 追剧复用 `FavoriteController`，显示“第 N 集 / 共 M 集”，支持下拉刷新、
+  触底分页、加载/错误/无更多状态。
+- 播放历史复用 `WatchRecordsController`，优先使用分页接口的
+  `dramaTitle/dramaCover/episodeNumber`，仅在标题缺失时补取详情；卡片展示
+  已看集数与可用进度条，同样支持刷新和分页。
+- 双列网格使用共享卡片：3:4 封面、播放量胶囊、两行标题、副信息与编辑态
+  减号。删除前二次确认，最后一条移除后自动退出编辑态。
+- 预约没有独立分页数据源，本轮保留真实空态；未登录沿用 `AuthGatePanel`。
+
+### 门禁命令与原始输出
+
+```text
+$ flutter analyze
+Analyzing reelshort-bottom-nav...
+No issues found! (ran in 1.9s)
+```
+
+```text
+$ flutter test
+01:12 +643: All tests passed!
+```
+
+解读：三 tab、双列网格、后端历史元数据直出、编辑删除确认、最后一条自动
+退出编辑、未登录与空态均有测试覆盖；`following_page.dart` 低于 500 行。
+`pubspec.lock` 未提交，未操作真机。
+
+## 2026-10-22 「我的」页布局重排与迷你播放器
+
+- 分支：`feature/mine-layout-redesign`
+- 基线：`develop` / `origin/develop` = `5aa8170`
+- 实现提交：`cbc6d80 feat(mine): 重排我的页并新增迷你播放器`
+
+### 页面与入口
+
+- 用户区改为 56 圆形头像、20/w700 昵称与 13 灰色 UID；UID 支持复制，
+  未登录显示 Visitor 与登录按钮，已登录显示编辑按钮。
+- VIP 改为金色渐变通栏卡，品牌文案走 l10n，右侧开通按钮复用现有 VIP 页。
+- 删除收藏/历史/下载三宫格；单列菜单固定为钱包、离线缓存、播放历史、
+  观看偏好、联系客服、语言、设置，行高 56、图标 22、仅行间显示分割线。
+- 收藏由底部追剧 tab 承载；历史、下载、钱包、偏好、客服、语言、设置均
+  复用现有页面。我的作品、创作者中心与通知保留在登录后的编辑操作面板，
+  设置页中的通知入口继续可用。
+- 我的页 token 收敛到 `AppColors/AppDimens`：背景纯黑、卡片 `#16161A`、
+  16 圆角、极淡描边、金色渐变仅用于 VIP。
+- 左下角迷你播放器为 96x132，直接使用观看历史首条数据，展示封面、剧名和
+  集号；无记录或关闭后不占位，点击按记录集号进入全屏播放器。
+- 删除三宫格对应的 `localViewer/watchlist` 废弃 l10n key 与旧组件代码。
+
+### 门禁命令与原始输出
+
+```text
+$ flutter analyze
+Analyzing reelshort-mine-redesign...
+No issues found! (ran in 2.1s)
+```
+
+```text
+$ flutter test
+01:01 +647: All tests passed!
+```
+
+解读：用户区、UID、登录/编辑、VIP、7 项菜单顺序与跳转、旧入口可达性、
+迷你播放器显隐/关闭/开播及无数据不渲染均有测试覆盖。`mine_view.dart`
+与新增子组件均低于 500 行；`pubspec.lock` 未提交，未操作真机。
+
+## 2026-10-22 全局移除两侧悬浮元素
+
+- 分支：`feature/remove-floating-overlays`
+- 基线：`develop` / `origin/develop` = `5cead7c`
+
+### 改动
+
+- 保留首页顶部礼物入口的 `home-wallet-badge` 红色余额角标。
+- 删除「我的」页 `MineMiniPlayer` 文件、渲染分支及最近观看开播逻辑。
+- 删除仅为迷你播放器新增的 `mineMini*` 尺寸 token；没有新增专属 l10n key。
+- 首页、推荐、剧单、全部短剧和追剧页均不渲染两侧游戏/活动悬浮球、
+  悬浮关闭按钮或迷你播放器。
+- 卡片角标、播放量、标题、标签和顶部钱包红标保持不变。
+
+### 门禁命令与原始输出
+
+```text
+$ flutter analyze
+Analyzing reelshort-home-floating...
+No issues found! (ran in 2.5s)
+```
+
+```text
+$ flutter test
+01:32 +647: All tests passed!
+```
+
+解读：登录且钱包快照存在时钱包红标仍显示；首页四个 tab、推荐三个子 tab、
+追剧页和我的页均断言不存在两侧悬浮组件。`pubspec.lock` 未提交，
+未操作真机。
+
+## 2026-10-22 首页与短剧列表视觉字号对齐
+
+- 分支：`feature/visual-type-scale`
+- 基线：`develop` / `origin/develop` = `d03dcf1`
+
+### Token 与组件
+
+- 新增 `textTertiary = #9E9E9E`，以及搜索、页签、筛选 chip、分区标题、
+  卡片标题/播放量/标签/角标、封面比例和网格间距的公共 token。
+- 搜索框统一为高 40、圆角 8、placeholder 13；一级分类 16，选中
+  白字 w700，未选中 `#9E9E9E` w400；二级标签 13 并采用参考图选中/未选中
+  底色。
+- 三列首页网格与全部短剧网格统一左右边距 14、列间距 6、行间距 18；
+  封面 5:6、圆角 6。
+- 首页、剧单横滑、追剧双列卡片统一标题 15/w500/1.3、播放量 11 白字、
+  标签 11/高 18/左右 6，封面到标题 8、标题到标签 6。
+- 剧单分区标题 17/w700，副标题 11 `#8E8E93`，更多 12 `#8E8E93`；
+  分区间距保持 24。
+- 全部短剧筛选 chip 统一高 30、圆角 15、字号 13；我的页标题 17，
+  追剧顶部页签 16。
+
+### 门禁命令与原始输出
+
+```text
+$ flutter analyze
+Analyzing reelshort-visual-type...
+No issues found! (ran in 1.8s)
+```
+
+```text
+$ flutter test
+00:57 +648: All tests passed!
+```
+
+解读：首页搜索/页签/二级标签、三类卡片字体与标签、5:6 封面、网格间距、
+筛选 chip、我的标题和追剧双列 320 宽度适配均有测试覆盖。目标组件均低于
+500 行；`pubspec.lock` 未提交，未操作真机。
+
+## 2026-10-22 首页布局对齐修正
+
+- 一级分类未选 18/w400、选中 20/w700；二级 chips 间距 10、左右 8、15/w600，并以稳定 AnimatedContainer 切换。
+- 首页内容区改为横向 PageView：点击与滑动共用 PageController，各 tab 保留纵向滚动位置。
+- PageController 与各 tab ScrollController 改为字段直接初始化，修复热重载后的 LateInitializationError。
+- 四类卡片去底板/描边，封面统一 3:4、8 圆角、行距 10、封底标题间距 6；状态角标为右上角紧凑异形丝带。
+- 标题下方恢复左对齐题材文字，使用 `|` 分隔、灰色小字，与封面状态角标保持独立。
+- 首页搜索栏到一级、一级到二级、二级到网格间距为 8/8/10；非精选 tab 直接以 10 衔接网格。
+- 搜索框右侧皇冠与礼物使用 28 图片图标，缺图时回退原彩色 Icon；透明热区、间距和角标不变。
+- 皇冠/礼物 144×144 透明 PNG 已归档到 `assets/icon/`，组件路径与资源注册一致。
+- 两张图标已按统一 104/144 内容高重新归一化，28×28 渲染时视觉高度一致。
+- 第二轮素材按 100/144 内容高更新，入口改为 30×30、间距 6，礼物角标继续对齐右上角。
+- 播放量贴封面右下角（底 2、右 6），火焰图标 11 + 12/w400 纯文字，间距 4，并保留极淡底部渐变。
+- 修复二级 chip 运行时颜色误用 `const TextStyle` 的编译错误，并校正相关测试 Finder 类型。
+- 全部短剧的地区、字幕、配音筛选 UI 已占位；以下接口待补：地区、字幕/配音筛选数据。
+
+## 2026-10-22 短剧列表刷新体验优化
+
+- 公共下拉刷新统一为白指示器、40 displacement、Bouncing + AlwaysScrollable，并在下拉期间屏蔽内容点击与滚动条。
+- 首页移除父级 feed 监听，网格、剧单和全部短剧改为局部监听，刷新时保留旧数据及原滚动位置。
+- 剧单、全部短剧、追剧沿用相同刷新策略；首帧加载与刷新指示器分离。
+- 按当前流程未执行 analyze/test。
+
+## 2026-10-22 ChangeNotifier 监听生命周期排查
+
+- 全仓核对手动 add/remove；首页、推荐和追剧改为内容区单实例 ListenableBuilder，避免重复订阅。
+- 播放器进度监听改为具名回调，在切换、重建会话和 dispose 时解绑；评论输入弹窗补 controller 更换迁移。
+- `_onFeedChanged` 已无源码调用链，报错来源为热重载前注册的旧 tear-off；需完全关闭 App 后冷启动。
+- 按当前流程未执行 analyze/test。
+
+## 2026-10-22 二级标签筛选按钮右对齐
+
+- 三横线热区由 44 宽改为 26×26，消除 44 宽居中盒造成的视觉右边距偏移。
+- 标签滚动区与按钮间距改为 6，按钮右边缘固定对齐页面 14 边距。
+- 补充按钮尺寸与屏幕右边距断言；按当前流程未执行 analyze/test。
+
+## 2026-10-22 首页导航图标调整
+
+- `AppRootTab.home` 未选中改为 `theaters_outlined`，选中改为 `theaters`。
+- 其余三个根导航图标、26 尺寸及白/灰颜色规则保持不变；测试断言同步。
+- 按当前流程未执行 analyze/test。
+
+## 2026-10-22 首页圆形胶片盘图标
+
+- `AppRootTab` 新增可选 `assetPath`，首页使用 `assets/icon/film_reel.png`。
+- 共享导航通过 `ColorFiltered + Image.asset` 按选中态着色，尺寸保持 26，缺图回退胶片 Material 图标。
+- 推荐、追剧、我的图标不变；素材与测试断言同步，按当前流程未执行 analyze/test。
+
+## 2026-10-22 首页选中态实心摄影机
+
+- `AppRootTab` 新增 `selectedAssetPath`，首页选中使用 `film_reel_filled.png`，未选中使用描边版。
+- 共享导航保持 `ColorFiltered(srcIn)` 与 26×26，缺图按选中态回退实心/描边胶片图标。
+- 推荐、追剧、我的不变；测试断言同步，按当前流程未执行 analyze/test。
+
+## 2026-10-22 底部导航图标与文字加大
+
+- 公共 token 调整为图标 30、文字 13、图标文字间距 5、内容高度 62。
+- 图片首页图标同步使用 30×30；SafeArea 仍在内容区外独立追加，四等分布局不变。
+- 尺寸测试断言同步，按当前流程未执行 analyze/test。
+
+## 2026-10-22 推荐页沉浸式布局对齐
+
+- 推荐/剧单/全部短剧顶部改为视频内居中浮层，17 字号、无下划线，搜索固定右侧 14。
+- 右侧保留收藏/点赞/选集，白色 32 图标、28 间距；评论、分享入口已从该浮层移除。
+- 底部信息重构为标题、真实热度、剧名、题材/集数、可展开简介与渐变观看全集按钮。
+- 新增三语“观看全集”文案；按当前流程未执行 analyze/test。
+- 榜单行支持可选排名：有名次显示 `TOPn·热播榜`，无名次回退“热播榜”；热度值改用 `w` 格式。
+- 题材改为空格分隔，集数固定右侧单行；右侧操作栏改为距屏幕边缘 8，底部位置不变。
+
+## 2026-10-22 推荐页底部信息二次修正
+
+- 按最新反馈移除整行榜单与热度胶囊，信息顺序收敛为标题、剧名、标签、简介、观看全集。
+- 剧名 19/w600，箭头 20 白色并紧邻剧名；标签行改为 13/w600 亮灰内联布局。
+- 简介「展开/收起」沿用现有三语文案；进度条热区恢复 24 并接入拖动自动清屏与预览卡片。
+- 拖动仅控制视频浮层内容，顶部导航与根底栏保持常驻。
+- 进度条固定中心并动画到 6 高，命中高度 32，时间气泡限制在左右 12；end/cancel/pointer 兜底均恢复拖动前状态。
+- 修复 `scrubCancelRequest` 误置于 `initState` 的编译错误，并清理推荐页未使用变量；`flutter analyze` 无问题。
+- 观看全集按钮相对进度条上移 8，间距调整为 20；按钮改为屏幕宽度 70% 左对齐，`flutter analyze` 无问题。
+
+## 2026-10-22 进度条按下与拖动彻底修复
+
+- Slider 不再在 `onChangeStart` 清屏；首次真实移动后才进入 scrub，轨道 2/6、thumb 6/8。
+- 推荐流拖动使用独立 opaque 手势与 pointer 兜底，end/cancel 同时恢复浮层和轨道。
+- 推荐浮层改为 AnimatedOpacity + IgnorePointer，进度条节点始终留在树中；scrub setState 均加 mounted 守卫。
+- `flutter test test/player/seek_scrub_visibility_test.dart`：6 项测试全部通过。
+
+## 2026-10-22 推荐页播放跳转修正
+
+- 标题、剧名行和观看全集统一通过 `playDramaFromCatalog` 打开非 `homeMode` 逐集播放页。
+- 仅含集数的剧集标题不再显示在标题上方，集数只保留下方进度文案。
+- `flutter analyze`：No issues found。
+
+## 2026-10-22 推荐页横向切换
+
+- 推荐、剧单、全部短剧改为共享 PageController 的横向 PageView，点击与滑动均驱动同一选中态。
+- 三页使用 AutomaticKeepAliveClientMixin 保留视频、滚动位置和筛选状态；顶部导航固定在外层。
+- `flutter analyze`：No issues found。
+
+## 2026-10-22 全部短剧布局重排
+
+- 四行筛选统一 28 高、8 行距、24 项目间距；选中 chip 改为 `#4A1E1E`、白字 13/w600、圆角 14。
+- 最热/最新改为纯文字选中态，三横线筛选固定在右端；网格改为左右 12、列距 6、行距 12。
+- 第三行筛选完整展示，卡片继续复用首页组件；`flutter analyze`：No issues found。
+- 筛选项字号提升到 15、圆角 15；筛选区移出滚动容器并固定吸顶，下拉刷新仅作用于网格。
+- 四行首项文字统一到同一 x；行高 30、行距 6、项目距 12，第 4 行保持弹性空白后固定筛选图标。
+- 按最新截图改为 16sp、32 高、10 行距、16 项距；选中态为 `#21090E` 底配 `#FF4D6A` 粉字。
+- 第 4 行复用选中胶囊样式，右侧改为 44×44 圆形深灰按钮和 22 三横线图标；`flutter analyze` 无问题。
+- 筛选行距收紧到 6、项距 10，chip 左右 padding 12；四行均可横向回弹滑动。
+- 第 4 行仅最热/最新在滚动区内，44 圆形筛选按钮固定在滚动区外；`flutter analyze` 无问题。
+- 四行统一复用 `_filterRow` 构建，筛选区仅保留一层左右 12 padding。
+- 新增量化测试断言四行首项 x 均为 12、相邻 chip 间距均为 10；`flutter analyze` 无问题。
+- 修复横向 viewport 对短内容居中：滚动内容最小宽度撑满视口后由 Row.start 排列。
+- `flutter test test/recommend/all_dramas_filter_alignment_test.dart`：1 项测试通过。
+
+## 2026-10-22 首页二级标签移除筛选按钮
+
+- 首页二级标签行改为纯横向滑动，右侧三横线按钮不渲染也不占位。
+- 删除不再使用的筛选回调、尺寸 token、颜色和 CustomPainter；全部短剧页筛选按钮保持不变。
+- `flutter analyze`：No issues found。
+- 按后续更正恢复首页透明三横线按钮（26、无背景、`#7A7A7E`），删除全部短剧第 4 行圆形按钮及回调链路。
+
+## 2026-10-22 追剧页三列改造
+
+- 追剧页移除预约 tab，改为追剧/播放历史双页横向切换，并保留各自滚动位置。
+- 追剧与历史统一三列卡片，新增固定加号卡片，历史进度与编辑删除能力保留。
+- 按最新口径调整列距 6、行距 12、封面圆角 6；`flutter analyze`：No issues found。
+
+## 2026-10-22 播放历史单列列表
+
+- 追剧保持三列网格，播放历史改为左封面右信息的单列列表，行距 16。
+- 历史卡片补充 96×128 封面、观看进度、已看百分比、继续观看和编辑删除。
+- 追剧加号卡片移到全部追剧卡片之后，空列表时仍在左上角。
+- 加号改为 `#8E8E93`、28 尺寸、1.5 描边，卡片底色与圆角不变。
+- 刷新、分页与各页独立滚动位置保持；`flutter analyze`：No issues found。
+
+## 2026-10-22 追剧页切换与编辑按钮修正
+
+- 追剧与历史页增加 keep-alive，tab 与编辑态改用局部 ValueNotifier 更新，切换不再重建整个页面。
+- 编辑图标调整为 20、`#B0B0B0`，热区 40×40，保持右侧 14 边距和垂直居中。
+- 列表刷新期间保留已有数据与各页滚动位置；`flutter analyze`：No issues found。
+
+## 2026-10-22 播放历史继续观看按钮微调
+
+- 继续观看改为无边框、无底色的纯文字按钮，默认 `#B0B0B0`、12/w500，按压态使用品牌色。
+- 保持 28 高点击热区和右侧零间距；未执行测试或 analyze。
+
+## 2026-10-22 我的页渐变与图标网格
+
+- 页面背景改为暖黑三段纵向渐变，用户区与 VIP 卡布局保持不变。
+- 行式入口替换为 4 列图标网格，7 个原入口按顺序保留，第 8 格为空占位。
+- 网格使用 14 边距、半透明深灰底、圆角 12 和仅内部 1px 分隔线；`flutter analyze`：No issues found。
+- 渐变增强为 `#3A1B0E`/`#1A0C07`/黑色并叠加顶部品牌橙径向光晕，同时移除页面级「我的」标题栏。
+- 7 个宫格图标分别使用金币金、天蓝、薄荷绿、粉红、紫色、青色和冷灰；`flutter analyze`：No issues found。
+
+## 2026-10-22 我的页补充内容
+
+- VIP 与宫格之间新增继续观看横向列表、追剧/观看记录/金币统计面板，继续观看最多 10 条。
+- 宫格后新增常见问题与关于我们入口；关于页版本暂用与 pubspec 同步的常量占位。
+- 继续观看全部入口可切到追剧页播放历史 tab；`flutter analyze`：No issues found。
+- 用户区昵称与 UID 收紧为 4 间距，昵称列相对头像垂直居中；UID 12、复制图标 14。
+- UID 行改用 GestureDetector 并锁定 16 高，昵称与 UID 间距 2、昵称行高 1.15，避免 Material 热区撑高；`flutter analyze`：No issues found。
+
+## 2026-10-22 推荐剧单渐变背景
+
+- 仅为推荐页「剧单」子页增加暖黑三段渐变和品牌橙径向光晕，推荐视频与全部短剧背景不变。
+- 渐变复用「我的」页色值，光晕使用 `#26FF6B2C`；分区与卡片样式保持原样；`flutter analyze`：No issues found。
+
+## 2026-10-22 全站深色视觉统一
+
+- 全局 token 改为纯黑页面、`#16161A` 卡片、`#1C1C1E` 描边/分割线与 B0/8E 文本层级，旧深蓝页面渐变替换为暖黑渐变。
+- 普通二级页标题栏改为透明、白色标题与返回图标；统一卡片 12 圆角、1px 描边和无阴影策略。
+- 覆盖新剧、筛选、榜单、预约、收藏、观看历史、下载、设置、钱包、VIP、通知、详情、登录、关于；播放器沉浸区保持纯黑。
+- `flutter analyze`：No issues found。
+
+## 2026-10-22 统一下拉与加载指示器
+
+- 下拉刷新统一为 40×40、60% 黑底圆角指示器内嵌 20 白色加载圈，不再显示任何状态文字。
+- 网络分页与本地分页 footer 统一仅显示白色加载圈，无更多状态完全隐藏；通知页补触底自动加载。
+- 移除不再使用的刷新提示与无更多文案；`flutter analyze`：No issues found。
+
+## 2026-10-22 首页热播榜重做
+
+- 首页榜单 tab 改为独立领奖台 + 单列排行布局，不再复用三列网格。
+- 前三名按 2/1/3 排列，冠军放大并上移；第 4 名起使用大号描边名次与横向信息行。
+- 榜单沿用现有播放热度排序、分页和播放逻辑；`flutter analyze`：No issues found。
+
+## 2026-10-22 播放器双击点赞与飘心
+
+- 沉浸式播放器改用 onTapUp + 280ms Timer 判定双击，双击取消单击，长按左右倍速与中间更多保持不变。
+- 双击和右侧心形共用点赞方法，成功后控制器通知并点亮红色实心心形，失败由 controller 回滚并使用 Toast。
+- 飘心层使用独立 IgnorePointer Stack，动画完成后自动移除；`flutter analyze`：No issues found。
+- `flutter test test/player/double_tap_like_test.dart`：2 项测试全部通过。
+- 移除视频表面点击识别器，双击后增加 300ms 暂停防护；飘心收敛为 3~4 颗、20~26、±18、90~120dp、600~700ms。
+- 双击窗口延长至 320ms，单击 Timer 使用点击序号校验，双击后保留 350ms 播放切换保护。
+- `double_tap_like_test.dart` 覆盖 120/250/300ms 双击与 500ms 单击恢复：2 项测试全部通过。
+
+## 2026-10-22 统一二级搜索页
+
+- 首页与推荐/剧单/全部短剧搜索入口统一 push SearchPage，不再切换推荐 tab 聚焦。
+- 搜索页提供返回、自动聚焦输入框与取消，复用 `/app/search` 逻辑和首页三列卡片。
+- 清理旧的 searchRequest/focusSearch/syncSearch 参数；`flutter analyze`：No issues found。
+- 搜索页结果改为独立两列卡片，左右 14、列距 12、行距 16，并移除 HomeFeedCard 复用。
+- 搜索结果支持下拉刷新：保留旧结果按当前关键词重取第一页，空关键词直接回弹且不改变焦点。
+
+## 2026-10-22 App 图标与开屏更新
+
+- Launcher/Android 12 启动背景统一纯黑，自适应图标背景改为品牌橙。
+- Android/iOS 图标与启动资源已重新生成；应用内开屏固定 splash_logo，宽 200 等比居中。
+- `flutter analyze`：No issues found。
+- 移除 Flutter 内 `_startupSplash` 与 `startup-splash`，只保留系统原生开屏；最新斜体字标素材已重新生成。
diff --git a/ios/Runner/AppDelegate.swift b/ios/Runner/AppDelegate.swift
index 946f662..b52a229 100644
--- a/ios/Runner/AppDelegate.swift
+++ b/ios/Runner/AppDelegate.swift
@@ -1,5 +1,26 @@
 import Flutter
 import UIKit
+import AVFoundation
+
+private let thumbnailHTTPHeaderFieldsKey = "AVURLAssetHTTPHeaderFieldsKey"
+
+private final class ThumbnailResponseGate {
+  private let lock = NSLock()
+  private var completed = false
+
+  func send(_ result: @escaping FlutterResult, data: Data?) {
+    lock.lock()
+    if completed {
+      lock.unlock()
+      return
+    }
+    completed = true
+    lock.unlock()
+    DispatchQueue.main.async {
+      result(data)
+    }
+  }
+}
 
 /// Keeps the system LaunchScreen as the only splash. Flutter would otherwise
 /// instantiate that storyboard again and the icon appears a second time.
@@ -10,16 +31,22 @@ final class RunnerFlutterViewController: FlutterViewController {
 
   override func viewDidLoad() {
     super.viewDidLoad()
-    view.backgroundColor = UIColor(red: 16.0 / 255.0, green: 12.0 / 255.0, blue: 10.0 / 255.0, alpha: 1)
+    view.backgroundColor = .black
   }
 }
 
 @main
 @objc class AppDelegate: FlutterAppDelegate, FlutterImplicitEngineDelegate {
+  private let thumbnailQueue = DispatchQueue(
+    label: "com.stormg.lumadrama.thumbnail",
+    qos: .userInitiated
+  )
+
   override func application(
     _ application: UIApplication,
     didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
   ) -> Bool {
+    UIApplication.shared.isIdleTimerDisabled = true
     return super.application(application, didFinishLaunchingWithOptions: launchOptions)
   }
 
@@ -43,5 +70,66 @@ final class RunnerFlutterViewController: FlutterViewController {
       activity.completionWithItemsHandler = { _, _, _, _ in result(nil) }
       controller.present(activity, animated: true)
     }
+
+    let thumbnailChannel = FlutterMethodChannel(
+      name: "com.stormg.lumadrama/thumbnail",
+      binaryMessenger: engineBridge.applicationRegistrar.messenger()
+    )
+    thumbnailChannel.setMethodCallHandler { [weak self] call, result in
+      guard call.method == "frame" else {
+        result(FlutterMethodNotImplemented)
+        return
+      }
+      guard let self,
+            let arguments = call.arguments as? [String: Any],
+            let timeNumber = arguments["timeMs"] as? NSNumber else {
+        result(nil)
+        return
+      }
+      let localPath = arguments["localPath"] as? String ?? ""
+      let remoteUrl = arguments["url"] as? String ?? ""
+      let headers = arguments["headers"] as? [String: String] ?? [:]
+      let assetUrl: URL?
+      if !localPath.isEmpty {
+        assetUrl = localPath.hasPrefix("file:")
+          ? URL(string: localPath)
+          : URL(fileURLWithPath: localPath)
+      } else if !remoteUrl.isEmpty {
+        assetUrl = URL(string: remoteUrl)
+      } else {
+        assetUrl = nil
+      }
+      guard let assetUrl else {
+        result(nil)
+        return
+      }
+
+      let options: [String: Any]? = headers.isEmpty
+        ? nil
+        : [thumbnailHTTPHeaderFieldsKey: headers]
+      let asset = AVURLAsset(url: assetUrl, options: options)
+      let generator = AVAssetImageGenerator(asset: asset)
+      generator.appliesPreferredTrackTransform = true
+      generator.maximumSize = CGSize(width: 240, height: 426)
+      generator.requestedTimeToleranceBefore = CMTime(seconds: 0.5, preferredTimescale: 600)
+      generator.requestedTimeToleranceAfter = CMTime(seconds: 0.5, preferredTimescale: 600)
+      let time = CMTime(value: timeNumber.int64Value, timescale: 1000)
+      let gate = ThumbnailResponseGate()
+
+      self.thumbnailQueue.async {
+        do {
+          let image = try generator.copyCGImage(at: time, actualTime: nil)
+          let data = UIImage(cgImage: image).jpegData(compressionQuality: 0.7)
+          gate.send(result, data: data)
+        } catch {
+          gate.send(result, data: nil)
+        }
+      }
+      DispatchQueue.global(qos: .userInitiated).asyncAfter(
+        deadline: .now() + 1.5
+      ) {
+        gate.send(result, data: nil)
+      }
+    }
   }
 }
diff --git a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-1024x1024@1x.png b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-1024x1024@1x.png
index 81a691d..87d05f2 100644
Binary files a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-1024x1024@1x.png and b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-1024x1024@1x.png differ
diff --git a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@1x.png b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@1x.png
index 5da074f..296003d 100644
Binary files a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@1x.png and b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@1x.png differ
diff --git a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@2x.png b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@2x.png
index 89cfe2a..1241f35 100644
Binary files a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@2x.png and b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@2x.png differ
diff --git a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@3x.png b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@3x.png
index ac5eea4..2b8618a 100644
Binary files a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@3x.png and b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@3x.png differ
diff --git a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@1x.png b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@1x.png
index a666b0c..ba38cbd 100644
Binary files a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@1x.png and b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@1x.png differ
diff --git a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@2x.png b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@2x.png
index 9d3fc09..7a90754 100644
Binary files a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@2x.png and b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@2x.png differ
diff --git a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@3x.png b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@3x.png
index cd81ebf..61d882e 100644
Binary files a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@3x.png and b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@3x.png differ
diff --git a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@1x.png b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@1x.png
index 89cfe2a..1241f35 100644
Binary files a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@1x.png and b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@1x.png differ
diff --git a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@2x.png b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@2x.png
index 031ef02..b02f167 100644
Binary files a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@2x.png and b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@2x.png differ
diff --git a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@3x.png b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@3x.png
index ce668c9..76ab930 100644
Binary files a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@3x.png and b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@3x.png differ
diff --git a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-50x50@1x.png b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-50x50@1x.png
index e760346..199a854 100644
Binary files a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-50x50@1x.png and b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-50x50@1x.png differ
diff --git a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-50x50@2x.png b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-50x50@2x.png
index b36c904..690d252 100644
Binary files a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-50x50@2x.png and b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-50x50@2x.png differ
diff --git a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-57x57@1x.png b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-57x57@1x.png
index 659655f..969d939 100644
Binary files a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-57x57@1x.png and b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-57x57@1x.png differ
diff --git a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-57x57@2x.png b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-57x57@2x.png
index 527c293..a5002c6 100644
Binary files a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-57x57@2x.png and b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-57x57@2x.png differ
diff --git a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-60x60@2x.png b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-60x60@2x.png
index ce668c9..76ab930 100644
Binary files a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-60x60@2x.png and b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-60x60@2x.png differ
diff --git a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-60x60@3x.png b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-60x60@3x.png
index c045d99..c2abc8a 100644
Binary files a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-60x60@3x.png and b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-60x60@3x.png differ
diff --git a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-72x72@1x.png b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-72x72@1x.png
index 290ea44..81ea1a3 100644
Binary files a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-72x72@1x.png and b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-72x72@1x.png differ
diff --git a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-72x72@2x.png b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-72x72@2x.png
index 9006a76..ded1644 100644
Binary files a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-72x72@2x.png and b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-72x72@2x.png differ
diff --git a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-76x76@1x.png b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-76x76@1x.png
index f91d348..206fb8a 100644
Binary files a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-76x76@1x.png and b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-76x76@1x.png differ
diff --git a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-76x76@2x.png b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-76x76@2x.png
index d518bef..d7d0f9d 100644
Binary files a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-76x76@2x.png and b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-76x76@2x.png differ
diff --git a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-83.5x83.5@2x.png b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-83.5x83.5@2x.png
index 6628d81..08c611f 100644
Binary files a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-83.5x83.5@2x.png and b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-83.5x83.5@2x.png differ
diff --git a/ios/Runner/Assets.xcassets/LaunchBackground.imageset/background.png b/ios/Runner/Assets.xcassets/LaunchBackground.imageset/background.png
index 3f0a992..e815fd6 100644
Binary files a/ios/Runner/Assets.xcassets/LaunchBackground.imageset/background.png and b/ios/Runner/Assets.xcassets/LaunchBackground.imageset/background.png differ
diff --git a/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage.png b/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage.png
index b2ebfd8..585c9dc 100644
Binary files a/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage.png and b/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage.png differ
diff --git a/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage@2x.png b/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage@2x.png
index b01e86c..be988a2 100644
Binary files a/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage@2x.png and b/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage@2x.png differ
diff --git a/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage@3x.png b/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage@3x.png
index 5143af8..5cd8237 100644
Binary files a/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage@3x.png and b/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage@3x.png differ
diff --git a/ios/Runner/Base.lproj/LaunchScreen.storyboard b/ios/Runner/Base.lproj/LaunchScreen.storyboard
index 5a37630..403d1a7 100644
--- a/ios/Runner/Base.lproj/LaunchScreen.storyboard
+++ b/ios/Runner/Base.lproj/LaunchScreen.storyboard
@@ -16,18 +16,13 @@
                     <view key="view" contentMode="scaleToFill" id="Ze5-6b-2t3">
                         <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                         <subviews>
-                            <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleToFill" image="LaunchBackground" translatesAutoresizingMaskIntoConstraints="NO" id="tWc-Dq-wcI"/>
-                            <imageView opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" image="LaunchImage" translatesAutoresizingMaskIntoConstraints="NO" id="YRO-k0-Ey4"></imageView>
+                            <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" image="LaunchImage" translatesAutoresizingMaskIntoConstraints="NO" id="YRO-k0-Ey4"/>
                         </subviews>
-                        <color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+                        <color key="backgroundColor" red="0" green="0" blue="0" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                         <constraints>
                             <constraint firstItem="YRO-k0-Ey4" firstAttribute="leading" secondItem="Ze5-6b-2t3" secondAttribute="leading" id="3T2-ad-Qdv"/>
-                            <constraint firstItem="tWc-Dq-wcI" firstAttribute="bottom" secondItem="Ze5-6b-2t3" secondAttribute="bottom" id="RPx-PI-7Xg"/>
-                            <constraint firstItem="tWc-Dq-wcI" firstAttribute="top" secondItem="Ze5-6b-2t3" secondAttribute="top" id="SdS-ul-q2q"/>
-                            <constraint firstAttribute="trailing" secondItem="tWc-Dq-wcI" secondAttribute="trailing" id="Swv-Gf-Rwn"/>
                             <constraint firstAttribute="trailing" secondItem="YRO-k0-Ey4" secondAttribute="trailing" id="TQA-XW-tRk"/>
                             <constraint firstItem="YRO-k0-Ey4" firstAttribute="bottom" secondItem="Ze5-6b-2t3" secondAttribute="bottom" id="duK-uY-Gun"/>
-                            <constraint firstItem="tWc-Dq-wcI" firstAttribute="leading" secondItem="Ze5-6b-2t3" secondAttribute="leading" id="kV7-tw-vXt"/>
                             <constraint firstItem="YRO-k0-Ey4" firstAttribute="top" secondItem="Ze5-6b-2t3" secondAttribute="top" id="xPn-NY-SIU"/>
                         </constraints>
                     </view>
@@ -38,7 +33,6 @@
         </scene>
     </scenes>
     <resources>
-        <image name="LaunchImage" width="1152" height="1152"/>
-        <image name="LaunchBackground" width="1" height="1"/>
+        <image name="LaunchImage" width="390" height="844"/>
     </resources>
 </document>
diff --git a/ios/Runner/Info.plist b/ios/Runner/Info.plist
index 2c7c7c4..80b4716 100644
--- a/ios/Runner/Info.plist
+++ b/ios/Runner/Info.plist
@@ -1,109 +1,111 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
 <plist version="1.0">
-<dict>
-	<key>CADisableMinimumFrameDurationOnPhone</key>
-	<true/>
-	<key>CFBundleDevelopmentRegion</key>
-	<string>$(DEVELOPMENT_LANGUAGE)</string>
-	<key>CFBundleDisplayName</key>
-	<string>FruitShorts</string>
-	<key>CFBundleExecutable</key>
-	<string>$(EXECUTABLE_NAME)</string>
-	<key>CFBundleIdentifier</key>
-	<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
-	<key>CFBundleInfoDictionaryVersion</key>
-	<string>6.0</string>
-	<key>CFBundleName</key>
-	<string>FruitShorts</string>
-	<key>CFBundlePackageType</key>
-	<string>APPL</string>
-	<key>CFBundleShortVersionString</key>
-	<string>$(FLUTTER_BUILD_NAME)</string>
-	<key>CFBundleSignature</key>
-	<string>????</string>
-	<key>CFBundleVersion</key>
-	<string>$(FLUTTER_BUILD_NUMBER)</string>
-	<key>LSRequiresIPhoneOS</key>
-	<true/>
-	<key>NSAppTransportSecurity</key>
 	<dict>
-		<key>NSAllowsArbitraryLoads</key>
+		<key>CADisableMinimumFrameDurationOnPhone</key>
 		<true/>
-		<key>NSAllowsLocalNetworking</key>
+		<key>CFBundleDevelopmentRegion</key>
+		<string>$(DEVELOPMENT_LANGUAGE)</string>
+		<key>CFBundleDisplayName</key>
+		<string>FruitShorts</string>
+		<key>CFBundleExecutable</key>
+		<string>$(EXECUTABLE_NAME)</string>
+		<key>CFBundleIdentifier</key>
+		<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
+		<key>CFBundleInfoDictionaryVersion</key>
+		<string>6.0</string>
+		<key>CFBundleName</key>
+		<string>FruitShorts</string>
+		<key>CFBundlePackageType</key>
+		<string>APPL</string>
+		<key>CFBundleShortVersionString</key>
+		<string>$(FLUTTER_BUILD_NAME)</string>
+		<key>CFBundleSignature</key>
+		<string>????</string>
+		<key>CFBundleVersion</key>
+		<string>$(FLUTTER_BUILD_NUMBER)</string>
+		<key>LSRequiresIPhoneOS</key>
 		<true/>
-		<key>NSExceptionDomains</key>
+		<key>NSAppTransportSecurity</key>
 		<dict>
-			<key>127.0.0.1</key>
+			<key>NSAllowsArbitraryLoads</key>
+			<true/>
+			<key>NSAllowsLocalNetworking</key>
+			<true/>
+			<key>NSExceptionDomains</key>
 			<dict>
-				<key>NSExceptionAllowsInsecureHTTPLoads</key>
-				<true/>
-				<key>NSIncludesSubdomains</key>
-				<true/>
-			</dict>
-			<key>localhost</key>
-			<dict>
-				<key>NSExceptionAllowsInsecureHTTPLoads</key>
-				<true/>
-				<key>NSIncludesSubdomains</key>
-				<true/>
-			</dict>
-			<key>192.168.31.187</key>
-			<dict>
-				<key>NSExceptionAllowsInsecureHTTPLoads</key>
-				<true/>
-				<key>NSIncludesSubdomains</key>
-				<true/>
-			</dict>
-			<key>39.162.50.99</key>
-			<dict>
-				<key>NSExceptionAllowsInsecureHTTPLoads</key>
-				<true/>
-				<key>NSIncludesSubdomains</key>
-				<true/>
-			</dict>
-		</dict>
-	</dict>
-	<key>NSLocalNetworkUsageDescription</key>
-	<string>开发阶段需要访问同一局域网内的短剧内容服务。</string>
-	<key>UIApplicationSceneManifest</key>
-	<dict>
-		<key>UIApplicationSupportsMultipleScenes</key>
-		<false/>
-		<key>UISceneConfigurations</key>
-		<dict>
-			<key>UIWindowSceneSessionRoleApplication</key>
-			<array>
+				<key>127.0.0.1</key>
 				<dict>
-					<key>UISceneClassName</key>
-					<string>UIWindowScene</string>
-					<key>UISceneConfigurationName</key>
-					<string>flutter</string>
-					<key>UISceneDelegateClassName</key>
-					<string>$(PRODUCT_MODULE_NAME).SceneDelegate</string>
-					<key>UISceneStoryboardFile</key>
-					<string>Main</string>
+					<key>NSExceptionAllowsInsecureHTTPLoads</key>
+					<true/>
+					<key>NSIncludesSubdomains</key>
+					<true/>
 				</dict>
-			</array>
+				<key>localhost</key>
+				<dict>
+					<key>NSExceptionAllowsInsecureHTTPLoads</key>
+					<true/>
+					<key>NSIncludesSubdomains</key>
+					<true/>
+				</dict>
+				<key>10.43.47.1</key>
+				<dict>
+					<key>NSExceptionAllowsInsecureHTTPLoads</key>
+					<true/>
+					<key>NSIncludesSubdomains</key>
+					<true/>
+				</dict>
+				<key>39.162.50.99</key>
+				<dict>
+					<key>NSExceptionAllowsInsecureHTTPLoads</key>
+					<true/>
+					<key>NSIncludesSubdomains</key>
+					<true/>
+				</dict>
+			</dict>
 		</dict>
+		<key>NSLocalNetworkUsageDescription</key>
+		<string>开发阶段需要访问同一局域网内的短剧内容服务。</string>
+		<key>UIApplicationSceneManifest</key>
+		<dict>
+			<key>UIApplicationSupportsMultipleScenes</key>
+			<false/>
+			<key>UISceneConfigurations</key>
+			<dict>
+				<key>UIWindowSceneSessionRoleApplication</key>
+				<array>
+					<dict>
+						<key>UISceneClassName</key>
+						<string>UIWindowScene</string>
+						<key>UISceneConfigurationName</key>
+						<string>flutter</string>
+						<key>UISceneDelegateClassName</key>
+						<string>$(PRODUCT_MODULE_NAME).SceneDelegate</string>
+						<key>UISceneStoryboardFile</key>
+						<string>Main</string>
+					</dict>
+				</array>
+			</dict>
+		</dict>
+		<key>UIApplicationSupportsIndirectInputEvents</key>
+		<true/>
+		<key>UILaunchStoryboardName</key>
+		<string>LaunchScreen</string>
+		<key>UIMainStoryboardFile</key>
+		<string>Main</string>
+		<key>UISupportedInterfaceOrientations</key>
+		<array>
+			<string>UIInterfaceOrientationPortrait</string>
+			<string>UIInterfaceOrientationLandscapeLeft</string>
+			<string>UIInterfaceOrientationLandscapeRight</string>
+		</array>
+		<key>UISupportedInterfaceOrientations~ipad</key>
+		<array>
+			<string>UIInterfaceOrientationPortrait</string>
+			<string>UIInterfaceOrientationLandscapeLeft</string>
+			<string>UIInterfaceOrientationLandscapeRight</string>
+		</array>
+		<key>UIStatusBarHidden</key>
+		<false/>
 	</dict>
-	<key>UIApplicationSupportsIndirectInputEvents</key>
-	<true/>
-	<key>UILaunchStoryboardName</key>
-	<string>LaunchScreen</string>
-	<key>UIMainStoryboardFile</key>
-	<string>Main</string>
-	<key>UISupportedInterfaceOrientations</key>
-	<array>
-		<string>UIInterfaceOrientationPortrait</string>
-		<string>UIInterfaceOrientationLandscapeLeft</string>
-		<string>UIInterfaceOrientationLandscapeRight</string>
-	</array>
-	<key>UISupportedInterfaceOrientations~ipad</key>
-	<array>
-		<string>UIInterfaceOrientationPortrait</string>
-		<string>UIInterfaceOrientationLandscapeLeft</string>
-		<string>UIInterfaceOrientationLandscapeRight</string>
-	</array>
-</dict>
 </plist>
diff --git a/lib/app.dart b/lib/app.dart
index 3a6393f..75019d6 100644
--- a/lib/app.dart
+++ b/lib/app.dart
@@ -42,6 +42,7 @@ import 'core/data/services/favorite_controller.dart';
 import 'core/data/services/interaction_controller.dart';
 import 'core/data/services/locale_controller.dart';
 import 'core/data/services/event_tracker.dart';
+import 'core/data/services/playback_position_cache.dart';
 import 'core/data/services/playback_session.dart';
 import 'core/data/services/video_player_port.dart';
 import 'core/data/services/wallet_controller.dart';
@@ -52,13 +53,15 @@ import 'core/theme/app_colors.dart';
 import 'l10n/app_localizations.dart';
 import 'pages/home/home_view.dart';
 
-/// 全局系统栏样式：浅暖导航栏、关闭 Android 对比遮罩。
-final SystemUiOverlayStyle appSystemOverlayStyle = SystemUiOverlayStyle.dark
+/// 全局系统栏样式：深色底 + 浅色图标，关闭 Android 对比遮罩。
+final SystemUiOverlayStyle appSystemOverlayStyle = SystemUiOverlayStyle.light
     .copyWith(
-      statusBarColor: Colors.transparent,
+      statusBarColor: AppColors.transparent,
+      statusBarIconBrightness: Brightness.light,
+      statusBarBrightness: Brightness.dark,
       systemNavigationBarColor: AppColors.ink,
-      systemNavigationBarDividerColor: Colors.transparent,
-      systemNavigationBarIconBrightness: Brightness.dark,
+      systemNavigationBarDividerColor: AppColors.transparent,
+      systemNavigationBarIconBrightness: Brightness.light,
       systemNavigationBarContrastEnforced: false,
     );
 
@@ -72,6 +75,7 @@ class LumaDramaApp extends StatefulWidget {
     this.watchHistoryRepository,
     this.favoriteRepository,
     this.playbackRepository,
+    this.playbackPositionCache,
     this.commentRepository,
     this.interactionRepository,
     this.noticeRepository,
@@ -91,6 +95,7 @@ class LumaDramaApp extends StatefulWidget {
   final WatchHistoryRepository? watchHistoryRepository;
   final FavoriteRepository? favoriteRepository;
   final PlaybackRepository? playbackRepository;
+  final PlaybackPositionCache? playbackPositionCache;
   final CommentRepository? commentRepository;
   final InteractionRepository? interactionRepository;
   final NoticeRepository? noticeRepository;
@@ -146,6 +151,9 @@ class _LumaDramaAppState extends State<LumaDramaApp> {
       widget.playbackRepository ??
       HttpPlaybackRepository(PlaybackApi(_apiClient));
 
+  late final PlaybackPositionCache _playbackPositionCache =
+      widget.playbackPositionCache ?? PlaybackPositionCache();
+
   late final FavoriteController _favoriteController = FavoriteController(
     _favorites,
   );
@@ -240,6 +248,7 @@ class _LumaDramaAppState extends State<LumaDramaApp> {
         Provider<PlayerFactory>(create: (_) => widget.playerFactory),
         Provider<CatalogRepository>.value(value: _catalogRepository),
         Provider<PlaybackRepository>.value(value: _playback),
+        Provider<PlaybackPositionCache>.value(value: _playbackPositionCache),
         Provider<WatchHistoryRepository>.value(value: _watchHistory),
         Provider<FavoriteRepository>.value(value: _favorites),
         Provider<CommentRepository>.value(value: _commentRepository),
@@ -273,9 +282,9 @@ class _LumaDramaAppState extends State<LumaDramaApp> {
           localeResolutionCallback: (deviceLocale, _) =>
               resolveAppLocale(deviceLocale),
           debugShowCheckedModeBanner: false,
-          themeMode: ThemeMode.light,
-          theme: AppTheme.light(),
-          darkTheme: AppTheme.light(),
+          themeMode: ThemeMode.dark,
+          theme: AppTheme.dark(),
+          darkTheme: AppTheme.dark(),
           builder: (context, child) => AnnotatedRegion<SystemUiOverlayStyle>(
             value: appSystemOverlayStyle,
             child: child ?? const SizedBox.shrink(),
diff --git a/lib/core/config/app_config.dart b/lib/core/config/app_config.dart
index 145f41c..d9ed463 100644
--- a/lib/core/config/app_config.dart
+++ b/lib/core/config/app_config.dart
@@ -14,7 +14,7 @@ class AppConfig {
   /// 开发调试默认服务地址，当前指向本机局域网 IP。
   ///
   /// 换网络时只改这一行，地址不要带结尾斜杠。
-  static const String devHostBaseUrl = 'http://192.168.31.187:8081';
+  static const String devHostBaseUrl = 'http://10.43.47.1:8081';
 
   /// 本机后端地址：通过 `adb reverse tcp:8081 tcp:8081` 映射到开发机，
   /// 探测可达时 App 直连本机服务；不可达时回落到公网地址。
diff --git a/lib/core/data/models/drama.dart b/lib/core/data/models/drama.dart
index a2f024f..4f889ae 100644
--- a/lib/core/data/models/drama.dart
+++ b/lib/core/data/models/drama.dart
@@ -17,6 +17,7 @@ class Episode {
     this.locked = false,
     this.likeCount,
     this.commentCount,
+    this.thumbnailsUrl,
   });
 
   final String id;
@@ -32,19 +33,25 @@ class Episode {
   final bool locked;
   final int? likeCount;
   final int? commentCount;
+  final String? thumbnailsUrl;
 
-  Episode withVideoUrl(String url, {int? likeCount, int? commentCount}) =>
-      Episode(
-        id: id,
-        number: number,
-        title: title,
-        isFree: isFree,
-        videoUrl: url,
-        durationSec: durationSec,
-        locked: locked,
-        likeCount: likeCount ?? this.likeCount,
-        commentCount: commentCount ?? this.commentCount,
-      );
+  Episode withVideoUrl(
+    String url, {
+    int? likeCount,
+    int? commentCount,
+    String? thumbnailsUrl,
+  }) => Episode(
+    id: id,
+    number: number,
+    title: title,
+    isFree: isFree,
+    videoUrl: url,
+    durationSec: durationSec,
+    locked: locked,
+    likeCount: likeCount ?? this.likeCount,
+    commentCount: commentCount ?? this.commentCount,
+    thumbnailsUrl: thumbnailsUrl ?? this.thumbnailsUrl,
+  );
 
   factory Episode.fromJson(Map<String, dynamic> json) {
     return Episode(
@@ -57,6 +64,7 @@ class Episode {
       videoUrl: json['playUrl'] as String? ?? '',
       likeCount: _optionalInt(json['likeCount']),
       commentCount: _optionalInt(json['commentCount']),
+      thumbnailsUrl: _optionalString(json['thumbnailsUrl']),
     );
   }
 }
@@ -78,6 +86,8 @@ class Drama {
     this.favoriteCount,
     this.commentCount,
     this.language = '',
+    this.dramaType = '',
+    this.createdAt,
     this.detailLoaded = false,
   });
 
@@ -101,6 +111,12 @@ class Drama {
   /// 卡片语种（如 zh-CN / id），用于剧场语言筛选。
   final String language;
 
+  /// 内容类型：ANIME 漫剧，LIVE 真人剧。
+  final String dramaType;
+
+  /// 上架时间；卡片接口未直接下发时可由 Snowflake id 估算。
+  final DateTime? createdAt;
+
   /// 详情接口是否已经取过完整剧集列表。
   /// 列表卡片只带一集可播预览，需要完整剧集时再进详情。
   final bool detailLoaded;
@@ -129,6 +145,8 @@ class Drama {
       favoriteCount: _optionalInt(json['favoriteCount']),
       commentCount: _optionalInt(json['commentCount']),
       language: json['language'] as String? ?? '',
+      dramaType: json['dramaType'] as String? ?? '',
+      createdAt: DateTime.tryParse(json['createdAt']?.toString() ?? ''),
     );
   }
 
@@ -149,6 +167,8 @@ class Drama {
       favoriteCount: _optionalInt(json['favoriteCount']),
       commentCount: _optionalInt(json['commentCount']),
       language: json['language'] as String? ?? '',
+      dramaType: json['dramaType'] as String? ?? '',
+      createdAt: DateTime.tryParse(json['createdAt']?.toString() ?? ''),
       detailLoaded: true,
       episodes: (json['episodes'] as List? ?? const [])
           .whereType<Map<String, dynamic>>()
@@ -159,3 +179,8 @@ class Drama {
 }
 
 int? _optionalInt(dynamic value) => value == null ? null : jsonToInt(value);
+
+String? _optionalString(dynamic value) {
+  final text = value is String ? value.trim() : '';
+  return text.isEmpty ? null : text;
+}
diff --git a/lib/core/data/models/page_result.dart b/lib/core/data/models/page_result.dart
new file mode 100644
index 0000000..16c446f
--- /dev/null
+++ b/lib/core/data/models/page_result.dart
@@ -0,0 +1,47 @@
+// Author: fruit.com.cn
+
+import 'json_numbers.dart';
+
+/// 服务端标准分页响应 `{total, list}`。
+///
+/// 兼容旧版「data 直接是数组」的响应：按数组长度作为 total，避免列表空白。
+class PageResult<T> {
+  const PageResult({this.total = 0, this.list = const []});
+
+  final int total;
+  final List<T> list;
+
+  /// 解析分页壳，条目由调用方提供具体解析函数。
+  factory PageResult.fromJson(
+    Map<String, dynamic> json,
+    T Function(Map<String, dynamic>) parseItem,
+  ) {
+    final items = _parseItemMaps(json['list']).map(parseItem).toList(
+      growable: false,
+    );
+    return PageResult(total: jsonToInt(json['total']), list: items);
+  }
+
+  /// 兼容分页 Map 与旧版纯 List；其它类型视为空页。
+  factory PageResult.parse(
+    Object? data,
+    T Function(Map<String, dynamic>) parseItem,
+  ) {
+    if (data is Map) {
+      return PageResult.fromJson(Map<String, dynamic>.from(data), parseItem);
+    }
+    if (data is List) {
+      final items = _parseItemMaps(data).map(parseItem).toList(growable: false);
+      return PageResult(total: items.length, list: items);
+    }
+    return PageResult<T>();
+  }
+}
+
+List<Map<String, dynamic>> _parseItemMaps(Object? raw) {
+  if (raw is! List) return const [];
+  return [
+    for (final item in raw)
+      if (item is Map) Map<String, dynamic>.from(item),
+  ];
+}
diff --git a/lib/core/data/models/play_ticket.dart b/lib/core/data/models/play_ticket.dart
index b613e05..2a5ad1d 100644
--- a/lib/core/data/models/play_ticket.dart
+++ b/lib/core/data/models/play_ticket.dart
@@ -14,6 +14,7 @@ class PlayTicket {
     this.unlockCoin = 0,
     this.previewSeconds = 0,
     this.qualities = const [],
+    this.thumbnailsUrl,
     this.likeCount,
     this.commentCount,
   });
@@ -40,6 +41,7 @@ class PlayTicket {
 
   /// 后端下发的清晰度档位（如 AUTO / 720P / 1080P），HLS 由播放器自动切换。
   final List<String> qualities;
+  final String? thumbnailsUrl;
   final int? likeCount;
   final int? commentCount;
 
@@ -62,6 +64,7 @@ class PlayTicket {
           .whereType<String>()
           .where((quality) => quality.isNotEmpty)
           .toList(),
+      thumbnailsUrl: _optionalString(json['thumbnailsUrl']),
       likeCount: json['likeCount'] == null
           ? null
           : jsonToInt(json['likeCount']),
@@ -71,3 +74,8 @@ class PlayTicket {
     );
   }
 }
+
+String? _optionalString(dynamic value) {
+  final text = value is String ? value.trim() : '';
+  return text.isEmpty ? null : text;
+}
diff --git a/lib/core/data/models/watch_progress.dart b/lib/core/data/models/watch_progress.dart
index 3d655ef..2ba70e3 100644
--- a/lib/core/data/models/watch_progress.dart
+++ b/lib/core/data/models/watch_progress.dart
@@ -12,6 +12,10 @@ class WatchProgress {
     required this.episodeId,
     required this.position,
     required this.duration,
+    this.dramaTitle,
+    this.dramaCover,
+    this.episodeNumber,
+    this.totalEpisodes,
     this.finished = false,
     this.playCount = 0,
     this.updatedAt,
@@ -19,6 +23,10 @@ class WatchProgress {
 
   final String dramaId;
   final String episodeId;
+  final String? dramaTitle;
+  final String? dramaCover;
+  final int? episodeNumber;
+  final int? totalEpisodes;
   final Duration position;
   final Duration duration;
   final bool finished;
@@ -37,6 +45,14 @@ class WatchProgress {
     return WatchProgress(
       dramaId: (json['dramaId'] ?? '').toString(),
       episodeId: (json['episodeId'] ?? '').toString(),
+      dramaTitle: json['dramaTitle']?.toString(),
+      dramaCover: json['dramaCover']?.toString(),
+      episodeNumber: json['episodeNumber'] == null
+          ? null
+          : jsonToInt(json['episodeNumber']),
+      totalEpisodes: json['totalEpisodes'] == null
+          ? null
+          : jsonToInt(json['totalEpisodes']),
       position: Duration(milliseconds: jsonToInt(json['positionMs'])),
       duration: Duration(milliseconds: jsonToInt(json['durationMs'])),
       finished: json['finished'] == true,
@@ -48,6 +64,10 @@ class WatchProgress {
   Map<String, dynamic> toJson() => {
     'dramaId': dramaId,
     'episodeId': episodeId,
+    if (dramaTitle != null) 'dramaTitle': dramaTitle,
+    if (dramaCover != null) 'dramaCover': dramaCover,
+    if (episodeNumber != null) 'episodeNumber': episodeNumber,
+    if (totalEpisodes != null) 'totalEpisodes': totalEpisodes,
     'positionMs': position.inMilliseconds,
     'durationMs': duration.inMilliseconds,
     'finished': finished,
diff --git a/lib/core/data/models/watch_record.dart b/lib/core/data/models/watch_record.dart
index 954b478..41e93ee 100644
--- a/lib/core/data/models/watch_record.dart
+++ b/lib/core/data/models/watch_record.dart
@@ -19,8 +19,10 @@ class WatchRecord {
 
   String get dramaId => progress.dramaId;
 
-  /// 详情中按 episodeId 定位集号；缺失时返回 0。
+  /// 优先使用分页接口集号，其次从已加载详情定位。
   int get episodeNumber {
+    final pageEpisode = progress.episodeNumber;
+    if (pageEpisode != null && pageEpisode > 0) return pageEpisode;
     final episodes = drama?.episodes ?? const <Episode>[];
     for (var index = 0; index < episodes.length; index++) {
       if (episodes[index].id == progress.episodeId) return index + 1;
@@ -28,6 +30,24 @@ class WatchRecord {
     return 0;
   }
 
+  /// 服务端分页标题优先，详情标题作为回退。
+  String get displayTitle {
+    final pageTitle = progress.dramaTitle?.trim() ?? '';
+    return pageTitle.isNotEmpty ? pageTitle : drama?.title.trim() ?? '';
+  }
+
+  /// 服务端分页封面优先，详情封面作为回退。
+  String get displayCover {
+    final pageCover = progress.dramaCover?.trim() ?? '';
+    return pageCover.isNotEmpty ? pageCover : drama?.posterUrl ?? '';
+  }
+
+  /// 分页接口已带展示字段时无需等待详情加载。
+  bool get hasDisplayMetadata =>
+      displayTitle.isNotEmpty ||
+      progress.dramaCover?.trim().isNotEmpty == true ||
+      (progress.episodeNumber ?? 0) > 0;
+
   /// 生成卡片加载中、成功或失败后的新状态。
   WatchRecord copyWith({
     Drama? drama,
diff --git a/lib/core/data/remote/api_client.dart b/lib/core/data/remote/api_client.dart
index 6f934f1..6568177 100644
--- a/lib/core/data/remote/api_client.dart
+++ b/lib/core/data/remote/api_client.dart
@@ -1,8 +1,11 @@
+// Author: fruit.com.cn
+
 import 'package:dio/dio.dart';
 
 import '../../config/app_config.dart';
 import 'api_exception.dart';
 import 'api_interceptors.dart';
+import 'network_log_interceptor.dart';
 
 /// `ApiException` 从这里也能拿到：历史调用方一律 `import 'api_client.dart'`，不必改 import。
 export 'api_exception.dart';
@@ -39,6 +42,7 @@ class ApiClient {
         deviceIdReader: deviceIdReader,
       ),
       const EnvelopeInterceptor(),
+      NetworkLogInterceptor(),
     ]);
     if (adapter != null) {
       _dio.httpClientAdapter = adapter;
diff --git a/lib/core/data/remote/api_interceptors.dart b/lib/core/data/remote/api_interceptors.dart
index a48087d..cee6819 100644
--- a/lib/core/data/remote/api_interceptors.dart
+++ b/lib/core/data/remote/api_interceptors.dart
@@ -5,6 +5,7 @@ import 'dart:convert';
 import 'package:dio/dio.dart';
 
 import 'api_exception.dart';
+import 'network_log_interceptor.dart';
 
 /// 请求级开关：放在 `RequestOptions.extra` 里，由 `ApiClient` 写入、拦截器读取。
 class ApiRequestFlags {
@@ -72,6 +73,10 @@ class EnvelopeInterceptor extends Interceptor {
     ResponseInterceptorHandler handler,
   ) {
     final options = response.requestOptions;
+    if (NetworkLogInterceptor.isEnabled) {
+      options.extra[NetworkLogInterceptor.rawResponseDataExtraKey] =
+          response.data;
+    }
     final shell = _decodeShell(response.data);
     final code = shell['code'] as int? ?? -1;
     final message = shell['message'] as String?;
diff --git a/lib/core/data/remote/library_api.dart b/lib/core/data/remote/library_api.dart
index 14c09b7..73588d8 100644
--- a/lib/core/data/remote/library_api.dart
+++ b/lib/core/data/remote/library_api.dart
@@ -1,6 +1,7 @@
 // Author: fruit.com.cn
 
 import '../models/drama.dart';
+import '../models/page_result.dart';
 import 'api_client.dart';
 
 /// 收藏接口：`/app/favorites*`（契约 §1.5）。需要登录态。
@@ -20,13 +21,16 @@ class LibraryApi {
     return data == true;
   }
 
-  Future<List<Drama>> favorites() async {
-    final data = await _client.get('/app/favorites');
-    if (data is! List) return const [];
-    return [
-      for (final item in data)
-        if (item is Map<String, dynamic>) Drama.fromCardJson(item),
-    ];
+  Future<PageResult<Drama>> favorites({
+    int pageIndex = 1,
+    int pageSize = 20,
+  }) async {
+    final data = await _client.get(
+      '/app/favorites',
+      query: {'pageIndex': '$pageIndex', 'pageSize': '$pageSize'},
+    );
+    // 线上可能仍返回 List；分页壳与纯数组都要能渲染。
+    return PageResult.parse(data, Drama.fromCardJson);
   }
 
   Future<void> removeFavorite(String dramaId) async {
diff --git a/lib/core/data/remote/network_log_interceptor.dart b/lib/core/data/remote/network_log_interceptor.dart
new file mode 100644
index 0000000..babd542
--- /dev/null
+++ b/lib/core/data/remote/network_log_interceptor.dart
@@ -0,0 +1,219 @@
+// Author: fruit.com.cn
+
+import 'dart:convert';
+import 'dart:math' as math;
+
+import 'package:dio/dio.dart';
+import 'package:flutter/foundation.dart';
+
+/// 调试构建下输出 Dio 请求、响应和异常详情。
+class NetworkLogInterceptor extends Interceptor {
+  /// 在调试时关闭日志的本地常量开关。
+  static const bool enabled = true;
+
+  /// Envelope 解包前暂存原始响应体，供链尾日志读取。
+  static const String rawResponseDataExtraKey = 'app.http.rawResponseData';
+
+  /// 请求、响应体单条日志最大字符数。
+  static const int maxBodyLength = 3000;
+
+  static const String _truncatedSuffix = '…(truncated)';
+  static const String _stopwatchKey = 'app.http.stopwatch';
+  static const String _startedAtKey = 'app.http.startedAt';
+  static const String _emptyBody = '<empty>';
+  static const String _redacted = '***';
+
+  /// 允许单测注入日志收集器；默认走 Android Studio Run 控制台。
+  NetworkLogInterceptor({void Function(String)? logger})
+    : _logger = logger ?? debugPrint;
+
+  final void Function(String) _logger;
+
+  /// release/profile 下恒为 false，保证零 HTTP 日志输出。
+  static bool get isEnabled => kDebugMode && enabled;
+
+  @override
+  void onRequest(RequestOptions options, RequestInterceptorHandler handler) {
+    if (!isEnabled) {
+      return handler.next(options);
+    }
+    final stopwatch = Stopwatch()..start();
+    options.extra[_stopwatchKey] = stopwatch;
+    options.extra[_startedAtKey] = DateTime.now().toIso8601String();
+    final body = _formatRequestBody(options.data);
+    final message = StringBuffer()
+      ..writeln('[HTTP] → ${options.method} ${options.uri}')
+      ..writeln('[HTTP] → 耗时起点：${options.extra[_startedAtKey]}')
+      ..writeln('[HTTP] → headers：${_formatHeaders(options.headers)}')
+      ..writeln('[HTTP] → body：$body');
+    _logger(message.toString().trimRight());
+    handler.next(options);
+  }
+
+  @override
+  void onResponse(
+    Response<dynamic> response,
+    ResponseInterceptorHandler handler,
+  ) {
+    if (!isEnabled) {
+      return handler.next(response);
+    }
+    final options = response.requestOptions;
+    final elapsed = _elapsedMilliseconds(options);
+    final rawBody = options.extra[rawResponseDataExtraKey] ?? response.data;
+    final body = _formatResponseBody(
+      rawBody,
+      response.headers.value(Headers.contentTypeHeader),
+    );
+    final message = StringBuffer()
+      ..writeln(
+        '[HTTP] ← ${response.statusCode ?? 0} ${elapsed}ms '
+        '${options.method} ${options.uri}',
+      )
+      ..writeln('[HTTP] ← body：$body');
+    _logger(message.toString().trimRight());
+    handler.next(response);
+  }
+
+  @override
+  void onError(DioException err, ErrorInterceptorHandler handler) {
+    if (!isEnabled) {
+      return handler.next(err);
+    }
+    final options = err.requestOptions;
+    final message = StringBuffer()
+      ..writeln(
+        '[HTTP] ✗ ${err.type.name} ${_elapsedMilliseconds(options)}ms '
+        '${options.uri} ${err.message ?? ''}',
+      )
+      ..write(_errorBodyLine(err));
+    _logger(message.toString().trimRight());
+    handler.next(err);
+  }
+
+  int _elapsedMilliseconds(RequestOptions options) {
+    final stopwatch = options.extra[_stopwatchKey];
+    if (stopwatch is Stopwatch) {
+      return stopwatch.elapsedMilliseconds;
+    }
+    return 0;
+  }
+
+  String _errorBodyLine(DioException error) {
+    final rawBody =
+        error.requestOptions.extra[rawResponseDataExtraKey] ??
+        error.response?.data;
+    if (rawBody == null) {
+      return '';
+    }
+    final body = _formatResponseBody(
+      rawBody,
+      error.response?.headers.value(Headers.contentTypeHeader),
+    );
+    return '\n[HTTP] ✗ body：$body';
+  }
+
+  String _formatHeaders(Map<String, dynamic> headers) {
+    if (headers.isEmpty) {
+      return '{}';
+    }
+    final entries = headers.entries.toList()
+      ..sort((left, right) => left.key.compareTo(right.key));
+    final safe = <String, String>{
+      for (final entry in entries)
+        entry.key: _safeHeaderValue(entry.key, entry.value),
+    };
+    return _truncate(jsonEncode(safe));
+  }
+
+  String _safeHeaderValue(String name, Object? value) {
+    final text = value?.toString() ?? '';
+    if (name.toLowerCase() == 'authorization') {
+      return _maskAuthorization(text);
+    }
+    if (name.toLowerCase() == 'x-device-id') {
+      return text;
+    }
+    return _redacted;
+  }
+
+  String _maskAuthorization(String value) {
+    if (value.length <= 8) {
+      return _redacted;
+    }
+    return '${value.substring(0, math.min(8, value.length))}...';
+  }
+
+  String _formatRequestBody(Object? body) {
+    if (body == null) {
+      return _emptyBody;
+    }
+    final json = _tryPrettyJson(body);
+    if (json != null) {
+      return _truncate(json);
+    }
+    final length = switch (body) {
+      FormData data => data.length,
+      List<int> bytes => bytes.length,
+      _ => utf8.encode(body.toString()).length,
+    };
+    return '${body.runtimeType} ($length bytes)';
+  }
+
+  String _formatResponseBody(Object? body, String? contentType) {
+    if (body == null) {
+      return _emptyBody;
+    }
+    if (body is List<int>) {
+      final bytes = body is Uint8List ? body : Uint8List.fromList(body);
+      if (_isBinary(contentType)) {
+        return '<binary ${contentType ?? 'unknown'}, ${bytes.length} bytes>';
+      }
+      final text = utf8.decode(bytes, allowMalformed: true);
+      return _formatText(text);
+    }
+    return _formatText(body.toString());
+  }
+
+  String _formatText(String text) {
+    if (text.isEmpty) {
+      return _emptyBody;
+    }
+    return _truncate(_tryPrettyJson(text) ?? text);
+  }
+
+  String? _tryPrettyJson(Object? body) {
+    try {
+      final value = body is String
+          ? jsonDecode(body)
+          : body is List<int>
+          ? jsonDecode(utf8.decode(body, allowMalformed: true))
+          : body;
+      if (value is! Map && value is! List) {
+        return null;
+      }
+      return const JsonEncoder.withIndent('  ').convert(value);
+    } catch (_) {
+      return null;
+    }
+  }
+
+  bool _isBinary(String? contentType) {
+    final type = contentType?.toLowerCase() ?? '';
+    return type.startsWith('image/') ||
+        type.startsWith('audio/') ||
+        type.startsWith('video/') ||
+        type.startsWith('font/') ||
+        type.contains('application/octet-stream') ||
+        type.contains('application/pdf') ||
+        type.contains('application/zip');
+  }
+
+  String _truncate(String value) {
+    if (value.length <= maxBodyLength) {
+      return value;
+    }
+    final end = maxBodyLength - _truncatedSuffix.length;
+    return '${value.substring(0, end)}$_truncatedSuffix';
+  }
+}
diff --git a/lib/core/data/remote/watch_api.dart b/lib/core/data/remote/watch_api.dart
index f57d7fb..f918e8d 100644
--- a/lib/core/data/remote/watch_api.dart
+++ b/lib/core/data/remote/watch_api.dart
@@ -1,5 +1,6 @@
 // Author: fruit.com.cn
 
+import '../models/page_result.dart';
 import '../models/watch_progress.dart';
 import 'api_client.dart';
 
@@ -39,17 +40,22 @@ class WatchApi {
     return data is Map<String, dynamic> ? WatchProgress.fromJson(data) : null;
   }
 
-  /// 最近观看（服务端按下标返回，已按更新时间倒序）。
-  Future<List<WatchProgress>> recent({int limit = 20}) async {
+  /// 最近观看分页：`pageIndex`/`pageSize`，解包 `PageResult`。
+  Future<PageResult<WatchProgress>> recent({
+    int pageIndex = 1,
+    int pageSize = 20,
+  }) async {
     final data = await _client.get(
       '/app/watch/recent',
-      query: {'limit': '$limit'},
+      query: {'pageIndex': '$pageIndex', 'pageSize': '$pageSize'},
+    );
+    if (data is! Map) {
+      return const PageResult();
+    }
+    return PageResult.fromJson(
+      Map<String, dynamic>.from(data),
+      WatchProgress.fromJson,
     );
-    if (data is! List) return const [];
-    return [
-      for (final item in data)
-        if (item is Map<String, dynamic>) WatchProgress.fromJson(item),
-    ];
   }
 
   /// 删除某部剧的观看记录（记录页清单条用）。
diff --git a/lib/core/data/repositories/favorite_repository.dart b/lib/core/data/repositories/favorite_repository.dart
index 1329adf..402da00 100644
--- a/lib/core/data/repositories/favorite_repository.dart
+++ b/lib/core/data/repositories/favorite_repository.dart
@@ -1,6 +1,7 @@
 // Author: fruit.com.cn
 
 import '../models/drama.dart';
+import '../models/page_result.dart';
 import '../remote/library_api.dart';
 
 /// 收藏来源：**以服务端为准**（本地不再存收藏状态）。
@@ -8,8 +9,8 @@ abstract interface class FavoriteRepository {
   /// 切换收藏，返回切换后的状态（true = 已收藏）。
   Future<bool> toggle(String dramaId);
 
-  /// 收藏列表（卡片结构与首页一致）。
-  Future<List<Drama>> list();
+  /// 收藏分页（卡片结构与首页一致）。
+  Future<PageResult<Drama>> page({int pageIndex = 1, int pageSize = 20});
 
   Future<void> remove(String dramaId);
 }
@@ -28,9 +29,9 @@ class HttpFavoriteRepository implements FavoriteRepository {
   Future<bool> toggle(String dramaId) => _api.toggleFavorite(dramaId);
 
   @override
-  Future<List<Drama>> list() async {
-    if (!_signedIn) return const [];
-    return _api.favorites();
+  Future<PageResult<Drama>> page({int pageIndex = 1, int pageSize = 20}) async {
+    if (!_signedIn) return const PageResult();
+    return _api.favorites(pageIndex: pageIndex, pageSize: pageSize);
   }
 
   @override
@@ -46,10 +47,10 @@ class InMemoryFavoriteRepository implements FavoriteRepository {
   final Set<String> _saved;
   final List<Drama> _cards;
   bool failToggle = false;
-  bool failList = false;
+  bool failPage = false;
   bool failRemove = false;
   int toggleCalls = 0;
-  int listCalls = 0;
+  int pageCalls = 0;
 
   @override
   Future<bool> toggle(String dramaId) async {
@@ -60,10 +61,18 @@ class InMemoryFavoriteRepository implements FavoriteRepository {
   }
 
   @override
-  Future<List<Drama>> list() async {
-    listCalls++;
-    if (failList) throw StateError('favorite unavailable');
-    return _cards.where((card) => _saved.contains(card.id)).toList();
+  Future<PageResult<Drama>> page({int pageIndex = 1, int pageSize = 20}) async {
+    pageCalls++;
+    if (failPage) throw StateError('favorite unavailable');
+    final filtered = _cards.where((card) => _saved.contains(card.id)).toList();
+    final offset = (pageIndex - 1) * pageSize;
+    if (offset >= filtered.length) {
+      return PageResult(total: filtered.length);
+    }
+    return PageResult(
+      total: filtered.length,
+      list: filtered.skip(offset).take(pageSize).toList(),
+    );
   }
 
   @override
diff --git a/lib/core/data/repositories/watch_history_repository.dart b/lib/core/data/repositories/watch_history_repository.dart
index fb4a9dd..cb6b76f 100644
--- a/lib/core/data/repositories/watch_history_repository.dart
+++ b/lib/core/data/repositories/watch_history_repository.dart
@@ -1,5 +1,6 @@
 // Author: fruit.com.cn
 
+import '../models/page_result.dart';
 import '../models/watch_progress.dart';
 import '../remote/watch_api.dart';
 
@@ -20,8 +21,11 @@ abstract interface class WatchHistoryRepository {
     bool finished = false,
   });
 
-  /// 最近观看（默认 20 条）。
-  Future<List<WatchProgress>> recent({int limit = 20});
+  /// 最近观看分页。
+  Future<PageResult<WatchProgress>> recent({
+    int pageIndex = 1,
+    int pageSize = 20,
+  });
 
   /// 清理某部剧的记录（K2 的记录页会用，这里先备好）。
   Future<void> remove(String dramaId);
@@ -63,9 +67,12 @@ class HttpWatchHistoryRepository implements WatchHistoryRepository {
   }
 
   @override
-  Future<List<WatchProgress>> recent({int limit = 20}) async {
-    if (!_signedIn) return const [];
-    return _api.recent(limit: limit);
+  Future<PageResult<WatchProgress>> recent({
+    int pageIndex = 1,
+    int pageSize = 20,
+  }) async {
+    if (!_signedIn) return const PageResult();
+    return _api.recent(pageIndex: pageIndex, pageSize: pageSize);
   }
 
   @override
@@ -123,12 +130,23 @@ class InMemoryWatchHistoryRepository implements WatchHistoryRepository {
   }
 
   @override
-  Future<List<WatchProgress>> recent({int limit = 20}) async {
+  Future<PageResult<WatchProgress>> recent({
+    int pageIndex = 1,
+    int pageSize = 20,
+  }) async {
     if (failReads > 0) {
       failReads -= 1;
       throw StateError('progress unavailable');
     }
-    return _records.values.take(limit).toList();
+    final items = _records.values.toList();
+    final offset = (pageIndex - 1) * pageSize;
+    if (offset >= items.length) {
+      return PageResult(total: items.length);
+    }
+    return PageResult(
+      total: items.length,
+      list: items.skip(offset).take(pageSize).toList(),
+    );
   }
 
   @override
diff --git a/lib/core/data/services/favorite_controller.dart b/lib/core/data/services/favorite_controller.dart
index 4b9e4b1..ee55bc4 100644
--- a/lib/core/data/services/favorite_controller.dart
+++ b/lib/core/data/services/favorite_controller.dart
@@ -10,13 +10,22 @@ import '../repositories/favorite_repository.dart';
 /// 点击收藏先乐观更新（立刻变色），失败再回滚并给出提示 —— 网络抖动时不至于
 /// "点了没反应"或"看起来收藏了其实没有"。
 class FavoriteController extends ChangeNotifier {
-  FavoriteController(this._repository);
+  FavoriteController(this._repository, {this.pageSize = defaultPageSize});
+
+  static const int defaultPageSize = 20;
 
   final FavoriteRepository _repository;
+  final int pageSize;
   final Set<String> _saved = {};
   List<Drama> cards = const [];
+  int total = 0;
   bool loading = false;
+  bool loadingMore = false;
+  bool hasMore = false;
   String? error;
+  String? loadMoreError;
+  int _pageIndex = 0;
+  int _requestSeq = 0;
   bool _disposed = false;
 
   Set<String> get savedIds => Set.unmodifiable(_saved);
@@ -29,20 +38,66 @@ class FavoriteController extends ChangeNotifier {
 
   /// 拉收藏列表：列表既用于"我的"页展示，也用于校准 [savedIds]。
   Future<void> load() async {
+    final request = ++_requestSeq;
     loading = true;
+    loadingMore = false;
     error = null;
+    loadMoreError = null;
     notify();
     try {
-      final list = await _repository.list();
+      final page = await _repository.page(pageIndex: 1, pageSize: pageSize);
+      if (_disposed || request != _requestSeq) return;
+      final list = _uniqueCards(page.list);
       cards = list;
       _saved
         ..clear()
         ..addAll(list.map((drama) => drama.id));
+      total = page.total;
+      _pageIndex = 1;
+      hasMore = page.list.isNotEmpty && cards.length < total;
     } catch (_) {
-      error = 'favoritesError';
+      if (!_disposed && request == _requestSeq) {
+        error = 'favoritesError';
+      }
     } finally {
-      loading = false;
-      notify();
+      if (!_disposed && request == _requestSeq) {
+        loading = false;
+        notify();
+      }
+    }
+  }
+
+  /// 追加下一页；正在刷新、已在加载或无更多时直接忽略。
+  Future<void> loadMore() async {
+    if (loading || loadingMore || !hasMore) return;
+    final request = ++_requestSeq;
+    loadingMore = true;
+    loadMoreError = null;
+    notify();
+    try {
+      final page = await _repository.page(
+        pageIndex: _pageIndex + 1,
+        pageSize: pageSize,
+      );
+      if (_disposed || request != _requestSeq) return;
+      final known = cards.map((drama) => drama.id).toSet();
+      final appended = _uniqueCards(
+        page.list,
+      ).where((drama) => known.add(drama.id)).toList(growable: false);
+      cards = [...cards, ...appended];
+      _saved.addAll(appended.map((drama) => drama.id));
+      total = page.total;
+      _pageIndex += 1;
+      hasMore = page.list.isNotEmpty && cards.length < total;
+    } catch (_) {
+      if (!_disposed && request == _requestSeq) {
+        loadMoreError = 'favoritesError';
+      }
+    } finally {
+      if (!_disposed && request == _requestSeq) {
+        loadingMore = false;
+        notify();
+      }
     }
   }
 
@@ -52,10 +107,17 @@ class FavoriteController extends ChangeNotifier {
   /// 这样"收藏完打开我的收藏"能立刻看到，不必等下一次整表刷新。
   Future<bool> toggle(String dramaId, {Drama? card}) async {
     final wasSaved = _saved.contains(dramaId);
+    final previousCards = cards;
+    final previousTotal = total;
+    final previousHasMore = hasMore;
     // 乐观更新
     if (wasSaved) {
       _saved.remove(dramaId);
-      cards = cards.where((drama) => drama.id != dramaId).toList();
+      if (cards.any((drama) => drama.id == dramaId)) {
+        cards = cards.where((drama) => drama.id != dramaId).toList();
+        total = total > 0 ? total - 1 : 0;
+        hasMore = cards.length < total;
+      }
     } else {
       _saved.add(dramaId);
     }
@@ -65,17 +127,30 @@ class FavoriteController extends ChangeNotifier {
       // 以服务端返回的状态为准（可能与本地猜测不同，例如并发操作）
       if (saved) {
         _saved.add(dramaId);
-        if (card != null && !cards.any((drama) => drama.id == dramaId)) {
+        if (wasSaved) {
+          cards = previousCards;
+          total = previousTotal;
+          hasMore = previousHasMore;
+        } else if (card != null && !cards.any((drama) => drama.id == dramaId)) {
           cards = [card, ...cards];
+          total += 1;
+          hasMore = cards.length < total;
         }
       } else {
         _saved.remove(dramaId);
-        cards = cards.where((drama) => drama.id != dramaId).toList();
+        if (cards.any((drama) => drama.id == dramaId)) {
+          cards = cards.where((drama) => drama.id != dramaId).toList();
+          total = total > 0 ? total - 1 : 0;
+          hasMore = cards.length < total;
+        }
       }
       notify();
       return true;
     } catch (_) {
       // 回滚
+      cards = previousCards;
+      total = previousTotal;
+      hasMore = previousHasMore;
       if (wasSaved) {
         _saved.add(dramaId);
       } else {
@@ -94,6 +169,8 @@ class FavoriteController extends ChangeNotifier {
     _saved.remove(dramaId);
     final next = [...cards]..removeAt(index);
     cards = next;
+    total = total > 0 ? total - 1 : 0;
+    hasMore = cards.length < total;
     notify();
     try {
       await _repository.remove(dramaId);
@@ -106,6 +183,8 @@ class FavoriteController extends ChangeNotifier {
       );
       cards = restored;
       _saved.add(dramaId);
+      total += 1;
+      hasMore = cards.length < total;
       notify();
       return false;
     }
@@ -113,12 +192,27 @@ class FavoriteController extends ChangeNotifier {
 
   /// 退出登录时清空：收藏状态属于账号，不能跨账号串联。
   void clear() {
+    _requestSeq += 1;
     _saved.clear();
     cards = const [];
+    total = 0;
+    loading = false;
+    hasMore = false;
+    loadingMore = false;
+    loadMoreError = null;
     error = null;
+    _pageIndex = 0;
     notify();
   }
 
+  List<Drama> _uniqueCards(List<Drama> source) {
+    final seen = <String>{};
+    return [
+      for (final drama in source)
+        if (seen.add(drama.id)) drama,
+    ];
+  }
+
   @override
   void dispose() {
     _disposed = true;
diff --git a/lib/core/data/services/home_feed_controller.dart b/lib/core/data/services/home_feed_controller.dart
index c85d681..7326983 100644
--- a/lib/core/data/services/home_feed_controller.dart
+++ b/lib/core/data/services/home_feed_controller.dart
@@ -18,7 +18,7 @@ class HomeFeedController extends ChangeNotifier {
            channel: _ChannelFeedState(),
        };
 
-  static const int pageSize = 10;
+  static const int pageSize = 20;
   static const Duration defaultRequestTimeout = Duration(seconds: 10);
 
   final CatalogRepository _repository;
diff --git a/lib/core/data/services/playback_position_cache.dart b/lib/core/data/services/playback_position_cache.dart
new file mode 100644
index 0000000..3825f81
--- /dev/null
+++ b/lib/core/data/services/playback_position_cache.dart
@@ -0,0 +1,89 @@
+// Author: fruit.com.cn
+
+const Duration _defaultMaxAge = Duration(hours: 12);
+
+/// 将播放位置限制在当前媒体时长内。
+Duration clampPlaybackPosition(Duration position, Duration duration) {
+  if (position <= Duration.zero || duration <= Duration.zero) {
+    return Duration.zero;
+  }
+  if (position >= duration) return duration;
+  return position;
+}
+
+/// 进程内最近播放位置。
+class CachedPlaybackPosition {
+  const CachedPlaybackPosition({
+    required this.episodeId,
+    required this.dramaId,
+    required this.position,
+    required this.duration,
+    required this.updatedAt,
+  });
+
+  final String episodeId;
+  final String dramaId;
+  final Duration position;
+  final Duration duration;
+  final DateTime updatedAt;
+}
+
+/// 按集缓存最近播放位置，仅当前进程有效。
+class PlaybackPositionCache {
+  PlaybackPositionCache({
+    DateTime Function()? now,
+    this.maxAge = _defaultMaxAge,
+  }) : _now = now ?? DateTime.now;
+
+  final DateTime Function() _now;
+  final Duration maxAge;
+  final Map<String, CachedPlaybackPosition> _positions = {};
+
+  /// 保存最近有效播放位置；零位置不会覆盖已有记录。
+  void save({
+    required String episodeId,
+    required String dramaId,
+    required Duration position,
+    required Duration duration,
+  }) {
+    final safePosition = clampPlaybackPosition(position, duration);
+    if (episodeId.isEmpty || dramaId.isEmpty || safePosition <= Duration.zero) {
+      return;
+    }
+    _positions[episodeId] = CachedPlaybackPosition(
+      episodeId: episodeId,
+      dramaId: dramaId,
+      position: safePosition,
+      duration: duration,
+      updatedAt: _now(),
+    );
+  }
+
+  /// 读取同剧同集且未过期的最近位置。
+  CachedPlaybackPosition? read(String episodeId, {required String dramaId}) {
+    final entry = _positions[episodeId];
+    if (!_isValid(entry, dramaId)) return null;
+    return entry;
+  }
+
+  /// 读取指定短剧最近更新的有效位置。
+  CachedPlaybackPosition? latestForDrama(String dramaId) {
+    CachedPlaybackPosition? latest;
+    for (final entry in _positions.values) {
+      if (!_isValid(entry, dramaId)) continue;
+      if (latest == null || !entry.updatedAt.isBefore(latest.updatedAt)) {
+        latest = entry;
+      }
+    }
+    return latest;
+  }
+
+  bool _isValid(CachedPlaybackPosition? entry, String dramaId) {
+    if (entry == null ||
+        entry.dramaId != dramaId ||
+        entry.position <= Duration.zero) {
+      return false;
+    }
+    return _now().difference(entry.updatedAt) <= maxAge;
+  }
+}
diff --git a/lib/core/data/services/playback_session.dart b/lib/core/data/services/playback_session.dart
index d0c58ea..ccb4526 100644
--- a/lib/core/data/services/playback_session.dart
+++ b/lib/core/data/services/playback_session.dart
@@ -92,6 +92,7 @@ class PlaybackSession extends ChangeNotifier {
     }
     return slot.player;
   }
+
   bool get loading => _loading;
   bool get userWantsPlay => _userWantsPlay;
   bool get canAutoAdvance => _mayPlay && !_loading && active != null;
@@ -103,6 +104,10 @@ class PlaybackSession extends ChangeNotifier {
   Future<void> get playbackSettled => _operations;
   Future<void> get preloadSettled => _preloadTask;
 
+  /// 当前页面可见、无浮层遮挡且存在可用播放器时可安全恢复。
+  bool get canResumeAfterBackground =>
+      !_closed && _routeVisible && !_overlayOpen && active != null;
+
   bool get _visible => !_closed && _appResumed && _routeVisible;
   bool get _mayPlay => _visible && !_overlayOpen && _userWantsPlay;
 
diff --git a/lib/core/data/services/playback_thumbnail_service.dart b/lib/core/data/services/playback_thumbnail_service.dart
new file mode 100644
index 0000000..c817858
--- /dev/null
+++ b/lib/core/data/services/playback_thumbnail_service.dart
@@ -0,0 +1,365 @@
+// Author: fruit.com.cn
+
+import 'dart:async';
+import 'dart:collection';
+
+import 'package:flutter/foundation.dart';
+import 'package:flutter/services.dart';
+
+/// 原生取帧所需的播放源信息。
+class PlaybackThumbnailSource {
+  const PlaybackThumbnailSource({
+    this.localPath = '',
+    this.remoteUrl = '',
+    this.headers = const {},
+  });
+
+  final String localPath;
+  final String remoteUrl;
+  final Map<String, String> headers;
+
+  bool get isAvailable => localPath.isNotEmpty || remoteUrl.isNotEmpty;
+}
+
+/// 按 episodeId 读取当前可用播放源，确保签名地址刷新后立即生效。
+typedef PlaybackThumbnailSourceResolver =
+    PlaybackThumbnailSource? Function(String episodeId);
+
+/// 传给原生取帧层的单次请求。
+class PlaybackThumbnailFrameRequest {
+  const PlaybackThumbnailFrameRequest({
+    required this.episodeId,
+    required this.position,
+    required this.source,
+  });
+
+  final String episodeId;
+  final Duration position;
+  final PlaybackThumbnailSource source;
+
+  Map<String, Object> toChannelArguments() => {
+    'episodeId': episodeId,
+    'timeMs': position.inMilliseconds,
+    'localPath': source.localPath,
+    'url': source.remoteUrl,
+    'headers': source.headers,
+  };
+}
+
+/// 可注入的原生取帧接口。
+abstract interface class PlaybackThumbnailFrameLoader {
+  Future<ByteData?> load(PlaybackThumbnailFrameRequest request);
+
+  void dispose();
+}
+
+/// 默认通过平台通道从本地播放器原生层取帧。
+class MethodChannelPlaybackThumbnailFrameLoader
+    implements PlaybackThumbnailFrameLoader {
+  MethodChannelPlaybackThumbnailFrameLoader({MethodChannel? channel})
+    : _channel =
+          channel ?? const MethodChannel('com.stormg.lumadrama/thumbnail');
+
+  final MethodChannel _channel;
+
+  @override
+  Future<ByteData?> load(PlaybackThumbnailFrameRequest request) async {
+    final bytes = await _channel.invokeMethod<Uint8List>(
+      'frame',
+      request.toChannelArguments(),
+    );
+    return bytes == null ? null : ByteData.sublistView(bytes);
+  }
+
+  @override
+  void dispose() {}
+}
+
+/// 每秒一个 bucket，拖过同一秒时复用同一张缩略图。
+int playbackThumbnailBucket(Duration position) {
+  final milliseconds = position.inMilliseconds;
+  if (milliseconds <= 0) return 0;
+  return milliseconds ~/ Duration.millisecondsPerSecond;
+}
+
+/// 播放器缩略图单飞、LRU 缓存与拖动预取调度。
+class PlaybackThumbnailService {
+  PlaybackThumbnailService({
+    PlaybackThumbnailFrameLoader? frameLoader,
+    this.sourceResolver,
+    this.requestTimeout = const Duration(milliseconds: 1500),
+    this.prefetchDelay = const Duration(milliseconds: 120),
+    this.cacheCapacity = defaultCacheCapacity,
+  }) : _frameLoader =
+           frameLoader ?? MethodChannelPlaybackThumbnailFrameLoader(),
+       assert(cacheCapacity > 0);
+
+  static const int defaultCacheCapacity = 24;
+
+  final PlaybackThumbnailFrameLoader _frameLoader;
+  final PlaybackThumbnailSourceResolver? sourceResolver;
+  final Duration requestTimeout;
+  final Duration prefetchDelay;
+  final int cacheCapacity;
+  final LinkedHashMap<String, ByteData> _cache = LinkedHashMap();
+  final LinkedHashMap<String, bool> _unavailable = LinkedHashMap();
+
+  _ThumbnailRequest? _inFlight;
+  Future<ByteData?>? _inFlightFuture;
+  _ThumbnailRequest? _queued;
+  Timer? _prefetchTimer;
+  String? _wantedKey;
+  String? _latestEpisodeId;
+  int? _latestBucket;
+  int _prefetchDirection = 1;
+  bool _disposed = false;
+
+  @visibleForTesting
+  int get cacheSize => _cache.length;
+
+  /// 取指定剧集、时间点的缩略图。失败或超时统一返回 null。
+  Future<ByteData?> thumbnail(String episodeId, Duration position) {
+    if (_disposed) return Future<ByteData?>.value();
+    final bucket = playbackThumbnailBucket(position);
+    final key = _key(episodeId, bucket);
+    _wantedKey = key;
+    _noteRequestPosition(episodeId, bucket);
+    _prefetchTimer?.cancel();
+    _prefetchTimer = null;
+    _dropQueued();
+
+    final cached = _readCache(key);
+    if (cached != null) {
+      _schedulePrefetch(key);
+      return Future<ByteData?>.value(cached);
+    }
+    if (_inFlight?.key == key && _inFlightFuture != null) {
+      _schedulePrefetch(key);
+      return _inFlightFuture!;
+    }
+    if (_unavailable.containsKey(key)) {
+      _promoteUnavailable(key);
+      _schedulePrefetch(key);
+      return Future<ByteData?>.value();
+    }
+
+    final request = _ThumbnailRequest(
+      key: key,
+      episodeId: episodeId,
+      bucket: bucket,
+    );
+    _schedulePrefetch(key);
+    if (_inFlight == null) return _start(request);
+    return _queue(request);
+  }
+
+  /// 松手或离开拖动后调用；只取消尚未开始的请求。
+  void cancelPending() {
+    _wantedKey = null;
+    _prefetchTimer?.cancel();
+    _prefetchTimer = null;
+    _dropQueued();
+  }
+
+  /// 页面销毁时清空帧缓存和所有待执行请求。
+  void clear() {
+    cancelPending();
+    _cache.clear();
+    _unavailable.clear();
+    _latestEpisodeId = null;
+    _latestBucket = null;
+    _prefetchDirection = 1;
+  }
+
+  void dispose() {
+    if (_disposed) return;
+    _disposed = true;
+    clear();
+    _frameLoader.dispose();
+  }
+
+  Future<ByteData?> _start(_ThumbnailRequest request) {
+    final completer = Completer<ByteData?>();
+    _inFlight = request;
+    _inFlightFuture = completer.future;
+    unawaited(_run(request, completer));
+    return completer.future;
+  }
+
+  Future<ByteData?> _queue(_ThumbnailRequest request) {
+    final completer = Completer<ByteData?>();
+    _queued = request.withCompleter(completer);
+    return completer.future;
+  }
+
+  Future<void> _run(
+    _ThumbnailRequest request,
+    Completer<ByteData?> completer,
+  ) async {
+    ByteData? frame;
+    try {
+      frame = await _loadFrame(request);
+    } catch (_) {
+      frame = null;
+    }
+    if (frame == null) {
+      _putUnavailable(request.key);
+    } else {
+      _putCache(request.key, frame);
+    }
+    final deliver = _wantedKey == request.key;
+    _inFlight = null;
+    _inFlightFuture = null;
+    if (!completer.isCompleted) {
+      completer.complete(deliver ? frame : null);
+    }
+    _drainQueued();
+  }
+
+  Future<ByteData?> _loadFrame(_ThumbnailRequest request) {
+    PlaybackThumbnailSource? source;
+    try {
+      source = sourceResolver?.call(request.episodeId);
+    } catch (_) {
+      return Future<ByteData?>.value();
+    }
+    if (source == null || !source.isAvailable) {
+      return Future<ByteData?>.value();
+    }
+    final frame = PlaybackThumbnailFrameRequest(
+      episodeId: request.episodeId,
+      position: Duration(seconds: request.bucket),
+      source: source,
+    );
+    final result = Completer<ByteData?>();
+    late final Timer timeout;
+    void finish(ByteData? value) {
+      if (result.isCompleted) return;
+      timeout.cancel();
+      result.complete(value);
+    }
+
+    timeout = Timer(requestTimeout, () => finish(null));
+    try {
+      _frameLoader
+          .load(frame)
+          .then(finish, onError: (Object _, StackTrace _) => finish(null));
+    } catch (_) {
+      finish(null);
+    }
+    return result.future;
+  }
+
+  void _drainQueued() {
+    if (_disposed || _inFlight != null) return;
+    final queued = _queued;
+    _queued = null;
+    if (queued == null || queued.key != _wantedKey) {
+      queued?.completer.complete(null);
+      return;
+    }
+    _inFlight = queued;
+    _inFlightFuture = queued.completer.future;
+    unawaited(_run(queued, queued.completer));
+  }
+
+  void _dropQueued() {
+    final queued = _queued;
+    _queued = null;
+    if (queued != null && !queued.completer.isCompleted) {
+      queued.completer.complete(null);
+    }
+  }
+
+  void _noteRequestPosition(String episodeId, int bucket) {
+    if (_latestEpisodeId == episodeId && _latestBucket != null) {
+      if (bucket < _latestBucket!) _prefetchDirection = -1;
+      if (bucket > _latestBucket!) _prefetchDirection = 1;
+    }
+    _latestEpisodeId = episodeId;
+    _latestBucket = bucket;
+  }
+
+  void _schedulePrefetch(String currentKey) {
+    _prefetchTimer?.cancel();
+    _prefetchTimer = Timer(prefetchDelay, () {
+      _prefetchTimer = null;
+      if (_disposed || _wantedKey != currentKey) return;
+      final episodeId = _latestEpisodeId;
+      final bucket = _latestBucket;
+      if (episodeId == null || bucket == null) return;
+      final neighbor = bucket + _prefetchDirection;
+      if (neighbor < 0) return;
+      final key = _key(episodeId, neighbor);
+      if (_cache.containsKey(key) ||
+          _unavailable.containsKey(key) ||
+          _inFlight?.key == key ||
+          _queued != null) {
+        return;
+      }
+      final request = _ThumbnailRequest(
+        key: key,
+        episodeId: episodeId,
+        bucket: neighbor,
+      );
+      if (_inFlight == null) {
+        unawaited(_start(request));
+      } else {
+        _queue(request);
+      }
+    });
+  }
+
+  ByteData? _readCache(String key) {
+    final value = _cache.remove(key);
+    if (value == null) return null;
+    _cache[key] = value;
+    return value;
+  }
+
+  void _putCache(String key, ByteData value) {
+    _unavailable.remove(key);
+    _cache.remove(key);
+    _cache[key] = value;
+    while (_cache.length > cacheCapacity) {
+      _cache.remove(_cache.keys.first);
+    }
+  }
+
+  void _putUnavailable(String key) {
+    _unavailable.remove(key);
+    _unavailable[key] = true;
+    while (_unavailable.length > cacheCapacity) {
+      _unavailable.remove(_unavailable.keys.first);
+    }
+  }
+
+  void _promoteUnavailable(String key) {
+    if (_unavailable.remove(key) == null) return;
+    _unavailable[key] = true;
+  }
+
+  String _key(String episodeId, int bucket) => '$episodeId:$bucket';
+}
+
+class _ThumbnailRequest {
+  _ThumbnailRequest({
+    required this.key,
+    required this.episodeId,
+    required this.bucket,
+    Completer<ByteData?>? completer,
+  }) : completer = completer ?? Completer<ByteData?>();
+
+  final String key;
+  final String episodeId;
+  final int bucket;
+  final Completer<ByteData?> completer;
+
+  _ThumbnailRequest withCompleter(Completer<ByteData?> value) =>
+      _ThumbnailRequest(
+        key: key,
+        episodeId: episodeId,
+        bucket: bucket,
+        completer: value,
+      );
+}
diff --git a/lib/core/data/services/sprite_thumbnail_asset_loader.dart b/lib/core/data/services/sprite_thumbnail_asset_loader.dart
new file mode 100644
index 0000000..c82648e
--- /dev/null
+++ b/lib/core/data/services/sprite_thumbnail_asset_loader.dart
@@ -0,0 +1,128 @@
+// Author: fruit.com.cn
+
+import 'dart:convert';
+import 'dart:typed_data';
+import 'dart:ui' as ui;
+
+import 'package:dio/dio.dart';
+
+import '../../config/app_config.dart';
+
+const int spriteThumbnailDecodeMaxDimension = 2048;
+
+/// VTT 资源拒绝访问，服务层据此清缓存并重试一次。
+class SpriteThumbnailForbiddenException implements Exception {
+  const SpriteThumbnailForbiddenException();
+}
+
+/// 已解码 sprite 与原图尺寸；cue 坐标会按解码缩放比例映射。
+class SpriteThumbnailDecodedImage {
+  const SpriteThumbnailDecodedImage({
+    required this.image,
+    required this.originalWidth,
+    required this.originalHeight,
+  });
+
+  final ui.Image image;
+  final int originalWidth;
+  final int originalHeight;
+}
+
+/// 可注入的资源加载接口，测试无需真实网络或图片。
+abstract interface class SpriteThumbnailAssetLoader {
+  Future<String?> loadVtt(Uri uri);
+
+  Future<SpriteThumbnailDecodedImage?> loadSprite(Uri uri);
+}
+
+/// 默认通过项目现有 Dio 拉取 VTT 和 sprite 图片。
+class DioSpriteThumbnailAssetLoader implements SpriteThumbnailAssetLoader {
+  DioSpriteThumbnailAssetLoader({Dio? dio})
+    : _dio =
+          dio ??
+          Dio(
+            BaseOptions(
+              connectTimeout: AppConfig.requestTimeout,
+              receiveTimeout: AppConfig.requestTimeout,
+              validateStatus: (_) => true,
+            ),
+          );
+
+  final Dio _dio;
+
+  @override
+  Future<String?> loadVtt(Uri uri) async {
+    final response = await _request(uri);
+    if (response?.statusCode == 403) {
+      throw const SpriteThumbnailForbiddenException();
+    }
+    if (response == null || !_isSuccess(response.statusCode)) return null;
+    final data = response.data;
+    if (data is! List<int>) return null;
+    return utf8.decode(data, allowMalformed: true);
+  }
+
+  @override
+  Future<SpriteThumbnailDecodedImage?> loadSprite(Uri uri) async {
+    final response = await _request(uri);
+    if (response == null || !_isSuccess(response.statusCode)) return null;
+    final data = response.data;
+    if (data is! List<int>) return null;
+    return _decode(Uint8List.fromList(data));
+  }
+
+  Future<Response<List<int>>?> _request(Uri uri) async {
+    try {
+      return await _dio.get<List<int>>(
+        uri.toString(),
+        options: Options(responseType: ResponseType.bytes),
+      );
+    } catch (_) {
+      return null;
+    }
+  }
+
+  bool _isSuccess(int? status) =>
+      status != null && status >= 200 && status < 300;
+
+  Future<SpriteThumbnailDecodedImage?> _decode(Uint8List bytes) async {
+    ui.ImmutableBuffer? buffer;
+    ui.ImageDescriptor? descriptor;
+    ui.Codec? codec;
+    try {
+      buffer = await ui.ImmutableBuffer.fromUint8List(bytes);
+      descriptor = await ui.ImageDescriptor.encoded(buffer);
+      final originalWidth = descriptor.width;
+      final originalHeight = descriptor.height;
+      final target = _targetSize(originalWidth, originalHeight);
+      codec = await descriptor.instantiateCodec(
+        targetWidth: target.$1,
+        targetHeight: target.$2,
+      );
+      final frame = await codec.getNextFrame();
+      return SpriteThumbnailDecodedImage(
+        image: frame.image,
+        originalWidth: originalWidth,
+        originalHeight: originalHeight,
+      );
+    } catch (_) {
+      return null;
+    } finally {
+      codec?.dispose();
+      descriptor?.dispose();
+      buffer?.dispose();
+    }
+  }
+
+  (int?, int?) _targetSize(int width, int height) {
+    final longest = width > height ? width : height;
+    if (longest <= spriteThumbnailDecodeMaxDimension) {
+      return (null, null);
+    }
+    final scale = spriteThumbnailDecodeMaxDimension / longest;
+    return (
+      (width * scale).round().clamp(1, spriteThumbnailDecodeMaxDimension),
+      (height * scale).round().clamp(1, spriteThumbnailDecodeMaxDimension),
+    );
+  }
+}
diff --git a/lib/core/data/services/sprite_thumbnail_axis.dart b/lib/core/data/services/sprite_thumbnail_axis.dart
new file mode 100644
index 0000000..55f10da
--- /dev/null
+++ b/lib/core/data/services/sprite_thumbnail_axis.dart
@@ -0,0 +1,464 @@
+// Author: fruit.com.cn
+
+import 'dart:collection';
+import 'dart:ui' as ui;
+
+import 'package:flutter/foundation.dart';
+
+import '../../config/app_config.dart';
+import 'sprite_thumbnail_asset_loader.dart';
+
+const Duration spriteVttCacheTtl = Duration(minutes: 10);
+const int spriteImageCacheCapacity = 2;
+
+/// 单个 VTT cue 对应的 sprite 裁剪区域。
+class SpriteThumbnailCue {
+  const SpriteThumbnailCue({
+    required this.start,
+    required this.end,
+    required this.spriteFile,
+    required this.sourceRect,
+  });
+
+  final Duration start;
+  final Duration end;
+  final String spriteFile;
+  final ui.Rect sourceRect;
+}
+
+/// 已解析的 VTT 时间轴。
+class SpriteThumbnailAxis {
+  const SpriteThumbnailAxis({required this.vttUrl, required this.cues});
+
+  final String vttUrl;
+  final List<SpriteThumbnailCue> cues;
+
+  factory SpriteThumbnailAxis.empty(String vttUrl) =>
+      SpriteThumbnailAxis(vttUrl: vttUrl, cues: const []);
+
+  Uri resolveSpriteUri(String spriteFile) =>
+      Uri.parse(vttUrl).resolve(spriteFile);
+}
+
+/// 可直接交给 RawImage.sourceRect 的裁剪帧。
+class SpriteThumbnailFrame {
+  const SpriteThumbnailFrame({
+    required this.image,
+    required this.sourceRect,
+    required this.spriteUrl,
+    required this.cue,
+  });
+
+  final ui.Image image;
+  final ui.Rect sourceRect;
+  final String spriteUrl;
+  final SpriteThumbnailCue cue;
+}
+
+/// 预览卡片当前应展示的回退阶段。
+enum ScrubPreviewStage { sprite, waitingForAxis, localFrame, cover }
+
+/// 预览回退链的纯判定函数。
+ScrubPreviewStage decideScrubPreviewStage({
+  required bool hasThumbnailsUrl,
+  required bool hasSpriteFrame,
+  required bool hasAxis,
+  required bool hasLocalFrame,
+}) {
+  if (hasSpriteFrame) return ScrubPreviewStage.sprite;
+  if (hasThumbnailsUrl && !hasAxis) {
+    return ScrubPreviewStage.waitingForAxis;
+  }
+  if (hasLocalFrame) return ScrubPreviewStage.localFrame;
+  return ScrubPreviewStage.cover;
+}
+
+/// 解析 WebVTT；任意异常都收敛为空轴。
+SpriteThumbnailAxis parseSpriteThumbnailVtt(
+  String source, {
+  required String vttUrl,
+}) {
+  final cues = <SpriteThumbnailCue>[];
+  try {
+    for (final block
+        in source.replaceAll('\r\n', '\n').split(RegExp(r'\n\s*\n'))) {
+      final cue = _parseCueBlock(block);
+      if (cue != null) cues.add(cue);
+    }
+  } catch (_) {
+    return SpriteThumbnailAxis.empty(vttUrl);
+  }
+  cues.sort((left, right) => left.start.compareTo(right.start));
+  return SpriteThumbnailAxis(vttUrl: vttUrl, cues: cues);
+}
+
+/// 按 position 二分选择 cue；边界外选择最近 cue。
+SpriteThumbnailCue? selectSpriteThumbnailCue(
+  List<SpriteThumbnailCue> cues,
+  Duration position,
+) {
+  if (cues.isEmpty) return null;
+  var low = 0;
+  var high = cues.length;
+  while (low < high) {
+    final middle = (low + high) >> 1;
+    if (cues[middle].start <= position) {
+      low = middle + 1;
+    } else {
+      high = middle;
+    }
+  }
+  if (low == 0) return cues.first;
+  final previous = cues[low - 1];
+  if (low == cues.length || position <= previous.end) return previous;
+  final next = cues[low];
+  final previousDistance = position - previous.end;
+  final nextDistance = next.start - position;
+  return previousDistance <= nextDistance ? previous : next;
+}
+
+/// 只读缓存接口，便于 widget 测试注入。
+abstract interface class SpriteThumbnailAxisSource implements Listenable {
+  SpriteThumbnailFrame? cachedFrameAt(String? thumbnailsUrl, Duration position);
+
+  bool hasAxis(String? thumbnailsUrl);
+
+  Future<void> prepareAt(String? thumbnailsUrl, Duration position);
+}
+
+/// VTT 时间轴、cue 二分与 sprite ui.Image LRU 缓存。
+class SpriteThumbnailAxisService extends ChangeNotifier
+    implements SpriteThumbnailAxisSource {
+  SpriteThumbnailAxisService({
+    SpriteThumbnailAssetLoader? loader,
+    this.cacheTtl = spriteVttCacheTtl,
+    DateTime Function()? now,
+  }) : _loader = loader ?? DioSpriteThumbnailAssetLoader(),
+       _now = now ?? DateTime.now;
+
+  final SpriteThumbnailAssetLoader _loader;
+  final Duration cacheTtl;
+  final DateTime Function() _now;
+  final Map<String, _CachedAxis> _axisCache = {};
+  final Map<String, Future<SpriteThumbnailAxis>> _axisRequests = {};
+  final LinkedHashMap<String, _CachedSprite> _spriteCache = LinkedHashMap();
+  final Map<String, Future<_CachedSprite?>> _spriteRequests = {};
+  final Set<String> _failedSprites = {};
+  String? _activeAxisUrl;
+  int _axisGeneration = 0;
+  bool _disposed = false;
+
+  @visibleForTesting
+  int get spriteCacheSize => _spriteCache.length;
+
+  @visibleForTesting
+  List<String> get spriteCacheKeys => _spriteCache.keys.toList();
+
+  /// 播放器就绪时预取当前 cue 与相邻 sprite，拖动帧不触发网络或解码。
+  @override
+  Future<void> prepareAt(String? thumbnailsUrl, Duration position) async {
+    final url = _normalizeUrl(thumbnailsUrl);
+    if (_disposed || url == null) return;
+    _activateAxis(url);
+    final axis = await _loadAxis(url);
+    if (_disposed || _activeAxisUrl != url) return;
+    for (final cue in _prefetchCues(axis, position)) {
+      await _ensureSprite(axis, cue);
+    }
+  }
+
+  @override
+  bool hasAxis(String? thumbnailsUrl) {
+    final url = _normalizeUrl(thumbnailsUrl);
+    if (url == null || url != _activeAxisUrl) return false;
+    return _readAxis(url) != null;
+  }
+
+  @override
+  SpriteThumbnailFrame? cachedFrameAt(
+    String? thumbnailsUrl,
+    Duration position,
+  ) {
+    final url = _normalizeUrl(thumbnailsUrl);
+    if (url == null || url != _activeAxisUrl) return null;
+    final axis = _readAxis(url);
+    if (axis == null) return null;
+    final cue = selectSpriteThumbnailCue(axis.cues, position);
+    if (cue == null) return null;
+    final cached = _readSprite(cue.spriteFile);
+    if (cached == null) return null;
+    final sourceRect = _scaledSourceRect(cached, cue.sourceRect);
+    if (sourceRect == null) return null;
+    return SpriteThumbnailFrame(
+      image: cached.decoded.image,
+      sourceRect: sourceRect,
+      spriteUrl: axis.resolveSpriteUri(cue.spriteFile).toString(),
+      cue: cue,
+    );
+  }
+
+  /// 页面销毁时释放全部 VTT 与 ui.Image 内存。
+  @override
+  void dispose() {
+    if (_disposed) return;
+    _disposed = true;
+    _clearAll();
+    super.dispose();
+  }
+
+  void _activateAxis(String url) {
+    if (_activeAxisUrl == url) return;
+    _activeAxisUrl = url;
+    _axisGeneration++;
+    _clearSprites();
+  }
+
+  Future<SpriteThumbnailAxis> _loadAxis(String url) {
+    final cached = _readAxis(url);
+    if (cached != null) return Future.value(cached);
+    final existing = _axisRequests[url];
+    if (existing != null) return existing;
+    final request = _fetchAxis(url);
+    _axisRequests[url] = request;
+    return request.whenComplete(() {
+      _axisRequests.remove(url);
+    });
+  }
+
+  Future<SpriteThumbnailAxis> _fetchAxis(String url) async {
+    for (var attempt = 0; attempt < 2; attempt++) {
+      try {
+        final text = await _loader.loadVtt(Uri.parse(url));
+        final axis = text == null
+            ? SpriteThumbnailAxis.empty(url)
+            : parseSpriteThumbnailVtt(text, vttUrl: url);
+        if (_disposed) return SpriteThumbnailAxis.empty(url);
+        _cacheAxis(axis);
+        notifyListeners();
+        return axis;
+      } on SpriteThumbnailForbiddenException {
+        if (_disposed) return SpriteThumbnailAxis.empty(url);
+        _axisCache.remove(url);
+        if (_activeAxisUrl == url) _clearSprites();
+      } catch (_) {
+        break;
+      }
+    }
+    final empty = SpriteThumbnailAxis.empty(url);
+    if (_disposed) return empty;
+    _cacheAxis(empty);
+    notifyListeners();
+    return empty;
+  }
+
+  void _cacheAxis(SpriteThumbnailAxis axis) {
+    _axisCache[axis.vttUrl] = _CachedAxis(
+      axis: axis,
+      expiresAt: _now().add(cacheTtl),
+    );
+  }
+
+  SpriteThumbnailAxis? _readAxis(String url) {
+    final cached = _axisCache[url];
+    if (cached == null) return null;
+    if (cached.expiresAt.isAfter(_now())) return cached.axis;
+    _axisCache.remove(url);
+    return null;
+  }
+
+  List<SpriteThumbnailCue> _prefetchCues(
+    SpriteThumbnailAxis axis,
+    Duration position,
+  ) {
+    final current = selectSpriteThumbnailCue(axis.cues, position);
+    if (current == null) return const [];
+    final index = axis.cues.indexOf(current);
+    final candidates = <SpriteThumbnailCue>[current];
+    for (final direction in const [1, -1]) {
+      for (var step = 1; step < axis.cues.length; step++) {
+        final neighborIndex = index + direction * step;
+        if (neighborIndex < 0 || neighborIndex >= axis.cues.length) break;
+        final neighbor = axis.cues[neighborIndex];
+        if (neighbor.spriteFile != current.spriteFile) {
+          candidates.add(neighbor);
+          break;
+        }
+      }
+      if (candidates.length > 1) break;
+    }
+    return candidates;
+  }
+
+  Future<_CachedSprite?> _ensureSprite(
+    SpriteThumbnailAxis axis,
+    SpriteThumbnailCue cue,
+  ) {
+    final cached = _readSprite(cue.spriteFile);
+    if (cached != null) return Future.value(cached);
+    if (_failedSprites.contains(cue.spriteFile)) return Future.value();
+    final existing = _spriteRequests[cue.spriteFile];
+    if (existing != null) return existing;
+    final generation = _axisGeneration;
+    final request = _loadSprite(axis, cue, generation);
+    _spriteRequests[cue.spriteFile] = request;
+    return request.whenComplete(() {
+      _spriteRequests.remove(cue.spriteFile);
+    });
+  }
+
+  Future<_CachedSprite?> _loadSprite(
+    SpriteThumbnailAxis axis,
+    SpriteThumbnailCue cue,
+    int generation,
+  ) async {
+    SpriteThumbnailDecodedImage? decoded;
+    try {
+      decoded = await _loader.loadSprite(axis.resolveSpriteUri(cue.spriteFile));
+    } catch (_) {
+      decoded = null;
+    }
+    if (decoded == null) {
+      _failedSprites.add(cue.spriteFile);
+      if (!_disposed) notifyListeners();
+      return null;
+    }
+    if (_disposed || generation != _axisGeneration) {
+      decoded.image.dispose();
+      return null;
+    }
+    final cached = _CachedSprite(decoded);
+    _putSprite(cue.spriteFile, cached);
+    notifyListeners();
+    return cached;
+  }
+
+  _CachedSprite? _readSprite(String key) {
+    final value = _spriteCache.remove(key);
+    if (value == null) return null;
+    _spriteCache[key] = value;
+    return value;
+  }
+
+  void _putSprite(String key, _CachedSprite value) {
+    _spriteCache.remove(key)?.decoded.image.dispose();
+    _spriteCache[key] = value;
+    while (_spriteCache.length > spriteImageCacheCapacity) {
+      final oldest = _spriteCache.remove(_spriteCache.keys.first);
+      oldest?.decoded.image.dispose();
+    }
+  }
+
+  ui.Rect? _scaledSourceRect(_CachedSprite cached, ui.Rect source) {
+    final scaleX = cached.decoded.image.width / cached.decoded.originalWidth;
+    final scaleY = cached.decoded.image.height / cached.decoded.originalHeight;
+    final scaled =
+        ui.Rect.fromLTWH(
+          source.left * scaleX,
+          source.top * scaleY,
+          source.width * scaleX,
+          source.height * scaleY,
+        ).intersect(
+          ui.Rect.fromLTWH(
+            0,
+            0,
+            cached.decoded.image.width.toDouble(),
+            cached.decoded.image.height.toDouble(),
+          ),
+        );
+    return scaled.isEmpty ? null : scaled;
+  }
+
+  void _clearSprites() {
+    for (final cached in _spriteCache.values) {
+      cached.decoded.image.dispose();
+    }
+    _spriteCache.clear();
+    _spriteRequests.clear();
+    _failedSprites.clear();
+  }
+
+  void _clearAll() {
+    _axisGeneration++;
+    _activeAxisUrl = null;
+    _axisCache.clear();
+    _axisRequests.clear();
+    _clearSprites();
+  }
+
+  String? _normalizeUrl(String? url) {
+    final trimmed = url?.trim() ?? '';
+    if (trimmed.isEmpty) return null;
+    return AppConfig.mediaUrl(trimmed);
+  }
+}
+
+final RegExp _timingPattern = RegExp(
+  r'^(\d{2,}:\d{2}:\d{2}\.\d{3})\s*-->\s*(\d{2,}:\d{2}:\d{2}\.\d{3})',
+);
+final RegExp _cueLinkPattern = RegExp(r'^(\S+?)#xywh=(.+)$');
+final RegExp _xywhPattern = RegExp(r'^(\d+),(\d+),(\d+),(\d+)$');
+
+SpriteThumbnailCue? _parseCueBlock(String block) {
+  final lines = block
+      .split('\n')
+      .map((line) => line.trim())
+      .where((line) => line.isNotEmpty)
+      .toList();
+  final timingIndex = lines.indexWhere(_timingPattern.hasMatch);
+  if (timingIndex < 0 || timingIndex + 1 >= lines.length) return null;
+  final timing = _timingPattern.firstMatch(lines[timingIndex]);
+  if (timing == null) return null;
+  final link = _cueLinkPattern.firstMatch(lines[timingIndex + 1]);
+  if (link == null) return null;
+  final start = _parseTimestamp(timing.group(1)!);
+  final end = _parseTimestamp(timing.group(2)!);
+  if (start == null || end == null || end <= start) return null;
+  final segments = Uri.tryParse(link.group(1)!)?.pathSegments;
+  final file = segments == null || segments.isEmpty ? null : segments.last;
+  final xywh = _xywhPattern.firstMatch(link.group(2)!);
+  if (file == null || file.isEmpty || xywh == null) return null;
+  final rect = ui.Rect.fromLTWH(
+    double.parse(xywh.group(1)!),
+    double.parse(xywh.group(2)!),
+    double.parse(xywh.group(3)!),
+    double.parse(xywh.group(4)!),
+  );
+  if (rect.isEmpty) return null;
+  return SpriteThumbnailCue(
+    start: start,
+    end: end,
+    spriteFile: file,
+    sourceRect: rect,
+  );
+}
+
+Duration? _parseTimestamp(String value) {
+  final parts = value.split(':');
+  if (parts.length != 3) return null;
+  final secondsParts = parts[2].split('.');
+  if (secondsParts.length != 2) return null;
+  final hours = int.tryParse(parts[0]);
+  final minutes = int.tryParse(parts[1]);
+  final seconds = int.tryParse(secondsParts[0]);
+  final milliseconds = int.tryParse(secondsParts[1]);
+  if ([hours, minutes, seconds, milliseconds].contains(null)) return null;
+  return Duration(
+    hours: hours!,
+    minutes: minutes!,
+    seconds: seconds!,
+    milliseconds: milliseconds!,
+  );
+}
+
+class _CachedAxis {
+  const _CachedAxis({required this.axis, required this.expiresAt});
+
+  final SpriteThumbnailAxis axis;
+  final DateTime expiresAt;
+}
+
+class _CachedSprite {
+  const _CachedSprite(this.decoded);
+
+  final SpriteThumbnailDecodedImage decoded;
+}
diff --git a/lib/core/data/services/video_player_port.dart b/lib/core/data/services/video_player_port.dart
index d5d4f40..2cb2b1f 100644
--- a/lib/core/data/services/video_player_port.dart
+++ b/lib/core/data/services/video_player_port.dart
@@ -61,6 +61,9 @@ class VideoPlayerPort implements PlayerPort {
     if (!_disposed && controller.value.isInitialized) await controller.pause();
   }
 
+  /// 跳转到指定播放位置。
+  Future<void> seekTo(Duration position) => controller.seekTo(position);
+
   @override
   Future<void> dispose() async {
     if (_disposed) return;
diff --git a/lib/core/data/services/watch_records_controller.dart b/lib/core/data/services/watch_records_controller.dart
index 9862db3..ec70015 100644
--- a/lib/core/data/services/watch_records_controller.dart
+++ b/lib/core/data/services/watch_records_controller.dart
@@ -11,41 +11,53 @@ import '../repositories/watch_history_repository.dart';
 
 /// 独立观看记录页状态。
 ///
-/// 最近记录只下发 dramaId；详情按 dramaId 去重后补取，并以 4 个并发为上限。
+/// 分页接口提供标题/封面/集号；详情按 dramaId 去重后补取，供点击播放使用。
 class WatchRecordsController extends ChangeNotifier {
   factory WatchRecordsController({
     required WatchHistoryRepository history,
     required CatalogRepository catalog,
-    int limit = defaultLimit,
-  }) => WatchRecordsController._(history, catalog, limit);
+    int pageSize = defaultPageSize,
+  }) => WatchRecordsController._(history, catalog, pageSize);
 
-  WatchRecordsController._(this._history, this._catalog, this.limit);
+  WatchRecordsController._(this._history, this._catalog, this.pageSize);
 
-  static const int defaultLimit = 20;
+  static const int defaultPageSize = 20;
   static const int detailConcurrency = 4;
 
   final WatchHistoryRepository _history;
   final CatalogRepository _catalog;
-  final int limit;
+  final int pageSize;
   final Map<String, Drama> _detailCache = {};
 
   List<WatchRecord> records = const [];
+  int total = 0;
   bool loading = false;
+  bool loadingMore = false;
+  bool hasMore = false;
   bool clearing = false;
   String? error;
+  String? loadMoreError;
   String? actionError;
+  int _pageIndex = 0;
+  int _requestSeq = 0;
   bool _disposed = false;
 
   /// 加载最近记录并补齐详情；单条详情失败不拖垮整页。
   Future<void> load() async {
+    final request = ++_requestSeq;
     loading = true;
+    loadingMore = false;
     error = null;
+    loadMoreError = null;
     actionError = null;
     _notify();
     try {
-      final recent = await _history.recent(limit: limit);
-      if (_disposed) return;
-      records = _uniqueRecords(recent);
+      final page = await _history.recent(pageIndex: 1, pageSize: pageSize);
+      if (_disposed || request != _requestSeq) return;
+      records = _uniqueRecords(page.list);
+      total = page.total;
+      _pageIndex = 1;
+      hasMore = page.list.isNotEmpty && records.length < total;
       _notify();
       await _hydrate(records.map((record) => record.dramaId).toList());
     } catch (failure, stackTrace) {
@@ -57,17 +69,54 @@ class WatchRecordsController extends ChangeNotifier {
         stackTrace: stackTrace,
         label: '[WatchRecordsController] recent failed',
       );
-      if (!_disposed) {
+      if (!_disposed && request == _requestSeq) {
         error = failure is ApiException ? failure.message : 'progressError';
       }
     } finally {
-      if (!_disposed) {
+      if (!_disposed && request == _requestSeq) {
         loading = false;
         _notify();
       }
     }
   }
 
+  /// 追加下一页；刷新、加载中或无更多时忽略。
+  Future<void> loadMore() async {
+    if (loading || loadingMore || !hasMore) return;
+    final request = ++_requestSeq;
+    loadingMore = true;
+    loadMoreError = null;
+    _notify();
+    try {
+      final page = await _history.recent(
+        pageIndex: _pageIndex + 1,
+        pageSize: pageSize,
+      );
+      if (_disposed || request != _requestSeq) return;
+      final known = records.map((record) => record.dramaId).toSet();
+      final appended = _uniqueRecords(
+        page.list,
+      ).where((record) => known.add(record.dramaId)).toList(growable: false);
+      records = [...records, ...appended];
+      total = page.total;
+      _pageIndex += 1;
+      hasMore = page.list.isNotEmpty && records.length < total;
+      _notify();
+      await _hydrate(appended.map((record) => record.dramaId).toList());
+    } catch (failure) {
+      if (!_disposed && request == _requestSeq) {
+        loadMoreError = failure is ApiException
+            ? failure.message
+            : 'progressError';
+      }
+    } finally {
+      if (!_disposed && request == _requestSeq) {
+        loadingMore = false;
+        _notify();
+      }
+    }
+  }
+
   /// 只重试一条详情失败记录。
   Future<void> retryDetail(String dramaId) async {
     final index = _recordIndex(dramaId);
@@ -81,12 +130,23 @@ class WatchRecordsController extends ChangeNotifier {
     _notify();
   }
 
+  /// 点击有标题的记录时再按需加载详情，避免列表阶段产生 N+1。
+  Future<Drama?> detailForOpen(String dramaId) async {
+    final cached = _detailCache[dramaId];
+    if (cached != null) return cached;
+    await _loadDetail(dramaId);
+    _notify();
+    return _detailCache[dramaId];
+  }
+
   /// 删除单条记录，先更新 UI，失败按原位置回滚。
   Future<bool> remove(String dramaId) async {
     final index = _recordIndex(dramaId);
     if (index < 0) return true;
     final removed = records[index];
     records = [...records]..removeAt(index);
+    total = total > 0 ? total - 1 : 0;
+    hasMore = records.length < total;
     actionError = null;
     _notify();
     try {
@@ -96,6 +156,8 @@ class WatchRecordsController extends ChangeNotifier {
       final next = [...records];
       next.insert(index > next.length ? next.length : index, removed);
       records = next;
+      total += 1;
+      hasMore = records.length < total;
       actionError = 'recordDeleteFailed';
       return false;
     } finally {
@@ -106,8 +168,15 @@ class WatchRecordsController extends ChangeNotifier {
   /// 清空全部记录，先更新 UI，失败恢复原列表。
   Future<bool> clear() async {
     if (records.isEmpty) return true;
+    _requestSeq += 1;
     final previous = records;
+    final previousTotal = total;
+    final previousPageIndex = _pageIndex;
     records = const [];
+    total = 0;
+    hasMore = false;
+    _pageIndex = 0;
+    loadingMore = false;
     clearing = true;
     actionError = null;
     _notify();
@@ -116,6 +185,9 @@ class WatchRecordsController extends ChangeNotifier {
       return true;
     } catch (_) {
       records = previous;
+      total = previousTotal;
+      _pageIndex = previousPageIndex;
+      hasMore = records.length < total;
       actionError = 'recordClearFailed';
       return false;
     } finally {
@@ -138,11 +210,12 @@ class WatchRecordsController extends ChangeNotifier {
   }
 
   Future<void> _hydrate(List<String> dramaIds) async {
-    for (final id in dramaIds) {
+    final missingTitles = dramaIds.where(_hasMissingTitle).toSet().toList();
+    for (final id in missingTitles) {
       if (_detailCache.containsKey(id)) await _loadDetail(id);
     }
     final queue = [
-      for (final id in dramaIds)
+      for (final id in missingTitles)
         if (!_detailCache.containsKey(id)) id,
     ];
     final workerCount = queue.length < detailConcurrency
@@ -159,9 +232,15 @@ class WatchRecordsController extends ChangeNotifier {
     ]);
   }
 
-  Future<void> _loadDetail(String dramaId) async {
+  bool _hasMissingTitle(String dramaId) {
     final index = _recordIndex(dramaId);
-    if (index < 0) return;
+    if (index < 0) return false;
+    return (records[index].progress.dramaTitle?.trim() ?? '').isEmpty;
+  }
+
+  Future<Drama?> _loadDetail(String dramaId) async {
+    final index = _recordIndex(dramaId);
+    if (index < 0) return null;
     final cached = _detailCache[dramaId];
     if (cached != null) {
       _replaceAt(
@@ -172,14 +251,14 @@ class WatchRecordsController extends ChangeNotifier {
           detailFailed: false,
         ),
       );
-      return;
+      return cached;
     }
     try {
       final detail = await _catalog.fetchDrama(dramaId);
-      if (_disposed) return;
+      if (_disposed) return null;
       _detailCache[dramaId] = detail;
       final current = _recordIndex(dramaId);
-      if (current < 0) return;
+      if (current < 0) return detail;
       _replaceAt(
         current,
         records[current].copyWith(
@@ -188,6 +267,7 @@ class WatchRecordsController extends ChangeNotifier {
           detailFailed: false,
         ),
       );
+      return detail;
     } catch (failure, stackTrace) {
       debugPrint(
         '[WatchRecordsController] detail failed dramaId=$dramaId '
@@ -197,13 +277,14 @@ class WatchRecordsController extends ChangeNotifier {
         stackTrace: stackTrace,
         label: '[WatchRecordsController] detail failed dramaId=$dramaId',
       );
-      if (_disposed) return;
+      if (_disposed) return null;
       final current = _recordIndex(dramaId);
-      if (current < 0) return;
+      if (current < 0) return null;
       _replaceAt(
         current,
         records[current].copyWith(detailLoading: false, detailFailed: true),
       );
+      return null;
     }
   }
 
diff --git a/lib/core/formatting/count_format.dart b/lib/core/formatting/count_format.dart
index c360d7e..2af1b47 100644
--- a/lib/core/formatting/count_format.dart
+++ b/lib/core/formatting/count_format.dart
@@ -7,3 +7,11 @@ String formatInteractionCount(int count) {
   if (count < 10000) return '$count';
   return '${(count / 10000).toStringAsFixed(1)}万';
 }
+
+/// 播放量展示：以 w 为单位，整数不保留小数，非整数保留一位。
+String formatPlayCount(int count) {
+  if (count < 10000) return '$count';
+  final value = count / 10000;
+  if (value == value.roundToDouble()) return '${value.toInt()}w';
+  return '${value.toStringAsFixed(1)}w';
+}
diff --git a/lib/core/theme/app_colors.dart b/lib/core/theme/app_colors.dart
index e8961a9..759f7bb 100644
--- a/lib/core/theme/app_colors.dart
+++ b/lib/core/theme/app_colors.dart
@@ -2,106 +2,209 @@
 
 import 'package:flutter/material.dart';
 
-/// K28-S 浅色暖橙主题色板。
+/// 深色视觉色板。
 ///
 /// 保留既有语义名，避免页面大范围改名；实际颜色统一由本文件控制。
 abstract final class AppColors {
-  /// 主操作、选中态、播放进度。
-  static const blue = Color(0xFFFF7A1A);
+  /// 透明与媒体黑底。
+  static const transparent = Colors.transparent;
+  static const mediaBlack = Color(0xFF000000);
+
+  /// 阴影与遮罩层级。
+  static const shadowSubtle = Color(0x14000000);
+  static const shadowSoft = Color(0x33000000);
+  static const shadow = Color(0x8A000000);
+  static const shadowStrong = Color(0xE6000000);
+  static const scrim = Color(0xD1000000);
+  static const controlScrim = Color(0x80000000);
+  static const controlSoftScrim = Color(0x42000000);
+  static const timeBubbleScrim = Color(0xB3000000);
+  static const scrubPreviewScrim = Color(0xDE000000);
+  static const overlaySoft = Color(0x66000000);
+  static const overlayBar = Color(0x4D000000);
+  static const overlayMedium = Color(0x99000000);
+  static const headerScrim = Color(0x59000000);
+  static const overlaySecondary = Color(0xFFC7C7CC);
+  static const overlayLabel = Color(0xFFE6E6EB);
+
+  /// 主操作、选中态、播放进度（品牌橙）。
+  static const blue = Color(0xFFFF6B2C);
   static const primary = blue;
+  static const actionRed = Color(0xFFFF3B30);
 
   /// 主操作按下态。
-  static const bluePressed = Color(0xFFFF6A00);
+  static const bluePressed = Color(0xFFE55A1F);
 
-  /// 粉色辅助强调色。
-  static const blueSoft = Color(0xFFFF6A8A);
+  /// 链接与次要高亮：统一改用中性浅灰，避免旧青色残留。
+  static const blueSoft = Color(0xFFB0B0B0);
   static const secondary = blueSoft;
   static const lavender = blueSoft;
 
   /// 金币与奖励。
   static const gold = Color(0xFFF3B34C);
+  static const goldDeep = Color(0xFFD9A23A);
+  static const homeCrownGold = Color(0xFFF5C451);
+  static const homeGiftPink = Color(0xFFFF4D8D);
+  static const vipGoldStart = Color(0xFFF5D9A0);
+  static const vipGoldEnd = Color(0xFFE8B65A);
+  static const vipBadgeSurface = Color(0x1F3D2408);
+  static const bronze = Color(0xFFCD7F32);
+  static const bronzeDeep = Color(0xFFA9713A);
+  static const rankSilver = Color(0xFFC0C0C0);
 
   /// 成功状态。
   static const success = Color(0xFF2FA873);
 
-  /// 收藏和喜欢使用粉色强调。
-  static const favorite = secondary;
+  /// 错误与危险操作。
+  static const error = Color(0xFFFF6B6B);
+
+  /// 收藏与喜欢（非主色铺色，独立强调）。
+  static const favorite = Color(0xFFFF6A8A);
+  static const doubleTapHeartRed = Color(0xFFFF4D6D);
+  static const doubleTapHeartPink = Color(0xFFFF7A9A);
 
   /// 金币底色上的文字。
-  static const onGold = Color(0xFF5A3511);
+  static const onGold = Color(0xFF3D2408);
 
   /// 主色上的文字与图标。
   static const onPrimary = Color(0xFFFFFFFF);
 
   /// 页面背景。
-  static const ink = Color(0xFFFFF8F0);
+  static const ink = Color(0xFF000000);
+
+  /// 首页/追剧/我的统一的纯黑内容背景。
+  static const appBackground = Color(0xFF000000);
+
+  /// 中性深灰卡片与控件表面。
+  static const contentCard = Color(0xFF16161A);
+  static const contentSurface = Color(0xFF1C1C1E);
+  static const skeletonSurface = Color(0xFF141414);
+  static const contentChip = Color(0xFF2C2C2E);
+  static const contentBorder = Color(0x1AFFFFFF);
+  static const filterChipSelected = Color(0xFF21090E);
+  static const filterChipTextSelected = Color(0xFFFF4D6A);
+  static const filterChipTextInactive = Color(0xFF8A8A8A);
+
+  /// 「我的」页卡片与描边。
+  static const mineCard = Color(0xFF16161A);
+  static const mineOutline = Color(0xFF4A4A4A);
+  static const mineGradientTop = Color(0xFF3A1B0E);
+  static const mineGradientMiddle = Color(0xFF1A0C07);
+  static const mineGradientBottom = Color(0xFF000000);
+  static const mineGradientGlow = Color(0x33FF6B2C);
+  static const mineGridSurface = Color(0x99101010);
+  static const minePanelSurface = Color(0xFF101010);
+  static const mineMoreDivider = Color(0xFF1C1C1E);
+  static const mineGridDivider = Color(0xFF2A2A2A);
+  static const mineGridIconSurface = Color(0xFF1C1C1E);
+  static const mineGridLabel = Color(0xFFE6E6EB);
+  static const mineIconWallet = Color(0xFFF5C451);
+  static const mineIconDownloads = Color(0xFF4DA3FF);
+  static const mineIconHistory = Color(0xFF4ADE80);
+  static const mineIconPreferences = Color(0xFFFF6B9A);
+  static const mineIconSupport = Color(0xFFA78BFA);
+  static const mineIconLanguage = Color(0xFF22D3EE);
+  static const mineIconSettings = Color(0xFFA1A1AA);
+  static const recommendPlaylistGlow = Color(0x26FF6B2C);
+
+  /// 次级文字与列表 chevron。
+  static const textPrimary = Color(0xFFFFFFFF);
+  static const textSecondary = Color(0xFFB0B0B0);
+  static const textTertiary = Color(0xFF8E8E93);
+  static const textTabInactive = Color(0xFFB0B0B0);
+  static const textFilterIcon = Color(0xFF7A7A7E);
+  static const searchResultMeta = Color(0xFF9E9E9E);
 
   /// 原生开屏与冷启动过渡底色。
-  static const splashInk = Color(0xFF1F1B16);
+  static const splashInk = ink;
 
-  /// 页面顶部暖色渐变起点。
-  static const surfaceTop = Color(0xFFFFE9D6);
+  /// 页面顶部暖黑色，渐变底部仍收口到纯黑。
+  static const surfaceTop = mineGradientTop;
 
   /// 底部导航底色。
-  static const bar = Color(0xFFFFFDFB);
+  static const bar = ink;
 
-  /// 卡片轻阴影。
-  static const cardShadow = Color(0x14FF8A3D);
+  /// 底部导航专用：纯黑背景、选中白与未选中灰。
+  static const navBackground = Color(0xFF000000);
+  static const navSelected = Color(0xFFFFFFFF);
 
-  /// 卡片与弹层。
-  static const card = Color(0xFFFFFFFF);
+  /// 卡片阴影（深色几乎不用阴影）。
+  static const cardShadow = Color(0x00000000);
+
+  /// 卡片与列表容器。
+  static const card = Color(0xFF16161A);
 
   /// 次要卡片表面。
-  static const cardAlt = Color(0xFFFFF4E9);
+  static const cardAlt = Color(0xFF101010);
 
-  /// 浮层、输入框和嵌套区域。
-  static const raised = Color(0xFFFFF1E5);
-  static const quick = Color(0xFFFFF0E1);
-  static const input = Color(0xFFFFF4EA);
+  /// 浮层、弹窗、输入与嵌套区域。
+  static const raised = Color(0xFF1C1C1E);
+  static const quick = raised;
+  static const input = raised;
 
   /// 评论输入框底色。
-  static const commentInput = Color(0xFFF5EFE8);
-  static const goldCard = Color(0xFFFFF4DF);
+  static const commentInput = raised;
+  static const goldCard = Color(0xFF2A2418);
 
-  /// 正文颜色。
-  static const cream = Color(0xFF1F1B16);
+  /// 正文颜色（与主文字同级）。
+  static const cream = Color(0xEBFFFFFF);
 
-  /// 主文字。
-  static const onSurface = Color(0xFF1F1B16);
+  /// 主文字 rgba(255,255,255,0.92)。
+  static const onSurface = Color(0xEBFFFFFF);
 
-  /// 次要文字。
-  static const muted = Color(0xFF8C837B);
+  /// 次要文字 rgba(255,255,255,0.64)。
+  static const muted = Color(0xA3FFFFFF);
 
-  /// 弱提示与时间。
-  static const subtle = Color(0xFFB3AAA1);
+  /// 弱提示与禁用 rgba(255,255,255,0.38)。
+  static const subtle = Color(0x61FFFFFF);
 
   /// 橙色强调文案。
   static const accent = blue;
 
-  /// 卡片描边。
-  static const border = Color(0xFFF0E4D6);
+  /// 统一卡片描边、分割线与输入框边框。
+  static const border = Color(0xFF1C1C1E);
 
   /// 玻璃面板描边。
-  static const glassBorder = Color(0x66FFFFFF);
+  static const glassBorder = Color(0x33FFFFFF);
+  static const glassSurfaceStart = Color(0xEB16161A);
+  static const glassSurfaceEnd = Color(0xD1101010);
 
-  /// 粉色角标。
-  static const badgePink = Color(0xFFFFE3EC);
-  static const badgePinkText = Color(0xFFFF6A8A);
+  /// 角标底与文字。
+  static const badgePink = Color(0x33FF6A8A);
+  static const badgePinkText = favorite;
 
   /// 封面锁定数量与视频遮罩。
-  static const overlayDark = Color(0x33000000);
+  static const overlayDark = Color(0x66000000);
 
   /// 封面集数胶囊。
-  static const badgeBeige = Color(0xFFFFF0DF);
+  static const badgeBeige = raised;
 
   /// 导航未选中。
-  static const navUnselected = muted;
+  static const navUnselected = textSecondary;
+
+  /// 首页内容角标。
+  static const badgeHot = Color(0xFFE5484D);
+  static const badgeNew = Color(0xFF3B82F6);
+  static const badgeAnime = Color(0xFF8B5CF6);
 
   /// 播放器次要文字。
-  static const playerMuted = Color(0xFFBBBBBB);
+  static const playerMuted = Color(0xA3FFFFFF);
 
   /// 播放器控件胶囊与圆形底色。
   static const playerOverlayPill = Color(0xB3000000);
+  static const refreshIndicatorSurface = Color(0x99000000);
+  static const cardBottomScrimStart = Color(0x00000000);
+  static const cardBottomScrimEnd = Color(0x40000000);
+
+  /// 进度条未激活轨道。
+  static const inactiveTrack = Color(0x24FFFFFF);
+
+  /// 横幅/封面底部渐变。
+  static const bannerScrimMid = Color(0x8A1A0C07);
+  static const bannerScrimEnd = Color(0xE6000000);
+
+  /// 票券虚线等主色描边。
+  static const primaryBorder = Color(0x66FF6B2C);
 
   static const outlineDark = border;
   static const outlineVariantDark = border;
diff --git a/lib/core/theme/app_dimens.dart b/lib/core/theme/app_dimens.dart
index 828b371..b4f4733 100644
--- a/lib/core/theme/app_dimens.dart
+++ b/lib/core/theme/app_dimens.dart
@@ -9,18 +9,20 @@ abstract final class AppDimens {
   static const double spaceXl = 24;
 
   static const double pageHorizontal = 16;
-  static const double cardRadius = 16;
-  static const double authCardRadius = 20;
+  static const double cardRadius = 12;
+  static const double authCardRadius = 12;
   static const double cardPadding = 16;
-  static const double innerRadius = 12;
+  static const double innerRadius = 10;
   static const double innerPadding = 12;
   static const double pillRadius = 999;
-  static const double glassSmallRadius = 16;
-  static const double glassRadius = 20;
-  static const double glassCardRadius = 20;
-  static const double buttonRadius = 999;
-  static const double coverRadius = 16;
-  static const double sheetRadius = 20;
+  static const double glassSmallRadius = 12;
+  static const double glassRadius = 12;
+  static const double glassCardRadius = 12;
+  static const double buttonRadius = 10;
+  static const double inputRadius = 10;
+  static const double chipRadius = 6;
+  static const double coverRadius = 12;
+  static const double sheetRadius = 12;
 
   static const double caption = 12;
   static const double emptyStateSubtitle = 12.5;
@@ -34,7 +36,8 @@ abstract final class AppDimens {
   static const double previewCardTitle = 13;
   static const double previewSectionTitle = 14;
   static const double chipFont = 10;
-  static const double navLabel = 12;
+  static const double navLabel = 13;
+  static const double navLabelGap = 5;
 
   static const double buttonHeight = 48;
   static const double primaryButtonHeight = 52;
@@ -45,13 +48,26 @@ abstract final class AppDimens {
   static const double tapTarget = 44;
   static const double contentHeaderHeight = 46;
 
-  static const double navHeight = 68;
-  static const double navIcon = 24;
+  static const double navHeight = 62;
+  static const double navIcon = 30;
   static const double progressHeight = 3;
   static const double progressRadius = 2;
   static const double progressLineHeight = 3;
+  static const double refreshIndicatorSize = 40;
+  static const double refreshIndicatorRadius = 20;
+  static const double refreshSpinnerSize = 20;
+  static const double refreshSpinnerStroke = 2;
+  static const double loadMoreIndicatorHeight = 40;
 
-  static const double searchHeight = 44;
+  static const double searchHeight = 40;
+  static const double searchRadius = 8;
+  static const double searchPlaceholderFont = 13;
+  static const double searchResultGap = 12;
+  static const double searchResultRowGap = 16;
+  static const double searchResultTitleGap = 8;
+  static const double searchResultMetaGap = 6;
+  static const double searchResultMetaFont = 12;
+  static const double searchResultTextExtent = 68;
   static const double navDot = 3;
   static const double glassBlur = 24;
 
@@ -61,13 +77,164 @@ abstract final class AppDimens {
 
   static const double watchPlaceholderHeight = 114;
   static const double heroBannerHeight = 240;
-  static const double heroBannerRadius = 20;
+  static const double heroBannerRadius = 12;
   static const double heroTitle = 28;
   static const double heroSubtitle = 14;
 
   static const double cardMeta = 12;
   static const double cardViews = 11;
   static const double cardTitle = 15;
-  static const double cardShadowBlur = 18;
-  static const double cardShadowY = 6;
+  static const double cardShadowBlur = 0;
+  static const double cardShadowY = 0;
+
+  /// 首页探索网格。
+  static const double feedPageHorizontal = 14;
+  static const double homeGridGap = 6;
+  static const double homeGridRowGap = 10;
+  static const double homeCardRadius = 6;
+  static const double cardCoverRadius = 8;
+  static const double homeCardPadding = 8;
+  static const double cardTitleFont = 15;
+  static const double cardTitleLineHeight = 1.3;
+  static const double cardViewsFont = 11;
+  static const double cardViewsIcon = 11;
+  static const double cardPlayCountFont = 12;
+  static const double cardPlayCountGap = 4;
+  static const double cardPlayCountBottom = 2;
+  static const double cardPlayCountRight = 6;
+  static const double cardPlayCountScrimHeight = 32;
+  static const double cardGenreRibbonHeight = 16;
+  static const double cardGenreRibbonLeftInset = 4;
+  static const double coverBadgeRibbonHorizontalPadding = 4;
+  static const double cardTagFont = 11;
+  static const double cardBadgeFont = 9;
+  static const double cardCoverTitleGap = 6;
+  static const double cardTitleTagGap = 6;
+  static const double skeletonBarHeight = 10;
+  static const double skeletonBarRadius = 4;
+  static const double skeletonBarGap = 4;
+  static const double skeletonTitleBarGap = 3;
+  static const double skeletonBodyExtent = 34;
+  static const double cardCoverAspectRatio = 3 / 4;
+  static const double homeCardBodyExtent = 84;
+  static const double homePrimaryTabFont = 18;
+  static const double homePrimaryTabSelectedFont = 20;
+  static const double homePrimaryRowHeight = 30;
+  static const Duration homePrimaryTabAnimationDuration = Duration(
+    milliseconds: 180,
+  );
+  static const double homeSecondaryTagFont = 15;
+  static const double homeSecondaryTagHeight = 26;
+  static const double homeSecondaryTagHorizontalPadding = 8;
+  static const double homeSecondaryTagRadius = 13;
+  static const Duration homeSecondaryTagAnimationDuration = Duration(
+    milliseconds: 150,
+  );
+  static const double homeSecondaryFilterGap = 6;
+  static const double homeSecondaryFilterVisualSize = 26;
+  static const double homeSecondaryFilterIcon = 16;
+  static const double homeSecondaryFilterStroke = 1.7;
+  static const double homePrimaryCategoryGap = 24;
+  static const double homeSecondaryTagGap = 10;
+  static const double homeSearchTopGap = 0;
+  static const double homeSearchPrimaryGap = 8;
+  static const double homePrimarySecondaryGap = 8;
+  static const double homeSecondaryGridGap = 10;
+  static const double homeHeaderIcon = 22;
+  static const double homeActionSlot = 40;
+  static const double homeActionIcon = 30;
+  static const double homeActionGap = 6;
+
+  /// 推荐分区。
+  static const double recommendSectionTitle = 17;
+  static const double recommendSectionSubtitle = 11;
+  static const double recommendSectionMore = 12;
+  static const double recommendRowHeight = 252;
+  static const double recommendCardWidth = 122;
+
+  /// 首页热播榜。
+  static const double rankingHeroTitle = 22;
+  static const double rankingHeroSubtitle = 11;
+  static const double rankingPodiumChampionWidth = 110;
+  static const double rankingPodiumChampionHeight = 146;
+  static const double rankingPodiumWidth = 92;
+  static const double rankingPodiumHeight = 122;
+  static const double rankingPodiumRadius = 10;
+  static const double rankingRowHeight = 96;
+  static const double rankingNumberWidth = 56;
+  static const double rankingNumberFont = 48;
+  static const double rankingCoverWidth = 60;
+  static const double rankingCoverHeight = 80;
+  static const double rankingCoverRadius = 6;
+
+  /// 全部短剧筛选与追剧双列。
+  static const double filterChipFont = 16;
+  static const double filterChipHeight = 32;
+  static const double filterChipRadius = 16;
+  static const double filterChipHorizontalPadding = 12;
+  static const double filterRowGap = 6;
+  static const double filterItemGap = 10;
+  static const double allDramasHorizontal = 12;
+  static const double allDramasGridGap = 6;
+  static const double allDramasGridRowGap = 12;
+  static const double allDramasFilterToGridGap = 12;
+  static const double followingHeaderHeight = 52;
+  static const double followingTabFont = 18;
+  static const double followingTabGap = 24;
+  static const double followingEditIconSize = 20;
+  static const double followingEditHitSize = 40;
+  static const double followingAddIconSize = 28;
+  static const double followingAddIconStroke = 1.5;
+  static const double followingGridGap = 6;
+  static const double followingGridRowGap = 12;
+  static const double followingCardTextExtent = 66;
+  static const double followingSubtitleFont = 12;
+  static const double followingSubtitleGap = 4;
+  static const double followingProgressHeight = 2;
+  static const double followingHistoryCoverWidth = 96;
+  static const double followingHistoryCoverHeight = 128;
+  static const double followingHistoryCoverRadius = 6;
+  static const double followingHistoryContentGap = 12;
+  static const double followingHistoryRowGap = 16;
+  static const double followingHistoryProgressHeight = 3;
+  static const double followingHistoryProgressRadius = 2;
+  static const double followingHistoryProgressGap = 8;
+  static const double followingHistoryLabelGap = 4;
+  static const double followingHistoryActionHeight = 28;
+  static const Duration followingTabAnimationDuration = Duration(
+    milliseconds: 180,
+  );
+  static const Duration followingPageAnimationDuration = Duration(
+    milliseconds: 220,
+  );
+
+  /// 「我的」页中性视觉。
+  static const double mineCardRadius = 16;
+  static const double mineSectionTitle = 15;
+  static const double mineAvatar = 56;
+  static const double mineUserName = 20;
+  static const double mineUserNameLineHeight = 1.15;
+  static const double mineUserNameUidGap = 2;
+  static const double mineUid = 12;
+  static const double mineUidRowHeight = 16;
+  static const double mineCopyIcon = 14;
+  static const double mineGridHorizontal = 14;
+  static const double mineGridRadius = 12;
+  static const double mineGridCellHeight = 96;
+  static const double mineGridIconSurface = 44;
+  static const double mineGridIcon = 22;
+  static const double mineGridLabel = 12;
+  static const double mineGridDividerWidth = 1;
+  static const double mineSectionTitleFont = 16;
+  static const double mineSectionLinkFont = 12;
+  static const double mineSectionGap = 20;
+  static const double mineContinueCardWidth = 96;
+  static const double mineContinueRowHeight = 168;
+  static const double mineContinueTitleFont = 13;
+  static const double mineContinueMetaFont = 11;
+  static const double mineStatsValueFont = 18;
+  static const double mineStatsLabelFont = 11;
+  static const double minePanelPadding = 12;
+  static const double mineMoreRowHeight = 52;
+  static const double mineMoreFont = 15;
 }
diff --git a/lib/core/theme/app_theme.dart b/lib/core/theme/app_theme.dart
index 9683d2a..0f1789a 100644
--- a/lib/core/theme/app_theme.dart
+++ b/lib/core/theme/app_theme.dart
@@ -6,46 +6,64 @@ import 'package:flutter/services.dart';
 import 'app_colors.dart';
 import 'app_dimens.dart';
 
-/// K28-S 浅色暖橙主题。
+/// 深色视觉主题（默认且唯一）。
 abstract final class AppTheme {
-  /// 页面顶部暖色到米白背景的渐变。
+  /// 页面背景：顶部暖黑、底部纯黑，避免旧深蓝渐变。
   static const LinearGradient pageGradient = LinearGradient(
     begin: Alignment.topCenter,
     end: Alignment.bottomCenter,
-    colors: [AppColors.surfaceTop, AppColors.ink],
-    stops: [0, 0.24],
+    colors: [
+      AppColors.mineGradientTop,
+      AppColors.mineGradientMiddle,
+      AppColors.mineGradientBottom,
+    ],
+    stops: [0, 0.4, 0.75],
   );
 
-  /// 卡片轻阴影。
+  /// 卡片阴影关闭，改用底色与分割线。
   static const BoxShadow cardShadow = BoxShadow(
     color: AppColors.cardShadow,
     blurRadius: AppDimens.cardShadowBlur,
     offset: Offset(0, AppDimens.cardShadowY),
   );
 
-  /// 全局浅色暖橙主题。
-  static ThemeData light() {
-    const scheme = ColorScheme.light(
+  static final BorderRadius _buttonRadius = BorderRadius.circular(
+    AppDimens.buttonRadius,
+  );
+  static final BorderRadius _cardRadius = BorderRadius.circular(
+    AppDimens.cardRadius,
+  );
+  static final BorderRadius _inputRadius = BorderRadius.circular(
+    AppDimens.inputRadius,
+  );
+
+  /// 全局深色主题。
+  static ThemeData dark() {
+    const scheme = ColorScheme.dark(
       primary: AppColors.blue,
       onPrimary: AppColors.onPrimary,
       secondary: AppColors.secondary,
-      onSecondary: AppColors.onPrimary,
-      primaryContainer: AppColors.surfaceTop,
+      onSecondary: AppColors.ink,
+      primaryContainer: AppColors.raised,
       onPrimaryContainer: AppColors.onSurface,
       secondaryContainer: AppColors.badgePink,
       onSecondaryContainer: AppColors.badgePinkText,
       surface: AppColors.ink,
       onSurface: AppColors.onSurface,
+      surfaceContainerHighest: AppColors.raised,
       outline: AppColors.border,
       outlineVariant: AppColors.border,
-      surfaceTint: AppColors.blue,
+      surfaceTint: AppColors.transparent,
       inversePrimary: AppColors.bluePressed,
+      error: AppColors.error,
+      onError: AppColors.onPrimary,
     );
     final base = ThemeData(
       useMaterial3: true,
-      brightness: Brightness.light,
+      brightness: Brightness.dark,
       colorScheme: scheme,
       scaffoldBackgroundColor: AppColors.ink,
+      canvasColor: AppColors.ink,
       fontFamily: 'PlusJakartaSans',
       progressIndicatorTheme: const ProgressIndicatorThemeData(
         color: AppColors.blue,
@@ -61,7 +79,23 @@ abstract final class AppTheme {
         unselectedLabelColor: AppColors.muted,
       ),
       textButtonTheme: TextButtonThemeData(
-        style: TextButton.styleFrom(foregroundColor: AppColors.blue),
+        style: TextButton.styleFrom(
+          foregroundColor: AppColors.primary,
+          shape: RoundedRectangleBorder(borderRadius: _buttonRadius),
+        ),
+      ),
+      elevatedButtonTheme: ElevatedButtonThemeData(
+        style: ButtonStyle(
+          backgroundColor: WidgetStateProperty.resolveWith(_buttonColor),
+          foregroundColor: const WidgetStatePropertyAll(AppColors.onPrimary),
+          elevation: const WidgetStatePropertyAll(0),
+          minimumSize: const WidgetStatePropertyAll(
+            Size(0, AppDimens.buttonHeight),
+          ),
+          shape: WidgetStatePropertyAll(
+            RoundedRectangleBorder(borderRadius: _buttonRadius),
+          ),
+        ),
       ),
       filledButtonTheme: FilledButtonThemeData(
         style: ButtonStyle(
@@ -70,47 +104,109 @@ abstract final class AppTheme {
           minimumSize: const WidgetStatePropertyAll(
             Size(0, AppDimens.buttonHeight),
           ),
-          shape: const WidgetStatePropertyAll(StadiumBorder()),
+          shape: WidgetStatePropertyAll(
+            RoundedRectangleBorder(borderRadius: _buttonRadius),
+          ),
         ),
       ),
       outlinedButtonTheme: OutlinedButtonThemeData(
         style: ButtonStyle(
-          foregroundColor: const WidgetStatePropertyAll(AppColors.blue),
+          foregroundColor: const WidgetStatePropertyAll(AppColors.textPrimary),
           minimumSize: const WidgetStatePropertyAll(
             Size(0, AppDimens.buttonHeight),
           ),
           side: const WidgetStatePropertyAll(
-            BorderSide(color: AppColors.border),
+            BorderSide(color: AppColors.mineOutline),
           ),
-          shape: const WidgetStatePropertyAll(StadiumBorder()),
+          shape: WidgetStatePropertyAll(
+            RoundedRectangleBorder(borderRadius: _buttonRadius),
+          ),
+        ),
+      ),
+      inputDecorationTheme: InputDecorationTheme(
+        filled: true,
+        fillColor: AppColors.input,
+        hintStyle: const TextStyle(color: AppColors.subtle),
+        labelStyle: const TextStyle(color: AppColors.muted),
+        border: OutlineInputBorder(
+          borderRadius: _inputRadius,
+          borderSide: const BorderSide(color: AppColors.border),
+        ),
+        enabledBorder: OutlineInputBorder(
+          borderRadius: _inputRadius,
+          borderSide: const BorderSide(color: AppColors.border),
+        ),
+        focusedBorder: OutlineInputBorder(
+          borderRadius: _inputRadius,
+          borderSide: const BorderSide(color: AppColors.blue),
+        ),
+      ),
+      chipTheme: ChipThemeData(
+        backgroundColor: AppColors.raised,
+        selectedColor: AppColors.blue.withValues(alpha: 0.22),
+        labelStyle: const TextStyle(color: AppColors.onSurface),
+        secondaryLabelStyle: const TextStyle(color: AppColors.muted),
+        side: const BorderSide(color: AppColors.border),
+        shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.circular(AppDimens.chipRadius),
         ),
       ),
       appBarTheme: const AppBarTheme(
-        backgroundColor: AppColors.ink,
-        foregroundColor: AppColors.onSurface,
+        backgroundColor: AppColors.transparent,
+        foregroundColor: AppColors.textPrimary,
         elevation: 0,
-        systemOverlayStyle: SystemUiOverlayStyle.dark,
+        scrolledUnderElevation: 0,
+        surfaceTintColor: AppColors.transparent,
+        systemOverlayStyle: SystemUiOverlayStyle.light,
         titleTextStyle: TextStyle(
-          color: AppColors.onSurface,
+          color: AppColors.textPrimary,
           fontFamily: 'Outfit',
           fontSize: AppDimens.pageTitle,
           fontWeight: FontWeight.w800,
         ),
       ),
-      iconTheme: const IconThemeData(color: AppColors.onSurface),
-      dividerTheme: const DividerThemeData(color: AppColors.border),
-      cardTheme: const CardThemeData(
+      iconTheme: const IconThemeData(color: AppColors.textPrimary),
+      dividerTheme: const DividerThemeData(
+        color: AppColors.border,
+        thickness: 1,
+        space: 1,
+      ),
+      cardTheme: CardThemeData(
         color: AppColors.card,
         elevation: 0,
+        shadowColor: AppColors.transparent,
+        surfaceTintColor: AppColors.transparent,
         shape: RoundedRectangleBorder(
-          borderRadius: BorderRadius.all(Radius.circular(AppDimens.cardRadius)),
-          side: BorderSide(color: AppColors.border),
+          borderRadius: _cardRadius,
+          side: const BorderSide(color: AppColors.border),
         ),
       ),
+      dialogTheme: DialogThemeData(
+        backgroundColor: AppColors.raised,
+        surfaceTintColor: AppColors.transparent,
+        shape: RoundedRectangleBorder(borderRadius: _cardRadius),
+        titleTextStyle: const TextStyle(
+          color: AppColors.onSurface,
+          fontFamily: 'Outfit',
+          fontSize: AppDimens.sectionTitle,
+          fontWeight: FontWeight.w700,
+        ),
+        contentTextStyle: const TextStyle(
+          color: AppColors.muted,
+          fontSize: AppDimens.body,
+        ),
+      ),
+      bottomNavigationBarTheme: const BottomNavigationBarThemeData(
+        backgroundColor: AppColors.navBackground,
+        selectedItemColor: AppColors.navSelected,
+        unselectedItemColor: AppColors.navUnselected,
+        elevation: 0,
+        type: BottomNavigationBarType.fixed,
+      ),
       bottomSheetTheme: const BottomSheetThemeData(
-        backgroundColor: Colors.transparent,
-        modalBackgroundColor: Colors.transparent,
-        surfaceTintColor: Colors.transparent,
+        backgroundColor: AppColors.transparent,
+        modalBackgroundColor: AppColors.transparent,
+        surfaceTintColor: AppColors.transparent,
       ),
       switchTheme: SwitchThemeData(
         thumbColor: WidgetStateProperty.resolveWith(
@@ -124,8 +220,13 @@ abstract final class AppTheme {
         ),
       ),
       snackBarTheme: const SnackBarThemeData(
-        backgroundColor: AppColors.onSurface,
-        contentTextStyle: TextStyle(color: AppColors.onPrimary),
+        backgroundColor: AppColors.raised,
+        contentTextStyle: TextStyle(color: AppColors.onSurface),
+        actionTextColor: AppColors.secondary,
+      ),
+      listTileTheme: const ListTileThemeData(
+        iconColor: AppColors.onSurface,
+        textColor: AppColors.onSurface,
       ),
     );
     final textTheme = base.textTheme
@@ -142,10 +243,29 @@ abstract final class AppTheme {
           headlineMedium: _display(base.textTheme.headlineMedium),
           headlineSmall: _display(base.textTheme.headlineSmall),
           titleLarge: _display(base.textTheme.titleLarge),
+          bodyLarge: base.textTheme.bodyLarge?.copyWith(
+            color: AppColors.onSurface,
+          ),
+          bodyMedium: base.textTheme.bodyMedium?.copyWith(
+            color: AppColors.onSurface,
+          ),
+          bodySmall: base.textTheme.bodySmall?.copyWith(color: AppColors.muted),
+          labelLarge: base.textTheme.labelLarge?.copyWith(
+            color: AppColors.onSurface,
+          ),
+          labelMedium: base.textTheme.labelMedium?.copyWith(
+            color: AppColors.muted,
+          ),
+          labelSmall: base.textTheme.labelSmall?.copyWith(
+            color: AppColors.subtle,
+          ),
         );
     return base.copyWith(textTheme: textTheme);
   }
 
+  /// 兼容旧调用点，统一落到深色主题。
+  static ThemeData light() => dark();
+
   static TextStyle? _display(TextStyle? style) =>
       style?.copyWith(fontFamily: 'Outfit', color: AppColors.onSurface);
 
diff --git a/lib/core/widgets/app_bottom_nav.dart b/lib/core/widgets/app_bottom_nav.dart
index 102feb7..fed7576 100644
--- a/lib/core/widgets/app_bottom_nav.dart
+++ b/lib/core/widgets/app_bottom_nav.dart
@@ -1,7 +1,5 @@
 // Author: fruit.com.cn
 
-import 'dart:ui';
-
 import 'package:flutter/material.dart';
 
 import '../theme/app_colors.dart';
@@ -16,63 +14,46 @@ class AppBottomNavItem {
     required this.label,
     required this.onTap,
     this.selected = false,
+    this.assetPath,
+    this.selectedAssetPath,
   });
 
   final Key tabKey;
   final IconData icon;
   final IconData selectedIcon;
+  final String? assetPath;
+  final String? selectedAssetPath;
   final String label;
   final VoidCallback onTap;
   final bool selected;
 }
 
-/// 四槽底部导航：首页 feed 用深色样式，其它页面保持浅色暖橙风格。
+/// 四槽底部导航：纯黑背景，白色选中态，灰色未选中态。
 class AppBottomNav extends StatelessWidget {
-  const AppBottomNav({
-    super.key,
-    required this.items,
-    this.backgroundColor = AppColors.bar,
-    this.barKey,
-    this.dark = false,
-  });
+  const AppBottomNav({super.key, required this.items, this.barKey});
 
   final List<AppBottomNavItem> items;
-  final Color backgroundColor;
   final Key? barKey;
-  final bool dark;
 
   @override
   Widget build(BuildContext context) {
     final bar = Container(
       key: barKey,
       height: AppDimens.navHeight,
-      decoration: BoxDecoration(
-        color: dark ? Colors.black : backgroundColor.withValues(alpha: 0.95),
-        border: Border(
-          top: BorderSide(color: dark ? Colors.white12 : AppColors.border),
-        ),
-      ),
+      color: AppColors.navBackground,
       child: Row(
         children: [
           for (final item in items)
             _NavDestination(
               item: item,
-              unselectedColor: dark ? Colors.white70 : AppColors.navUnselected,
+              unselectedColor: AppColors.navUnselected,
             ),
         ],
       ),
     );
-    if (dark) {
-      return ColoredBox(
-        color: Colors.black,
-        child: SafeArea(top: false, child: bar),
-      );
-    }
-    return ClipRect(
-      child: BackdropFilter(
-        filter: ImageFilter.blur(sigmaX: 20, sigmaY: 20),
-        child: SafeArea(top: false, child: bar),
-      ),
+    return ColoredBox(
+      color: AppColors.navBackground,
+      child: SafeArea(top: false, child: bar),
     );
   }
 }
@@ -84,45 +65,69 @@ class _NavDestination extends StatelessWidget {
   final Color unselectedColor;
 
   @override
-  Widget build(BuildContext context) => Expanded(
-    child: Semantics(
-      button: true,
-      selected: item.selected,
-      label: item.label,
-      child: InkWell(
-        key: item.tabKey,
-        onTap: item.onTap,
-        child: ConstrainedBox(
-          constraints: const BoxConstraints(minHeight: AppDimens.navHeight),
-          child: Column(
-            mainAxisAlignment: MainAxisAlignment.center,
-            children: [
-              AnimatedScale(
-                duration: const Duration(milliseconds: 160),
-                curve: Curves.easeOut,
-                scale: item.selected ? 1 : 0.96,
-                child: Icon(
-                  item.selected ? item.selectedIcon : item.icon,
-                  size: AppDimens.navIcon,
-                  color: item.selected ? AppColors.blue : unselectedColor,
+  Widget build(BuildContext context) {
+    final color = item.selected ? AppColors.navSelected : unselectedColor;
+    final fallbackIcon = item.selected ? item.selectedIcon : item.icon;
+    final assetPath = item.selected
+        ? item.selectedAssetPath ?? item.assetPath
+        : item.assetPath;
+    return Expanded(
+      child: Semantics(
+        button: true,
+        selected: item.selected,
+        label: item.label,
+        child: InkWell(
+          key: item.tabKey,
+          onTap: item.onTap,
+          child: ConstrainedBox(
+            constraints: const BoxConstraints(minHeight: AppDimens.navHeight),
+            child: Column(
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: [
+                AnimatedScale(
+                  duration: const Duration(milliseconds: 160),
+                  curve: Curves.easeOut,
+                  scale: item.selected ? 1 : 0.96,
+                  child: assetPath == null
+                      ? Icon(
+                          fallbackIcon,
+                          size: AppDimens.navIcon,
+                          color: color,
+                        )
+                      : ColorFiltered(
+                          colorFilter: ColorFilter.mode(color, BlendMode.srcIn),
+                          child: Image.asset(
+                            assetPath,
+                            width: AppDimens.navIcon,
+                            height: AppDimens.navIcon,
+                            fit: BoxFit.contain,
+                            errorBuilder: (_, _, _) => Icon(
+                              fallbackIcon,
+                              size: AppDimens.navIcon,
+                              color: color,
+                            ),
+                          ),
+                        ),
                 ),
-              ),
-              const SizedBox(height: 3),
-              Text(
-                item.label,
-                maxLines: 1,
-                overflow: TextOverflow.ellipsis,
-                style: TextStyle(
-                  fontSize: AppDimens.navLabel,
-                  fontWeight: item.selected ? FontWeight.w700 : FontWeight.w500,
-                  color: item.selected ? AppColors.blue : unselectedColor,
-                  letterSpacing: 0,
+                const SizedBox(height: AppDimens.navLabelGap),
+                Text(
+                  item.label,
+                  maxLines: 1,
+                  overflow: TextOverflow.ellipsis,
+                  style: TextStyle(
+                    fontSize: AppDimens.navLabel,
+                    fontWeight: item.selected
+                        ? FontWeight.w600
+                        : FontWeight.w400,
+                    color: color,
+                    letterSpacing: 0,
+                  ),
                 ),
-              ),
-            ],
+              ],
+            ),
           ),
         ),
       ),
-    ),
-  );
+    );
+  }
 }
diff --git a/lib/core/widgets/app_pull_to_refresh.dart b/lib/core/widgets/app_pull_to_refresh.dart
index 1961981..86aa8cc 100644
--- a/lib/core/widgets/app_pull_to_refresh.dart
+++ b/lib/core/widgets/app_pull_to_refresh.dart
@@ -4,19 +4,18 @@ import 'dart:async';
 
 import 'package:flutter/material.dart';
 
-import '../../l10n/app_localizations.dart';
 import '../theme/app_colors.dart';
+import '../theme/app_dimens.dart';
 
 const double _maxPullDistance = 96;
 const double _refreshThreshold = 56;
 const double _indicatorHeight = 56;
-const double _indicatorMaxOffset = 10;
-const Duration _arrowTurnDuration = Duration(milliseconds: 160);
+const double _indicatorDisplacement = 40;
 const Duration _settleDuration = Duration(milliseconds: 200);
 
 enum _PullState { idle, pull, armed, refreshing }
 
-/// 带文字状态提示的下拉刷新容器，指示区悬浮在内容上方。
+/// 下拉刷新容器，指示区只显示统一的白色加载圈。
 class AppPullToRefresh extends StatefulWidget {
   const AppPullToRefresh({
     super.key,
@@ -26,7 +25,7 @@ class AppPullToRefresh extends StatefulWidget {
   });
 
   static const AlwaysScrollableScrollPhysics physics =
-      AlwaysScrollableScrollPhysics(parent: ClampingScrollPhysics());
+      AlwaysScrollableScrollPhysics(parent: BouncingScrollPhysics());
 
   final Widget child;
   final Future<void> Function() onRefresh;
@@ -146,10 +145,13 @@ class _AppPullToRefreshState extends State<AppPullToRefresh>
       onNotification: _onScroll,
       child: AnimatedBuilder(
         animation: _offsetController,
-        child: Listener(
-          onPointerUp: (_) => _release(),
-          onPointerCancel: (_) => _release(),
-          child: widget.child,
+        child: ScrollConfiguration(
+          behavior: const _NoScrollbarScrollBehavior(),
+          child: Listener(
+            onPointerUp: (_) => _release(),
+            onPointerCancel: (_) => _release(),
+            child: widget.child,
+          ),
         ),
         builder: (context, child) {
           final offset = _offsetController.value;
@@ -160,7 +162,7 @@ class _AppPullToRefreshState extends State<AppPullToRefresh>
                 key: const Key('pull-refresh-content'),
                 offset: Offset(0, offset),
                 child: IgnorePointer(
-                  ignoring: _refreshing || _retracting,
+                  ignoring: offset > 0 || _refreshing || _retracting,
                   child: child,
                 ),
               ),
@@ -169,7 +171,7 @@ class _AppPullToRefreshState extends State<AppPullToRefresh>
                   top: widget.edgeOffset,
                   left: 0,
                   right: 0,
-                  child: IgnorePointer(child: _indicatorLayer(context, offset)),
+                  child: IgnorePointer(child: _indicatorLayer(offset)),
                 ),
             ],
           );
@@ -178,19 +180,19 @@ class _AppPullToRefreshState extends State<AppPullToRefresh>
     );
   }
 
-  Widget _indicatorLayer(BuildContext context, double offset) {
+  Widget _indicatorLayer(double offset) {
     final progress = (offset / _refreshThreshold).clamp(0.0, 1.0);
     return SizedBox(
       height: _indicatorHeight,
       child: Opacity(
         opacity: progress,
         child: Transform.translate(
-          offset: Offset(0, _indicatorMaxOffset * progress),
+          offset: Offset(0, _indicatorDisplacement * progress),
           child: Align(
             alignment: Alignment.topCenter,
             child: Padding(
               padding: const EdgeInsets.only(top: 8),
-              child: _indicator(context),
+              child: _indicator(),
             ),
           ),
         ),
@@ -198,50 +200,36 @@ class _AppPullToRefreshState extends State<AppPullToRefresh>
     );
   }
 
-  Widget _indicator(BuildContext context) {
-    final l10n = AppLocalizations.of(context)!;
-    if (_state == _PullState.refreshing) {
-      return _label(
-        const SizedBox.square(
-          dimension: 18,
-          child: CircularProgressIndicator(
-            strokeWidth: 2,
-            color: AppColors.blue,
-          ),
-        ),
-        l10n.refreshingLabel,
-      );
-    }
-    final armed = _state == _PullState.armed;
-    return _label(
-      AnimatedRotation(
-        turns: armed ? 0.5 : 0,
-        duration: _arrowTurnDuration,
-        child: Icon(
-          Icons.arrow_downward_rounded,
-          size: 18,
-          color: AppColors.blue,
+  Widget _indicator() {
+    return Container(
+      key: const Key('pull-refresh-indicator'),
+      width: AppDimens.refreshIndicatorSize,
+      height: AppDimens.refreshIndicatorSize,
+      padding: const EdgeInsets.all(
+        (AppDimens.refreshIndicatorSize - AppDimens.refreshSpinnerSize) / 2,
+      ),
+      decoration: BoxDecoration(
+        color: AppColors.refreshIndicatorSurface,
+        borderRadius: BorderRadius.circular(AppDimens.refreshIndicatorRadius),
+      ),
+      child: const SizedBox.square(
+        dimension: AppDimens.refreshSpinnerSize,
+        child: CircularProgressIndicator(
+          strokeWidth: AppDimens.refreshSpinnerStroke,
+          color: AppColors.textPrimary,
         ),
       ),
-      armed ? l10n.releaseToRefresh : l10n.pullToRefresh,
-    );
-  }
-
-  Widget _label(Widget icon, String text) {
-    return Row(
-      mainAxisAlignment: MainAxisAlignment.center,
-      children: [
-        icon,
-        const SizedBox(width: 6),
-        Text(
-          text,
-          style: const TextStyle(
-            color: AppColors.blue,
-            fontSize: 13,
-            fontWeight: FontWeight.w600,
-          ),
-        ),
-      ],
     );
   }
 }
+
+class _NoScrollbarScrollBehavior extends MaterialScrollBehavior {
+  const _NoScrollbarScrollBehavior();
+
+  @override
+  Widget buildScrollbar(
+    BuildContext context,
+    Widget child,
+    ScrollableDetails details,
+  ) => child;
+}
diff --git a/lib/core/widgets/app_root_tab.dart b/lib/core/widgets/app_root_tab.dart
new file mode 100644
index 0000000..c9f0c96
--- /dev/null
+++ b/lib/core/widgets/app_root_tab.dart
@@ -0,0 +1,87 @@
+// Author: fruit.com.cn
+
+import 'package:flutter/material.dart';
+
+import '../../l10n/app_localizations.dart';
+import 'app_bottom_nav.dart';
+
+/// 客户端根导航的固定顺序。
+enum AppRootTab {
+  home(
+    assetPath: 'assets/icon/film_reel.png',
+    selectedAssetPath: 'assets/icon/film_reel_filled.png',
+  ),
+  recommend(),
+  following(),
+  mine();
+
+  const AppRootTab({this.assetPath, this.selectedAssetPath});
+
+  final String? assetPath;
+  final String? selectedAssetPath;
+}
+
+extension AppRootTabUi on AppRootTab {
+  Key get tabKey => switch (this) {
+    AppRootTab.home => const Key('tab-home'),
+    AppRootTab.recommend => const Key('tab-recommend'),
+    AppRootTab.following => const Key('tab-follow'),
+    AppRootTab.mine => const Key('tab-mine'),
+  };
+
+  IconData get icon => switch (this) {
+    AppRootTab.home => Icons.theaters_outlined,
+    AppRootTab.recommend => Icons.smart_display_outlined,
+    AppRootTab.following => Icons.bookmark_border_rounded,
+    AppRootTab.mine => Icons.person_outline_rounded,
+  };
+
+  IconData get selectedIcon => switch (this) {
+    AppRootTab.home => Icons.theaters,
+    AppRootTab.recommend => Icons.smart_display_rounded,
+    AppRootTab.following => Icons.bookmark_rounded,
+    AppRootTab.mine => Icons.person_rounded,
+  };
+
+  String label(AppLocalizations l10n) => switch (this) {
+    AppRootTab.home => l10n.homeTab,
+    AppRootTab.recommend => l10n.recommendedTab,
+    AppRootTab.following => l10n.followingTab,
+    AppRootTab.mine => l10n.myTab,
+  };
+}
+
+/// 根导航唯一入口，确保四个主页面使用完全一致的底栏配置。
+class AppRootBottomNav extends StatelessWidget {
+  const AppRootBottomNav({
+    super.key,
+    required this.selected,
+    required this.onSelected,
+    this.barKey,
+  });
+
+  final AppRootTab selected;
+  final ValueChanged<AppRootTab> onSelected;
+  final Key? barKey;
+
+  @override
+  Widget build(BuildContext context) {
+    final l10n = AppLocalizations.of(context)!;
+    return AppBottomNav(
+      barKey: barKey,
+      items: [
+        for (final tab in AppRootTab.values)
+          AppBottomNavItem(
+            tabKey: tab.tabKey,
+            icon: tab.icon,
+            selectedIcon: tab.selectedIcon,
+            assetPath: tab.assetPath,
+            selectedAssetPath: tab.selectedAssetPath,
+            label: tab.label(l10n),
+            selected: tab == selected,
+            onTap: () => onSelected(tab),
+          ),
+      ],
+    );
+  }
+}
diff --git a/lib/core/widgets/auth_gate.dart b/lib/core/widgets/auth_gate.dart
index 6d5e079..9c78b84 100644
--- a/lib/core/widgets/auth_gate.dart
+++ b/lib/core/widgets/auth_gate.dart
@@ -37,7 +37,7 @@ Future<bool> ensureSignedIn(BuildContext context) async {
             Text(
               l10n.authGateTitle,
               style: const TextStyle(
-                color: Colors.white,
+                color: AppColors.onSurface,
                 fontSize: 16,
                 fontWeight: FontWeight.w800,
               ),
@@ -98,7 +98,7 @@ class AuthGatePanel extends StatelessWidget {
               l10n.authGateTitle,
               textAlign: TextAlign.center,
               style: const TextStyle(
-                color: Colors.white,
+                color: AppColors.onSurface,
                 fontSize: 18,
                 fontWeight: FontWeight.w800,
               ),
diff --git a/lib/core/widgets/catalog_endpoint_editor.dart b/lib/core/widgets/catalog_endpoint_editor.dart
index e5922ba..1016672 100644
--- a/lib/core/widgets/catalog_endpoint_editor.dart
+++ b/lib/core/widgets/catalog_endpoint_editor.dart
@@ -5,6 +5,7 @@ import 'package:flutter/material.dart';
 
 import '../config/app_config.dart';
 import '../config/server_endpoint.dart';
+import '../theme/app_colors.dart';
 
 const String _title = '设置服务地址';
 const String _save = '保存';
@@ -94,7 +95,7 @@ class _CatalogEndpointDialogState extends State<_CatalogEndpointDialog> {
             const Text(
               _localNetworkHint,
               key: Key('catalog-debug-endpoint-hint'),
-              style: TextStyle(fontSize: 12, color: Colors.grey),
+              style: TextStyle(fontSize: 12, color: AppColors.muted),
             ),
             if (_error != null) ...[
               const SizedBox(height: 8),
diff --git a/lib/core/widgets/centered_toast.dart b/lib/core/widgets/centered_toast.dart
new file mode 100644
index 0000000..23f9e10
--- /dev/null
+++ b/lib/core/widgets/centered_toast.dart
@@ -0,0 +1,128 @@
+// Author: fruit.com.cn
+
+import 'dart:async';
+
+import 'package:flutter/material.dart';
+
+import '../theme/app_colors.dart';
+
+const Key _toastKey = Key('centered-toast');
+const Duration _fadeDuration = Duration(milliseconds: 200);
+const Duration _visibleDuration = Duration(seconds: 2);
+const double _toastRadius = 12;
+const double _toastMaxWidth = 320;
+const double _toastHorizontalInset = 20;
+const double _toastVerticalInset = 12;
+const TextStyle _toastTextStyle = TextStyle(
+  color: AppColors.onSurface,
+  fontSize: 14,
+  height: 1.4,
+  fontWeight: FontWeight.w500,
+);
+const EdgeInsets _toastPadding = EdgeInsets.symmetric(
+  horizontal: _toastHorizontalInset,
+  vertical: _toastVerticalInset,
+);
+
+OverlayEntry? _activeToast;
+
+/// Shows a lightweight centered message and replaces any active toast.
+void showCenteredToast(BuildContext context, String message) {
+  _removeActiveToast();
+  final overlay = Overlay.of(context, rootOverlay: true);
+  late final OverlayEntry entry;
+  entry = OverlayEntry(
+    builder: (_) => _CenteredToast(
+      message: message,
+      onDismissed: () {
+        if (!identical(_activeToast, entry)) return;
+        _activeToast = null;
+        if (entry.mounted) entry.remove();
+      },
+    ),
+  );
+  _activeToast = entry;
+  overlay.insert(entry);
+}
+
+void _removeActiveToast() {
+  final entry = _activeToast;
+  _activeToast = null;
+  if (entry != null && entry.mounted) entry.remove();
+}
+
+class _CenteredToast extends StatefulWidget {
+  const _CenteredToast({required this.message, required this.onDismissed});
+
+  final String message;
+  final VoidCallback onDismissed;
+
+  @override
+  State<_CenteredToast> createState() => _CenteredToastState();
+}
+
+class _CenteredToastState extends State<_CenteredToast>
+    with SingleTickerProviderStateMixin {
+  late final AnimationController _opacity = AnimationController(
+    vsync: this,
+    duration: _fadeDuration,
+  );
+  Timer? _dismissTimer;
+
+  @override
+  void initState() {
+    super.initState();
+    _opacity.forward();
+    _dismissTimer = Timer(_visibleDuration, _dismiss);
+  }
+
+  Future<void> _dismiss() async {
+    try {
+      await _opacity.reverse();
+    } on TickerCanceled {
+      return;
+    }
+    if (mounted) widget.onDismissed();
+  }
+
+  @override
+  void dispose() {
+    _dismissTimer?.cancel();
+    _opacity.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Positioned.fill(
+      child: IgnorePointer(
+        child: Center(
+          child: FadeTransition(
+            opacity: CurvedAnimation(
+              parent: _opacity,
+              curve: Curves.easeOutCubic,
+            ),
+            child: Material(
+              type: MaterialType.transparency,
+              child: Container(
+                key: _toastKey,
+                constraints: const BoxConstraints(maxWidth: _toastMaxWidth),
+                padding: _toastPadding,
+                decoration: BoxDecoration(
+                  color: AppColors.raised,
+                  borderRadius: BorderRadius.circular(_toastRadius),
+                  border: Border.all(color: AppColors.border),
+                ),
+                child: Text(
+                  widget.message,
+                  textAlign: TextAlign.center,
+                  style: _toastTextStyle,
+                ),
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
diff --git a/lib/core/widgets/cover_play_count.dart b/lib/core/widgets/cover_play_count.dart
new file mode 100644
index 0000000..622fb37
--- /dev/null
+++ b/lib/core/widgets/cover_play_count.dart
@@ -0,0 +1,60 @@
+// Author: fruit.com.cn
+
+import 'package:flutter/material.dart';
+
+import '../formatting/count_format.dart';
+import '../theme/app_colors.dart';
+import '../theme/app_dimens.dart';
+
+class CoverPlayCount extends StatelessWidget {
+  const CoverPlayCount({super.key, required this.count});
+
+  final int count;
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      mainAxisSize: MainAxisSize.min,
+      crossAxisAlignment: CrossAxisAlignment.center,
+      children: [
+        const Icon(
+          Icons.local_fire_department_rounded,
+          color: AppColors.textPrimary,
+          size: AppDimens.cardViewsIcon,
+        ),
+        const SizedBox(width: AppDimens.cardPlayCountGap),
+        Text(
+          formatPlayCount(count),
+          style: const TextStyle(
+            color: AppColors.textPrimary,
+            fontSize: AppDimens.cardPlayCountFont,
+            fontWeight: FontWeight.w400,
+          ),
+        ),
+      ],
+    );
+  }
+}
+
+class CoverBottomScrim extends StatelessWidget {
+  const CoverBottomScrim({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return const SizedBox(
+      height: AppDimens.cardPlayCountScrimHeight,
+      child: DecoratedBox(
+        decoration: BoxDecoration(
+          gradient: LinearGradient(
+            begin: Alignment.topCenter,
+            end: Alignment.bottomCenter,
+            colors: [
+              AppColors.cardBottomScrimStart,
+              AppColors.cardBottomScrimEnd,
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}
diff --git a/lib/core/widgets/drama_cover_badge_ribbon.dart b/lib/core/widgets/drama_cover_badge_ribbon.dart
new file mode 100644
index 0000000..f69d09f
--- /dev/null
+++ b/lib/core/widgets/drama_cover_badge_ribbon.dart
@@ -0,0 +1,66 @@
+// Author: fruit.com.cn
+
+import 'package:flutter/material.dart';
+
+import '../theme/app_colors.dart';
+import '../theme/app_dimens.dart';
+
+/// 封面右上角的斜边状态角标。
+class DramaCoverBadgeRibbon extends StatelessWidget {
+  const DramaCoverBadgeRibbon({
+    super.key,
+    required this.label,
+    required this.color,
+    required this.keyPrefix,
+  });
+
+  final String label;
+  final Color color;
+  final String keyPrefix;
+
+  @override
+  Widget build(BuildContext context) {
+    return ClipPath(
+      key: Key('drama-cover-badge-ribbon-$keyPrefix'),
+      clipper: const _SlantedRibbonClipper(),
+      child: Container(
+        height: AppDimens.cardGenreRibbonHeight,
+        padding: const EdgeInsets.only(
+          left:
+              AppDimens.coverBadgeRibbonHorizontalPadding +
+              AppDimens.cardGenreRibbonLeftInset,
+          right: AppDimens.coverBadgeRibbonHorizontalPadding,
+        ),
+        alignment: Alignment.center,
+        color: color,
+        child: Text(
+          label,
+          maxLines: 1,
+          overflow: TextOverflow.ellipsis,
+          style: const TextStyle(
+            color: AppColors.textPrimary,
+            fontSize: AppDimens.cardBadgeFont,
+            fontWeight: FontWeight.w600,
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class _SlantedRibbonClipper extends CustomClipper<Path> {
+  const _SlantedRibbonClipper();
+
+  @override
+  Path getClip(Size size) {
+    return Path()
+      ..moveTo(AppDimens.cardGenreRibbonLeftInset, 0)
+      ..lineTo(size.width, 0)
+      ..lineTo(size.width, size.height)
+      ..lineTo(0, size.height)
+      ..close();
+  }
+
+  @override
+  bool shouldReclip(_SlantedRibbonClipper oldClipper) => false;
+}
diff --git a/lib/core/widgets/drama_grid_skeleton.dart b/lib/core/widgets/drama_grid_skeleton.dart
new file mode 100644
index 0000000..9fbc07c
--- /dev/null
+++ b/lib/core/widgets/drama_grid_skeleton.dart
@@ -0,0 +1,96 @@
+// Author: fruit.com.cn
+
+import 'package:flutter/material.dart';
+
+import '../theme/app_colors.dart';
+import '../theme/app_dimens.dart';
+
+class DramaGridSkeleton extends StatelessWidget {
+  const DramaGridSkeleton({
+    super.key,
+    required this.columns,
+    required this.horizontalPadding,
+    required this.crossAxisSpacing,
+    required this.mainAxisSpacing,
+    this.itemCount = 9,
+    this.physics = const NeverScrollableScrollPhysics(),
+  });
+
+  final int columns;
+  final double horizontalPadding;
+  final double crossAxisSpacing;
+  final double mainAxisSpacing;
+  final int itemCount;
+  final ScrollPhysics physics;
+
+  @override
+  Widget build(BuildContext context) {
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        final itemWidth =
+            (constraints.maxWidth -
+                horizontalPadding * 2 -
+                crossAxisSpacing * (columns - 1)) /
+            columns;
+        final itemExtent =
+            itemWidth / AppDimens.cardCoverAspectRatio +
+            AppDimens.skeletonBodyExtent;
+        return GridView.builder(
+          physics: physics,
+          padding: EdgeInsets.fromLTRB(
+            horizontalPadding,
+            AppDimens.spaceMd,
+            horizontalPadding,
+            AppDimens.spaceXl,
+          ),
+          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+            crossAxisCount: columns,
+            crossAxisSpacing: crossAxisSpacing,
+            mainAxisSpacing: mainAxisSpacing,
+            mainAxisExtent: itemExtent,
+          ),
+          itemCount: itemCount,
+          itemBuilder: (context, index) => Column(
+            key: Key('drama-grid-skeleton-$index'),
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              AspectRatio(
+                aspectRatio: AppDimens.cardCoverAspectRatio,
+                child: Container(
+                  decoration: BoxDecoration(
+                    color: AppColors.skeletonSurface,
+                    borderRadius: BorderRadius.circular(
+                      AppDimens.homeCardRadius,
+                    ),
+                  ),
+                ),
+              ),
+              const SizedBox(height: AppDimens.cardCoverTitleGap),
+              const _SkeletonBar(),
+              const SizedBox(height: AppDimens.skeletonTitleBarGap),
+              const FractionallySizedBox(
+                widthFactor: 0.62,
+                child: _SkeletonBar(),
+              ),
+            ],
+          ),
+        );
+      },
+    );
+  }
+}
+
+class _SkeletonBar extends StatelessWidget {
+  const _SkeletonBar();
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      height: AppDimens.skeletonBarHeight,
+      decoration: BoxDecoration(
+        color: AppColors.skeletonSurface,
+        borderRadius: BorderRadius.circular(AppDimens.skeletonBarRadius),
+      ),
+    );
+  }
+}
diff --git a/lib/core/widgets/empty_state.dart b/lib/core/widgets/empty_state.dart
index 75b3ca3..d650459 100644
--- a/lib/core/widgets/empty_state.dart
+++ b/lib/core/widgets/empty_state.dart
@@ -5,8 +5,8 @@ import 'package:flutter/material.dart';
 import '../theme/app_colors.dart';
 import '../theme/app_dimens.dart';
 
-const double _regularIconSize = 48;
-const double _compactIconSize = 32;
+const double _regularIconSize = 72;
+const double _compactIconSize = 44;
 const double _maxContentWidth = 260;
 const double _regularHorizontal = 24;
 const double _regularVertical = 28;
@@ -78,7 +78,7 @@ class EmptyState extends StatelessWidget {
   }
 }
 
-/// 空状态只留一枚图标，不加水印底和描边。
+/// 空列表只放一枚大图标，不画线框，也不铺底色。
 class _EmptyMark extends StatelessWidget {
   const _EmptyMark({required this.icon, required this.compact});
 
@@ -87,12 +87,11 @@ class _EmptyMark extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final dark = Theme.of(context).brightness == Brightness.dark;
     return Icon(
       icon,
       key: const Key('empty-state-icon'),
       size: compact ? _compactIconSize : _regularIconSize,
-      color: dark ? AppColors.gold : AppColors.blue,
+      color: AppColors.subtle,
     );
   }
 }
diff --git a/lib/core/widgets/glass_panel.dart b/lib/core/widgets/glass_panel.dart
index 1edd1fb..c790938 100644
--- a/lib/core/widgets/glass_panel.dart
+++ b/lib/core/widgets/glass_panel.dart
@@ -7,7 +7,7 @@ import 'package:flutter/material.dart';
 import '../theme/app_colors.dart';
 import '../theme/app_dimens.dart';
 
-/// 首页信息卡与浮层控件使用的浅色玻璃面板。
+/// 首页信息卡与浮层控件使用的深色玻璃面板。
 class GlassPanel extends StatelessWidget {
   const GlassPanel({
     super.key,
@@ -38,7 +38,7 @@ class GlassPanel extends StatelessWidget {
             const LinearGradient(
               begin: Alignment.topLeft,
               end: Alignment.bottomRight,
-              colors: [Color(0xE6FFFFFF), Color(0xB3FFFDFB)],
+              colors: [AppColors.glassSurfaceStart, AppColors.glassSurfaceEnd],
             ),
       ),
       child: Padding(padding: padding ?? EdgeInsets.zero, child: child),
diff --git a/lib/core/widgets/paged_list_footer.dart b/lib/core/widgets/paged_list_footer.dart
new file mode 100644
index 0000000..ab47026
--- /dev/null
+++ b/lib/core/widgets/paged_list_footer.dart
@@ -0,0 +1,63 @@
+// Author: fruit.com.cn
+
+import 'dart:async';
+
+import 'package:flutter/material.dart';
+
+import '../theme/app_colors.dart';
+import '../theme/app_dimens.dart';
+import '../../l10n/app_localizations.dart';
+
+/// 网络分页列表底部状态：仅保留加载圈与错误重试。
+class PagedListFooter extends StatelessWidget {
+  const PagedListFooter({
+    super.key,
+    required this.loading,
+    required this.onRetry,
+    this.errorMessage,
+  });
+
+  final bool loading;
+  final String? errorMessage;
+  final Future<void> Function() onRetry;
+
+  @override
+  Widget build(BuildContext context) {
+    final l10n = AppLocalizations.of(context)!;
+    if (errorMessage != null) {
+      return Padding(
+        key: const Key('paged-list-error'),
+        padding: const EdgeInsets.symmetric(vertical: 12),
+        child: Column(
+          children: [
+            Text(
+              errorMessage!,
+              style: const TextStyle(color: AppColors.muted, fontSize: 12),
+            ),
+            TextButton(
+              key: const Key('paged-list-retry'),
+              onPressed: () => unawaited(onRetry()),
+              child: Text(l10n.retry),
+            ),
+          ],
+        ),
+      );
+    }
+    if (loading) {
+      return const SizedBox(
+        key: Key('paged-list-loading'),
+        height: AppDimens.loadMoreIndicatorHeight,
+        child: Center(
+          child: SizedBox.square(
+            dimension: AppDimens.refreshSpinnerSize,
+            child: CircularProgressIndicator(
+              strokeWidth: AppDimens.refreshSpinnerStroke,
+              color: AppColors.textPrimary,
+            ),
+          ),
+        ),
+      );
+    }
+    return const SizedBox.shrink();
+  }
+}
diff --git a/lib/core/widgets/paged_local_list.dart b/lib/core/widgets/paged_local_list.dart
index ce5a80d..4565c7c 100644
--- a/lib/core/widgets/paged_local_list.dart
+++ b/lib/core/widgets/paged_local_list.dart
@@ -3,6 +3,7 @@
 import 'package:flutter/material.dart';
 
 import '../theme/app_colors.dart';
+import '../theme/app_dimens.dart';
 
 const int _defaultPageSize = 20;
 const Duration _defaultLoadDelay = Duration(milliseconds: 300);
@@ -64,53 +65,34 @@ class PagedLocalListController<T> extends ChangeNotifier {
   }
 }
 
-/// 分页列表底部加载态与到底提示。
+/// 分页列表底部加载态。
 class PagedLoadFooter extends StatelessWidget {
   const PagedLoadFooter({
     super.key,
     required this.loading,
-    required this.hasMore,
-    required this.hasItems,
     required this.loadMoreKey,
-    required this.noMoreKey,
-    required this.noMoreLabel,
   });
 
   final bool loading;
-  final bool hasMore;
-  final bool hasItems;
   final Key loadMoreKey;
-  final Key noMoreKey;
-  final String noMoreLabel;
 
   @override
   Widget build(BuildContext context) {
     if (loading) {
       return SizedBox(
         key: loadMoreKey,
-        height: 56,
+        height: AppDimens.loadMoreIndicatorHeight,
         child: const Center(
           child: SizedBox.square(
-            dimension: 20,
+            dimension: AppDimens.refreshSpinnerSize,
             child: CircularProgressIndicator(
-              strokeWidth: 2,
-              color: AppColors.blue,
+              strokeWidth: AppDimens.refreshSpinnerStroke,
+              color: AppColors.textPrimary,
             ),
           ),
         ),
       );
     }
-    if (hasItems && !hasMore) {
-      return Padding(
-        key: noMoreKey,
-        padding: const EdgeInsets.symmetric(vertical: 14),
-        child: Text(
-          noMoreLabel,
-          textAlign: TextAlign.center,
-          style: const TextStyle(color: AppColors.muted, fontSize: 12),
-        ),
-      );
-    }
-    return const SizedBox(height: 16);
+    return const SizedBox.shrink();
   }
 }
diff --git a/lib/core/widgets/plain_page_scaffold.dart b/lib/core/widgets/plain_page_scaffold.dart
index 8e5c07f..29c83e4 100644
--- a/lib/core/widgets/plain_page_scaffold.dart
+++ b/lib/core/widgets/plain_page_scaffold.dart
@@ -3,6 +3,7 @@
 import 'package:flutter/material.dart';
 
 import '../theme/app_colors.dart';
+import '../theme/app_theme.dart';
 import 'subpage_header.dart';
 
 /// 二级页面通用骨架：返回栏 + 标题/副标题 + 可滚动内容，无底部导航。
@@ -27,17 +28,20 @@ class PlainPageScaffold extends StatelessWidget {
     return Scaffold(
       key: pageKey,
       backgroundColor: AppColors.ink,
-      body: SafeArea(
-        child: Column(
-          crossAxisAlignment: CrossAxisAlignment.start,
-          children: [
-            AppSubpageHeader(
-              title: title,
-              subtitle: subtitle,
-              backKey: backKey,
-            ),
-            Expanded(child: child),
-          ],
+      body: DecoratedBox(
+        decoration: const BoxDecoration(gradient: AppTheme.pageGradient),
+        child: SafeArea(
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              AppSubpageHeader(
+                title: title,
+                subtitle: subtitle,
+                backKey: backKey,
+              ),
+              Expanded(child: child),
+            ],
+          ),
         ),
       ),
     );
diff --git a/lib/core/widgets/remote_image.dart b/lib/core/widgets/remote_image.dart
index 60d10be..967c8e1 100644
--- a/lib/core/widgets/remote_image.dart
+++ b/lib/core/widgets/remote_image.dart
@@ -16,7 +16,7 @@ class RemoteImage extends StatelessWidget {
     this.showFallbackIcon = false,
     this.fallbackIconKey,
     this.fallbackAspectRatio,
-    this.fallbackColor = AppColors.bar,
+    this.fallbackColor = AppColors.raised,
   });
 
   final String path;
@@ -31,34 +31,45 @@ class RemoteImage extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final url = AppConfig.mediaUrl(path);
-    if (url.isEmpty) return _fallback();
+    if (url.isEmpty) return _fallback(brand: showFallbackIcon);
     return Image.network(
       url,
       width: width,
       height: height,
       fit: fit,
-      errorBuilder: (_, _, _) => _fallback(),
+      gaplessPlayback: true,
+      errorBuilder: (_, _, _) => _fallback(brand: showFallbackIcon),
       frameBuilder: (context, child, frame, wasSynchronouslyLoaded) {
         if (wasSynchronouslyLoaded || frame != null) return child;
-        return _fallback();
+        return _fallback(brand: showFallbackIcon);
       },
     );
   }
 
-  Widget _fallback() {
+  Widget _fallback({required bool brand}) {
+    final mark = brand
+        ? LayoutBuilder(
+            builder: (context, constraints) {
+              final width = constraints.maxWidth.isFinite
+                  ? constraints.maxWidth
+                  : 120.0;
+              return Center(
+                child: Image.asset(
+                  'assets/icon/splash_logo.png',
+                  key: fallbackIconKey,
+                  width: width * 0.72,
+                  fit: BoxFit.contain,
+                ),
+              );
+            },
+          )
+        : null;
     final fallback = Container(
       width: width,
       height: height,
-      color: fallbackColor,
+      color: brand ? AppColors.mediaBlack : fallbackColor,
       alignment: Alignment.center,
-      child: showFallbackIcon
-          ? Icon(
-              Icons.image_not_supported_outlined,
-              key: fallbackIconKey,
-              color: AppColors.muted,
-              size: 32,
-            )
-          : null,
+      child: mark,
     );
     final ratio = fallbackAspectRatio;
     if (ratio == null) return fallback;
diff --git a/lib/core/widgets/subpage_header.dart b/lib/core/widgets/subpage_header.dart
index 6924433..1f19d0d 100644
--- a/lib/core/widgets/subpage_header.dart
+++ b/lib/core/widgets/subpage_header.dart
@@ -14,12 +14,7 @@ const double _subtitleFontSize = 12;
 const double _actionGap = 8;
 const double _iconSize = 22;
 const double _iconWeight = 600;
-const double _borderWidth = 1;
 const double _shadowBlur = 8;
-const Color _lightShadowColor = Color(0x14000000);
-const Color _darkBackground = Color(0x59000000);
-const Color _darkShadowColor = Color(0x33000000);
-const Offset _lightShadowOffset = Offset(0, 2);
 
 /// 二级页面统一圆形操作按钮，返回、分享和更多共用同一尺寸与表面样式。
 class AppSubpageCircleButton extends StatelessWidget {
@@ -50,24 +45,18 @@ class AppSubpageCircleButton extends StatelessWidget {
           key: const Key('subpage-back-shadow'),
           decoration: BoxDecoration(
             shape: BoxShape.circle,
-            boxShadow: [
-              BoxShadow(
-                color: dark ? _darkShadowColor : _lightShadowColor,
-                blurRadius: _shadowBlur,
-                offset: dark ? Offset.zero : _lightShadowOffset,
-              ),
-            ],
+            boxShadow: dark
+                ? const [
+                    BoxShadow(
+                      color: AppColors.shadowSoft,
+                      blurRadius: _shadowBlur,
+                    ),
+                  ]
+                : const [],
           ),
           child: Material(
-            color: dark ? _darkBackground : AppColors.card,
-            shape: CircleBorder(
-              side: dark
-                  ? BorderSide.none
-                  : const BorderSide(
-                      color: AppColors.border,
-                      width: _borderWidth,
-                    ),
-            ),
+            color: dark ? AppColors.headerScrim : AppColors.transparent,
+            shape: const CircleBorder(),
             clipBehavior: Clip.antiAlias,
             child: InkWell(
               customBorder: const CircleBorder(),
@@ -75,7 +64,7 @@ class AppSubpageCircleButton extends StatelessWidget {
               child: Center(
                 child: Icon(
                   icon,
-                  color: dark ? Colors.white : AppColors.onSurface,
+                  color: dark ? AppColors.onSurface : AppColors.textPrimary,
                   size: _iconSize,
                   weight: _iconWeight,
                 ),
@@ -88,7 +77,7 @@ class AppSubpageCircleButton extends StatelessWidget {
   }
 }
 
-/// 二级页面统一返回按钮，浅色页使用白底描边，深色页使用半透明黑底。
+/// 二级页面统一返回按钮，普通页透明，沉浸页使用半透明黑底。
 class AppSubpageBackButton extends StatelessWidget {
   const AppSubpageBackButton({
     super.key,
@@ -123,6 +112,7 @@ class AppSubpageHeader extends StatelessWidget {
     this.actions,
     this.onBack,
     this.dark = false,
+    this.showBack = true,
   });
 
   final String title;
@@ -131,11 +121,12 @@ class AppSubpageHeader extends StatelessWidget {
   final Widget? actions;
   final VoidCallback? onBack;
   final bool dark;
+  final bool showBack;
 
   @override
   Widget build(BuildContext context) {
-    final foreground = dark ? Colors.white : AppColors.onSurface;
-    final secondary = dark ? Colors.white70 : AppColors.muted;
+    final foreground = AppColors.textPrimary;
+    final secondary = AppColors.textSecondary;
     return SizedBox(
       key: const Key('subpage-header'),
       height: subtitle == null ? _height : _heightWithSubtitle,
@@ -143,8 +134,14 @@ class AppSubpageHeader extends StatelessWidget {
         padding: const EdgeInsets.symmetric(horizontal: _horizontal),
         child: Row(
           children: [
-            AppSubpageBackButton(backKey: backKey, dark: dark, onBack: onBack),
-            const SizedBox(width: _backGap),
+            if (showBack) ...[
+              AppSubpageBackButton(
+                backKey: backKey,
+                dark: dark,
+                onBack: onBack,
+              ),
+              const SizedBox(width: _backGap),
+            ],
             Expanded(
               child: Column(
                 mainAxisAlignment: MainAxisAlignment.center,
diff --git a/lib/l10n/app_en.arb b/lib/l10n/app_en.arb
index 526f378..4549c2d 100644
--- a/lib/l10n/app_en.arb
+++ b/lib/l10n/app_en.arb
@@ -16,6 +16,7 @@
   "currentSeries": "Current series",
   "discoverTab": "Theater",
   "searchDiscover": "Search dramas, actors, genres...",
+  "searchCancel": "Cancel",
   "featured": "Featured",
   "recommended": "Recommended",
   "fruitShortsBrand": "FruitShorts",
@@ -64,7 +65,7 @@
       "count": {"type": "String"}
     }
   },
-  "topCharts": "Top Charts",
+  "topCharts": "Hot Ranking",
   "newReleases": "New Releases",
   "newDramas": "New",
   "trendingMicroDramas": "Trending Micro-Dramas",
@@ -115,7 +116,6 @@
   "emptyHint": "New content will appear here.",
   "demoCatalogNotice": "Three demo dramas share the same local video.",
   "myTab": "My",
-  "localViewer": "Local Viewer",
   "localDemoProfile": "Local demo profile",
   "continueWatching": "Continue Watching",
   "episodeRemaining": "Episode {episode} · {minutes} min left",
@@ -153,7 +153,6 @@
   },
   "resume": "Resume",
   "history": "History",
-  "watchlist": "Favorites",
   "likedTab": "Liked",
   "all": "All",
   "inProgress": "In Progress",
@@ -162,7 +161,7 @@
   "preferences": "Preferences",
   "followingTab": "Following",
   "animatedTab": "Animated",
-  "recommendedTab": "Recommended",
+  "recommendedTab": "Recommend",
   "noCategoryDramas": "No dramas in this category yet.",
   "allDramas": "All Dramas",
   "allLanguages": "All languages",
@@ -346,10 +345,6 @@
     }
   },
   "retry": "Retry",
-  "pullToRefresh": "Pull to refresh",
-  "releaseToRefresh": "Release to refresh",
-  "refreshingLabel": "Refreshing…",
-  "noMore": "No more",
   "backToSeries": "Back to series",
   "nextEpisode": "Next episode",
   "pause": "Pause",
@@ -639,7 +634,7 @@
   "ledgerAdjustment": "Adjustment",
   "rankingTab": "Charts",
   "rankingTitle": "Top Charts",
-  "rankingSubtitle": "Ranked from today's live catalog feed.",
+  "rankingSubtitle": "Ranked live by play heat",
   "rankingHot": "Trending",
   "rankingNew": "New releases",
   "newReleasesAll": "All new releases",
@@ -697,5 +692,71 @@
   "danmakuSettings": "Danmaku settings",
   "offlineCache": "Offline cache",
   "screenCast": "Cast",
-  "sleepTimer": "Sleep timer"
+  "sleepTimer": "Sleep timer",
+  "homeSearchHint": "Search dramas, actors, genres...",
+  "homeSectionFeatured": "Featured",
+  "homeSectionNew": "New",
+  "homeSectionCategories": "Categories",
+  "homeSectionRanking": "Charts",
+  "homeSectionCostume": "Costume",
+  "homeSectionCommunity": "Community",
+  "homeTagHot": "Hot",
+  "homeTagUplifting": "Thrilling",
+  "homeTagSweet": "Sweet",
+  "homeTagFaceSlap": "Revenge",
+  "homeTagAngst": "Angst",
+  "homeBadgeHot": "Hot",
+  "homeBadgeNew": "New",
+  "homeBadgeAnime": "Anime",
+  "homeGridFilterEmpty": "No dramas match these filters",
+  "homeGridClearFilter": "Clear filters",
+  "recommendTopTab": "Recommend",
+  "playlistTopTab": "Playlists",
+  "allDramasTopTab": "All Dramas",
+  "weeklyHitsTitle": "This Week's Hits",
+  "weeklyHitsSubtitle": "Binge the hottest stories of the week!",
+  "weeklyNewTitle": "New This Week",
+  "weeklyNewSubtitle": "Fresh releases to start your next binge",
+  "costumeAwardsTitle": "Costume Drama Awards",
+  "costumeAwardsSubtitle": "Top-rated picks every costume fan needs",
+  "localFilter": "Local",
+  "asiaFilter": "Asia",
+  "westernFilter": "Western",
+  "subtitlesOnlyFilter": "Subtitles",
+  "dubbedFilter": "Dubbed",
+  "reversalFilter": "Comeback",
+  "modernFilter": "Modern",
+  "edit": "Edit",
+  "done": "Done",
+  "visitor": "Visitor",
+  "copyUid": "Copy UID",
+  "uidCopied": "UID copied",
+  "offlineDownloads": "Offline downloads",
+  "watchPreferences": "Watch preferences",
+  "contactSupport": "Contact support",
+  "vipBrandName": "Netshort VIP",
+  "mineVipSubtitle": "Enjoy exclusive benefits",
+  "favoriteEpisodeProgress": "Episode {episode} / {total} total",
+  "@favoriteEpisodeProgress": {
+    "placeholders": {
+      "episode": { "type": "int" },
+      "total": { "type": "int" }
+    }
+  },
+  "watchedToEpisode": "Watched to Episode {episode}",
+  "@watchedToEpisode": { "placeholders": { "episode": { "type": "int" } } },
+  "homeWatchAll": "Watch all",
+  "confirmRemove": "Remove this item?",
+  "followingCountLabel": "Following",
+  "watchRecordsCountLabel": "Watch records",
+  "dataUnavailable": "—",
+  "commonQuestions": "Common questions",
+  "aboutUs": "About us",
+  "aboutDescription": "A focused, immersive place to watch short dramas.",
+  "versionLabel": "Version {version}",
+  "@versionLabel": {
+    "placeholders": {
+      "version": { "type": "String" }
+    }
+  }
 }
diff --git a/lib/l10n/app_id.arb b/lib/l10n/app_id.arb
index b707d25..75452ef 100644
--- a/lib/l10n/app_id.arb
+++ b/lib/l10n/app_id.arb
@@ -16,6 +16,7 @@
   "currentSeries": "Serial saat ini",
   "discoverTab": "Teater",
   "searchDiscover": "Cari drama, aktor, genre...",
+  "searchCancel": "Batal",
   "featured": "Unggulan",
   "recommended": "Rekomendasi",
   "fruitShortsBrand": "FruitShorts",
@@ -48,7 +49,7 @@
   "authorNoteLabel": "Catatan penulis",
   "reserve": "Reservasi",
   "heatLabel": "{count} panas",
-  "topCharts": "Peringkat Teratas",
+  "topCharts": "Peringkat Populer",
   "newReleases": "Rilisan Baru",
   "newDramas": "Baru",
   "trendingMicroDramas": "Drama Mini Populer",
@@ -94,7 +95,6 @@
   "emptyHint": "Konten baru akan muncul di sini.",
   "demoCatalogNotice": "Tiga drama demo memakai video lokal yang sama.",
   "myTab": "Saya",
-  "localViewer": "Penonton Lokal",
   "localDemoProfile": "Profil demo lokal",
   "continueWatching": "Lanjut Tonton",
   "episodeRemaining": "Episode {episode} · {minutes} menit tersisa",
@@ -132,14 +132,13 @@
   },
   "resume": "Lanjutkan",
   "history": "Riwayat",
-  "watchlist": "Daftar Tonton",
   "likedTab": "Disukai",
   "all": "Semua",
   "inProgress": "Sedang Berjalan",
   "completed": "Selesai",
   "noSavedShows": "Belum ada tontonan di sini.",
   "preferences": "Preferensi",
-  "followingTab": "Mengikuti",
+  "followingTab": "Daftar Tonton",
   "animatedTab": "Animasi",
   "recommendedTab": "Rekomendasi",
   "noCategoryDramas": "Belum ada drama di kategori ini.",
@@ -320,10 +319,6 @@
     }
   },
   "retry": "Coba lagi",
-  "pullToRefresh": "Tarik untuk menyegarkan",
-  "releaseToRefresh": "Lepaskan untuk menyegarkan",
-  "refreshingLabel": "Menyegarkan…",
-  "noMore": "Tidak ada lagi",
   "backToSeries": "Kembali ke serial",
   "nextEpisode": "Episode berikutnya",
   "pause": "Jeda",
@@ -601,7 +596,7 @@
   "ledgerAdjustment": "Penyesuaian",
   "rankingTab": "Peringkat",
   "rankingTitle": "Peringkat Teratas",
-  "rankingSubtitle": "Diurutkan dari feed katalog terkini.",
+  "rankingSubtitle": "Diurutkan langsung berdasarkan jumlah tayangan",
   "rankingHot": "Populer",
   "rankingNew": "Rilis baru",
   "newReleasesAll": "Semua rilis baru",
@@ -654,5 +649,71 @@
   "danmakuSettings": "Pengaturan komentar layar",
   "offlineCache": "Cache offline",
   "screenCast": "Cast",
-  "sleepTimer": "Timer tidur"
+  "sleepTimer": "Timer tidur",
+  "homeSearchHint": "Cari drama, aktor, genre...",
+  "homeSectionFeatured": "Unggulan",
+  "homeSectionNew": "Baru",
+  "homeSectionCategories": "Kategori",
+  "homeSectionRanking": "Peringkat",
+  "homeSectionCostume": "Kostum",
+  "homeSectionCommunity": "Komunitas",
+  "homeTagHot": "Populer",
+  "homeTagUplifting": "Membara",
+  "homeTagSweet": "Manis",
+  "homeTagFaceSlap": "Balas Dendam",
+  "homeTagAngst": "Cinta Penuh Luka",
+  "homeBadgeHot": "Populer",
+  "homeBadgeNew": "Baru",
+  "homeBadgeAnime": "Anime",
+  "homeGridFilterEmpty": "Tidak ada drama yang cocok dengan filter",
+  "homeGridClearFilter": "Hapus filter",
+  "recommendTopTab": "Rekomendasi",
+  "playlistTopTab": "Daftar Putar",
+  "allDramasTopTab": "Semua",
+  "weeklyHitsTitle": "Hits Minggu Ini",
+  "weeklyHitsSubtitle": "Drama terpopuler minggu ini, tonton sekaligus!",
+  "weeklyNewTitle": "Drama Baru Minggu Ini",
+  "weeklyNewSubtitle": "Rilisan baru untuk memulai maraton berikutnya",
+  "costumeAwardsTitle": "Drama Kostum Terbaik",
+  "costumeAwardsSubtitle": "Pilihan terbaik yang wajib ditonton",
+  "localFilter": "Lokal",
+  "asiaFilter": "Asia",
+  "westernFilter": "Barat",
+  "subtitlesOnlyFilter": "Subtitle",
+  "dubbedFilter": "Dubbing",
+  "reversalFilter": "Balas Dendam",
+  "modernFilter": "Modern",
+  "edit": "Edit",
+  "done": "Selesai",
+  "visitor": "Pengunjung",
+  "copyUid": "Salin UID",
+  "uidCopied": "UID disalin",
+  "offlineDownloads": "Unduhan offline",
+  "watchPreferences": "Preferensi tontonan",
+  "contactSupport": "Hubungi dukungan",
+  "vipBrandName": "Netshort VIP",
+  "mineVipSubtitle": "Nikmati manfaat eksklusif",
+  "favoriteEpisodeProgress": "Episode {episode} / total {total}",
+  "@favoriteEpisodeProgress": {
+    "placeholders": {
+      "episode": { "type": "int" },
+      "total": { "type": "int" }
+    }
+  },
+  "watchedToEpisode": "Ditonton hingga Episode {episode}",
+  "@watchedToEpisode": { "placeholders": { "episode": { "type": "int" } } },
+  "homeWatchAll": "Tonton semua",
+  "confirmRemove": "Hapus item ini?",
+  "followingCountLabel": "Mengikuti",
+  "watchRecordsCountLabel": "Riwayat tontonan",
+  "dataUnavailable": "—",
+  "commonQuestions": "Pertanyaan umum",
+  "aboutUs": "Tentang kami",
+  "aboutDescription": "Tempat fokus dan imersif untuk menonton drama pendek.",
+  "versionLabel": "Versi {version}",
+  "@versionLabel": {
+    "placeholders": {
+      "version": { "type": "String" }
+    }
+  }
 }
diff --git a/lib/l10n/app_localizations.dart b/lib/l10n/app_localizations.dart
index 447651c..42223d4 100644
--- a/lib/l10n/app_localizations.dart
+++ b/lib/l10n/app_localizations.dart
@@ -196,6 +196,12 @@ abstract class AppLocalizations {
   /// **'Search dramas, actors, genres...'**
   String get searchDiscover;
 
+  /// No description provided for @searchCancel.
+  ///
+  /// In en, this message translates to:
+  /// **'Cancel'**
+  String get searchCancel;
+
   /// No description provided for @featured.
   ///
   /// In en, this message translates to:
@@ -391,7 +397,7 @@ abstract class AppLocalizations {
   /// No description provided for @topCharts.
   ///
   /// In en, this message translates to:
-  /// **'Top Charts'**
+  /// **'Hot Ranking'**
   String get topCharts;
 
   /// No description provided for @newReleases.
@@ -568,12 +574,6 @@ abstract class AppLocalizations {
   /// **'My'**
   String get myTab;
 
-  /// No description provided for @localViewer.
-  ///
-  /// In en, this message translates to:
-  /// **'Local Viewer'**
-  String get localViewer;
-
   /// No description provided for @localDemoProfile.
   ///
   /// In en, this message translates to:
@@ -628,12 +628,6 @@ abstract class AppLocalizations {
   /// **'History'**
   String get history;
 
-  /// No description provided for @watchlist.
-  ///
-  /// In en, this message translates to:
-  /// **'Favorites'**
-  String get watchlist;
-
   /// No description provided for @likedTab.
   ///
   /// In en, this message translates to:
@@ -685,7 +679,7 @@ abstract class AppLocalizations {
   /// No description provided for @recommendedTab.
   ///
   /// In en, this message translates to:
-  /// **'Recommended'**
+  /// **'Recommend'**
   String get recommendedTab;
 
   /// No description provided for @noCategoryDramas.
@@ -1354,30 +1348,6 @@ abstract class AppLocalizations {
   /// **'Retry'**
   String get retry;
 
-  /// No description provided for @pullToRefresh.
-  ///
-  /// In en, this message translates to:
-  /// **'Pull to refresh'**
-  String get pullToRefresh;
-
-  /// No description provided for @releaseToRefresh.
-  ///
-  /// In en, this message translates to:
-  /// **'Release to refresh'**
-  String get releaseToRefresh;
-
-  /// No description provided for @refreshingLabel.
-  ///
-  /// In en, this message translates to:
-  /// **'Refreshing…'**
-  String get refreshingLabel;
-
-  /// No description provided for @noMore.
-  ///
-  /// In en, this message translates to:
-  /// **'No more'**
-  String get noMore;
-
   /// No description provided for @backToSeries.
   ///
   /// In en, this message translates to:
@@ -2713,7 +2683,7 @@ abstract class AppLocalizations {
   /// No description provided for @rankingSubtitle.
   ///
   /// In en, this message translates to:
-  /// **'Ranked from today\'s live catalog feed.'**
+  /// **'Ranked live by play heat'**
   String get rankingSubtitle;
 
   /// No description provided for @rankingHot.
@@ -2997,6 +2967,330 @@ abstract class AppLocalizations {
   /// In en, this message translates to:
   /// **'Sleep timer'**
   String get sleepTimer;
+
+  /// No description provided for @homeSearchHint.
+  ///
+  /// In en, this message translates to:
+  /// **'Search dramas, actors, genres...'**
+  String get homeSearchHint;
+
+  /// No description provided for @homeSectionFeatured.
+  ///
+  /// In en, this message translates to:
+  /// **'Featured'**
+  String get homeSectionFeatured;
+
+  /// No description provided for @homeSectionNew.
+  ///
+  /// In en, this message translates to:
+  /// **'New'**
+  String get homeSectionNew;
+
+  /// No description provided for @homeSectionCategories.
+  ///
+  /// In en, this message translates to:
+  /// **'Categories'**
+  String get homeSectionCategories;
+
+  /// No description provided for @homeSectionRanking.
+  ///
+  /// In en, this message translates to:
+  /// **'Charts'**
+  String get homeSectionRanking;
+
+  /// No description provided for @homeSectionCostume.
+  ///
+  /// In en, this message translates to:
+  /// **'Costume'**
+  String get homeSectionCostume;
+
+  /// No description provided for @homeSectionCommunity.
+  ///
+  /// In en, this message translates to:
+  /// **'Community'**
+  String get homeSectionCommunity;
+
+  /// No description provided for @homeTagHot.
+  ///
+  /// In en, this message translates to:
+  /// **'Hot'**
+  String get homeTagHot;
+
+  /// No description provided for @homeTagUplifting.
+  ///
+  /// In en, this message translates to:
+  /// **'Thrilling'**
+  String get homeTagUplifting;
+
+  /// No description provided for @homeTagSweet.
+  ///
+  /// In en, this message translates to:
+  /// **'Sweet'**
+  String get homeTagSweet;
+
+  /// No description provided for @homeTagFaceSlap.
+  ///
+  /// In en, this message translates to:
+  /// **'Revenge'**
+  String get homeTagFaceSlap;
+
+  /// No description provided for @homeTagAngst.
+  ///
+  /// In en, this message translates to:
+  /// **'Angst'**
+  String get homeTagAngst;
+
+  /// No description provided for @homeBadgeHot.
+  ///
+  /// In en, this message translates to:
+  /// **'Hot'**
+  String get homeBadgeHot;
+
+  /// No description provided for @homeBadgeNew.
+  ///
+  /// In en, this message translates to:
+  /// **'New'**
+  String get homeBadgeNew;
+
+  /// No description provided for @homeBadgeAnime.
+  ///
+  /// In en, this message translates to:
+  /// **'Anime'**
+  String get homeBadgeAnime;
+
+  /// No description provided for @homeGridFilterEmpty.
+  ///
+  /// In en, this message translates to:
+  /// **'No dramas match these filters'**
+  String get homeGridFilterEmpty;
+
+  /// No description provided for @homeGridClearFilter.
+  ///
+  /// In en, this message translates to:
+  /// **'Clear filters'**
+  String get homeGridClearFilter;
+
+  /// No description provided for @recommendTopTab.
+  ///
+  /// In en, this message translates to:
+  /// **'Recommend'**
+  String get recommendTopTab;
+
+  /// No description provided for @playlistTopTab.
+  ///
+  /// In en, this message translates to:
+  /// **'Playlists'**
+  String get playlistTopTab;
+
+  /// No description provided for @allDramasTopTab.
+  ///
+  /// In en, this message translates to:
+  /// **'All Dramas'**
+  String get allDramasTopTab;
+
+  /// No description provided for @weeklyHitsTitle.
+  ///
+  /// In en, this message translates to:
+  /// **'This Week\'s Hits'**
+  String get weeklyHitsTitle;
+
+  /// No description provided for @weeklyHitsSubtitle.
+  ///
+  /// In en, this message translates to:
+  /// **'Binge the hottest stories of the week!'**
+  String get weeklyHitsSubtitle;
+
+  /// No description provided for @weeklyNewTitle.
+  ///
+  /// In en, this message translates to:
+  /// **'New This Week'**
+  String get weeklyNewTitle;
+
+  /// No description provided for @weeklyNewSubtitle.
+  ///
+  /// In en, this message translates to:
+  /// **'Fresh releases to start your next binge'**
+  String get weeklyNewSubtitle;
+
+  /// No description provided for @costumeAwardsTitle.
+  ///
+  /// In en, this message translates to:
+  /// **'Costume Drama Awards'**
+  String get costumeAwardsTitle;
+
+  /// No description provided for @costumeAwardsSubtitle.
+  ///
+  /// In en, this message translates to:
+  /// **'Top-rated picks every costume fan needs'**
+  String get costumeAwardsSubtitle;
+
+  /// No description provided for @localFilter.
+  ///
+  /// In en, this message translates to:
+  /// **'Local'**
+  String get localFilter;
+
+  /// No description provided for @asiaFilter.
+  ///
+  /// In en, this message translates to:
+  /// **'Asia'**
+  String get asiaFilter;
+
+  /// No description provided for @westernFilter.
+  ///
+  /// In en, this message translates to:
+  /// **'Western'**
+  String get westernFilter;
+
+  /// No description provided for @subtitlesOnlyFilter.
+  ///
+  /// In en, this message translates to:
+  /// **'Subtitles'**
+  String get subtitlesOnlyFilter;
+
+  /// No description provided for @dubbedFilter.
+  ///
+  /// In en, this message translates to:
+  /// **'Dubbed'**
+  String get dubbedFilter;
+
+  /// No description provided for @reversalFilter.
+  ///
+  /// In en, this message translates to:
+  /// **'Comeback'**
+  String get reversalFilter;
+
+  /// No description provided for @modernFilter.
+  ///
+  /// In en, this message translates to:
+  /// **'Modern'**
+  String get modernFilter;
+
+  /// No description provided for @edit.
+  ///
+  /// In en, this message translates to:
+  /// **'Edit'**
+  String get edit;
+
+  /// No description provided for @done.
+  ///
+  /// In en, this message translates to:
+  /// **'Done'**
+  String get done;
+
+  /// No description provided for @visitor.
+  ///
+  /// In en, this message translates to:
+  /// **'Visitor'**
+  String get visitor;
+
+  /// No description provided for @copyUid.
+  ///
+  /// In en, this message translates to:
+  /// **'Copy UID'**
+  String get copyUid;
+
+  /// No description provided for @uidCopied.
+  ///
+  /// In en, this message translates to:
+  /// **'UID copied'**
+  String get uidCopied;
+
+  /// No description provided for @offlineDownloads.
+  ///
+  /// In en, this message translates to:
+  /// **'Offline downloads'**
+  String get offlineDownloads;
+
+  /// No description provided for @watchPreferences.
+  ///
+  /// In en, this message translates to:
+  /// **'Watch preferences'**
+  String get watchPreferences;
+
+  /// No description provided for @contactSupport.
+  ///
+  /// In en, this message translates to:
+  /// **'Contact support'**
+  String get contactSupport;
+
+  /// No description provided for @vipBrandName.
+  ///
+  /// In en, this message translates to:
+  /// **'Netshort VIP'**
+  String get vipBrandName;
+
+  /// No description provided for @mineVipSubtitle.
+  ///
+  /// In en, this message translates to:
+  /// **'Enjoy exclusive benefits'**
+  String get mineVipSubtitle;
+
+  /// No description provided for @favoriteEpisodeProgress.
+  ///
+  /// In en, this message translates to:
+  /// **'Episode {episode} / {total} total'**
+  String favoriteEpisodeProgress(int episode, int total);
+
+  /// No description provided for @watchedToEpisode.
+  ///
+  /// In en, this message translates to:
+  /// **'Watched to Episode {episode}'**
+  String watchedToEpisode(int episode);
+
+  /// No description provided for @homeWatchAll.
+  ///
+  /// In en, this message translates to:
+  /// **'Watch all'**
+  String get homeWatchAll;
+
+  /// No description provided for @confirmRemove.
+  ///
+  /// In en, this message translates to:
+  /// **'Remove this item?'**
+  String get confirmRemove;
+
+  /// No description provided for @followingCountLabel.
+  ///
+  /// In en, this message translates to:
+  /// **'Following'**
+  String get followingCountLabel;
+
+  /// No description provided for @watchRecordsCountLabel.
+  ///
+  /// In en, this message translates to:
+  /// **'Watch records'**
+  String get watchRecordsCountLabel;
+
+  /// No description provided for @dataUnavailable.
+  ///
+  /// In en, this message translates to:
+  /// **'—'**
+  String get dataUnavailable;
+
+  /// No description provided for @commonQuestions.
+  ///
+  /// In en, this message translates to:
+  /// **'Common questions'**
+  String get commonQuestions;
+
+  /// No description provided for @aboutUs.
+  ///
+  /// In en, this message translates to:
+  /// **'About us'**
+  String get aboutUs;
+
+  /// No description provided for @aboutDescription.
+  ///
+  /// In en, this message translates to:
+  /// **'A focused, immersive place to watch short dramas.'**
+  String get aboutDescription;
+
+  /// No description provided for @versionLabel.
+  ///
+  /// In en, this message translates to:
+  /// **'Version {version}'**
+  String versionLabel(String version);
 }
 
 class _AppLocalizationsDelegate
diff --git a/lib/l10n/app_localizations_en.dart b/lib/l10n/app_localizations_en.dart
index d36f78e..96f45c6 100644
--- a/lib/l10n/app_localizations_en.dart
+++ b/lib/l10n/app_localizations_en.dart
@@ -57,6 +57,9 @@ class AppLocalizationsEn extends AppLocalizations {
   @override
   String get searchDiscover => 'Search dramas, actors, genres...';
 
+  @override
+  String get searchCancel => 'Cancel';
+
   @override
   String get featured => 'Featured';
 
@@ -162,7 +165,7 @@ class AppLocalizationsEn extends AppLocalizations {
   }
 
   @override
-  String get topCharts => 'Top Charts';
+  String get topCharts => 'Hot Ranking';
 
   @override
   String get newReleases => 'New Releases';
@@ -261,9 +264,6 @@ class AppLocalizationsEn extends AppLocalizations {
   @override
   String get myTab => 'My';
 
-  @override
-  String get localViewer => 'Local Viewer';
-
   @override
   String get localDemoProfile => 'Local demo profile';
 
@@ -301,9 +301,6 @@ class AppLocalizationsEn extends AppLocalizations {
   @override
   String get history => 'History';
 
-  @override
-  String get watchlist => 'Favorites';
-
   @override
   String get likedTab => 'Liked';
 
@@ -329,7 +326,7 @@ class AppLocalizationsEn extends AppLocalizations {
   String get animatedTab => 'Animated';
 
   @override
-  String get recommendedTab => 'Recommended';
+  String get recommendedTab => 'Recommend';
 
   @override
   String get noCategoryDramas => 'No dramas in this category yet.';
@@ -687,18 +684,6 @@ class AppLocalizationsEn extends AppLocalizations {
   @override
   String get retry => 'Retry';
 
-  @override
-  String get pullToRefresh => 'Pull to refresh';
-
-  @override
-  String get releaseToRefresh => 'Release to refresh';
-
-  @override
-  String get refreshingLabel => 'Refreshing…';
-
-  @override
-  String get noMore => 'No more';
-
   @override
   String get backToSeries => 'Back to series';
 
@@ -1407,7 +1392,7 @@ class AppLocalizationsEn extends AppLocalizations {
   String get rankingTitle => 'Top Charts';
 
   @override
-  String get rankingSubtitle => 'Ranked from today\'s live catalog feed.';
+  String get rankingSubtitle => 'Ranked live by play heat';
 
   @override
   String get rankingHot => 'Trending';
@@ -1565,4 +1550,173 @@ class AppLocalizationsEn extends AppLocalizations {
 
   @override
   String get sleepTimer => 'Sleep timer';
+
+  @override
+  String get homeSearchHint => 'Search dramas, actors, genres...';
+
+  @override
+  String get homeSectionFeatured => 'Featured';
+
+  @override
+  String get homeSectionNew => 'New';
+
+  @override
+  String get homeSectionCategories => 'Categories';
+
+  @override
+  String get homeSectionRanking => 'Charts';
+
+  @override
+  String get homeSectionCostume => 'Costume';
+
+  @override
+  String get homeSectionCommunity => 'Community';
+
+  @override
+  String get homeTagHot => 'Hot';
+
+  @override
+  String get homeTagUplifting => 'Thrilling';
+
+  @override
+  String get homeTagSweet => 'Sweet';
+
+  @override
+  String get homeTagFaceSlap => 'Revenge';
+
+  @override
+  String get homeTagAngst => 'Angst';
+
+  @override
+  String get homeBadgeHot => 'Hot';
+
+  @override
+  String get homeBadgeNew => 'New';
+
+  @override
+  String get homeBadgeAnime => 'Anime';
+
+  @override
+  String get homeGridFilterEmpty => 'No dramas match these filters';
+
+  @override
+  String get homeGridClearFilter => 'Clear filters';
+
+  @override
+  String get recommendTopTab => 'Recommend';
+
+  @override
+  String get playlistTopTab => 'Playlists';
+
+  @override
+  String get allDramasTopTab => 'All Dramas';
+
+  @override
+  String get weeklyHitsTitle => 'This Week\'s Hits';
+
+  @override
+  String get weeklyHitsSubtitle => 'Binge the hottest stories of the week!';
+
+  @override
+  String get weeklyNewTitle => 'New This Week';
+
+  @override
+  String get weeklyNewSubtitle => 'Fresh releases to start your next binge';
+
+  @override
+  String get costumeAwardsTitle => 'Costume Drama Awards';
+
+  @override
+  String get costumeAwardsSubtitle => 'Top-rated picks every costume fan needs';
+
+  @override
+  String get localFilter => 'Local';
+
+  @override
+  String get asiaFilter => 'Asia';
+
+  @override
+  String get westernFilter => 'Western';
+
+  @override
+  String get subtitlesOnlyFilter => 'Subtitles';
+
+  @override
+  String get dubbedFilter => 'Dubbed';
+
+  @override
+  String get reversalFilter => 'Comeback';
+
+  @override
+  String get modernFilter => 'Modern';
+
+  @override
+  String get edit => 'Edit';
+
+  @override
+  String get done => 'Done';
+
+  @override
+  String get visitor => 'Visitor';
+
+  @override
+  String get copyUid => 'Copy UID';
+
+  @override
+  String get uidCopied => 'UID copied';
+
+  @override
+  String get offlineDownloads => 'Offline downloads';
+
+  @override
+  String get watchPreferences => 'Watch preferences';
+
+  @override
+  String get contactSupport => 'Contact support';
+
+  @override
+  String get vipBrandName => 'Netshort VIP';
+
+  @override
+  String get mineVipSubtitle => 'Enjoy exclusive benefits';
+
+  @override
+  String favoriteEpisodeProgress(int episode, int total) {
+    return 'Episode $episode / $total total';
+  }
+
+  @override
+  String watchedToEpisode(int episode) {
+    return 'Watched to Episode $episode';
+  }
+
+  @override
+  String get homeWatchAll => 'Watch all';
+
+  @override
+  String get confirmRemove => 'Remove this item?';
+
+  @override
+  String get followingCountLabel => 'Following';
+
+  @override
+  String get watchRecordsCountLabel => 'Watch records';
+
+  @override
+  String get dataUnavailable => '—';
+
+  @override
+  String get commonQuestions => 'Common questions';
+
+  @override
+  String get aboutUs => 'About us';
+
+  @override
+  String get aboutDescription =>
+      'A focused, immersive place to watch short dramas.';
+
+  @override
+  String versionLabel(String version) {
+    return 'Version $version';
+  }
 }
diff --git a/lib/l10n/app_localizations_id.dart b/lib/l10n/app_localizations_id.dart
index b5c5ee0..5417abe 100644
--- a/lib/l10n/app_localizations_id.dart
+++ b/lib/l10n/app_localizations_id.dart
@@ -57,6 +57,9 @@ class AppLocalizationsId extends AppLocalizations {
   @override
   String get searchDiscover => 'Cari drama, aktor, genre...';
 
+  @override
+  String get searchCancel => 'Batal';
+
   @override
   String get featured => 'Unggulan';
 
@@ -162,7 +165,7 @@ class AppLocalizationsId extends AppLocalizations {
   }
 
   @override
-  String get topCharts => 'Peringkat Teratas';
+  String get topCharts => 'Peringkat Populer';
 
   @override
   String get newReleases => 'Rilisan Baru';
@@ -261,9 +264,6 @@ class AppLocalizationsId extends AppLocalizations {
   @override
   String get myTab => 'Saya';
 
-  @override
-  String get localViewer => 'Penonton Lokal';
-
   @override
   String get localDemoProfile => 'Profil demo lokal';
 
@@ -301,9 +301,6 @@ class AppLocalizationsId extends AppLocalizations {
   @override
   String get history => 'Riwayat';
 
-  @override
-  String get watchlist => 'Daftar Tonton';
-
   @override
   String get likedTab => 'Disukai';
 
@@ -323,7 +320,7 @@ class AppLocalizationsId extends AppLocalizations {
   String get preferences => 'Preferensi';
 
   @override
-  String get followingTab => 'Mengikuti';
+  String get followingTab => 'Daftar Tonton';
 
   @override
   String get animatedTab => 'Animasi';
@@ -690,18 +687,6 @@ class AppLocalizationsId extends AppLocalizations {
   @override
   String get retry => 'Coba lagi';
 
-  @override
-  String get pullToRefresh => 'Tarik untuk menyegarkan';
-
-  @override
-  String get releaseToRefresh => 'Lepaskan untuk menyegarkan';
-
-  @override
-  String get refreshingLabel => 'Menyegarkan…';
-
-  @override
-  String get noMore => 'Tidak ada lagi';
-
   @override
   String get backToSeries => 'Kembali ke serial';
 
@@ -1407,7 +1392,8 @@ class AppLocalizationsId extends AppLocalizations {
   String get rankingTitle => 'Peringkat Teratas';
 
   @override
-  String get rankingSubtitle => 'Diurutkan dari feed katalog terkini.';
+  String get rankingSubtitle =>
+      'Diurutkan langsung berdasarkan jumlah tayangan';
 
   @override
   String get rankingHot => 'Populer';
@@ -1565,4 +1551,175 @@ class AppLocalizationsId extends AppLocalizations {
 
   @override
   String get sleepTimer => 'Timer tidur';
+
+  @override
+  String get homeSearchHint => 'Cari drama, aktor, genre...';
+
+  @override
+  String get homeSectionFeatured => 'Unggulan';
+
+  @override
+  String get homeSectionNew => 'Baru';
+
+  @override
+  String get homeSectionCategories => 'Kategori';
+
+  @override
+  String get homeSectionRanking => 'Peringkat';
+
+  @override
+  String get homeSectionCostume => 'Kostum';
+
+  @override
+  String get homeSectionCommunity => 'Komunitas';
+
+  @override
+  String get homeTagHot => 'Populer';
+
+  @override
+  String get homeTagUplifting => 'Membara';
+
+  @override
+  String get homeTagSweet => 'Manis';
+
+  @override
+  String get homeTagFaceSlap => 'Balas Dendam';
+
+  @override
+  String get homeTagAngst => 'Cinta Penuh Luka';
+
+  @override
+  String get homeBadgeHot => 'Populer';
+
+  @override
+  String get homeBadgeNew => 'Baru';
+
+  @override
+  String get homeBadgeAnime => 'Anime';
+
+  @override
+  String get homeGridFilterEmpty => 'Tidak ada drama yang cocok dengan filter';
+
+  @override
+  String get homeGridClearFilter => 'Hapus filter';
+
+  @override
+  String get recommendTopTab => 'Rekomendasi';
+
+  @override
+  String get playlistTopTab => 'Daftar Putar';
+
+  @override
+  String get allDramasTopTab => 'Semua';
+
+  @override
+  String get weeklyHitsTitle => 'Hits Minggu Ini';
+
+  @override
+  String get weeklyHitsSubtitle =>
+      'Drama terpopuler minggu ini, tonton sekaligus!';
+
+  @override
+  String get weeklyNewTitle => 'Drama Baru Minggu Ini';
+
+  @override
+  String get weeklyNewSubtitle =>
+      'Rilisan baru untuk memulai maraton berikutnya';
+
+  @override
+  String get costumeAwardsTitle => 'Drama Kostum Terbaik';
+
+  @override
+  String get costumeAwardsSubtitle => 'Pilihan terbaik yang wajib ditonton';
+
+  @override
+  String get localFilter => 'Lokal';
+
+  @override
+  String get asiaFilter => 'Asia';
+
+  @override
+  String get westernFilter => 'Barat';
+
+  @override
+  String get subtitlesOnlyFilter => 'Subtitle';
+
+  @override
+  String get dubbedFilter => 'Dubbing';
+
+  @override
+  String get reversalFilter => 'Balas Dendam';
+
+  @override
+  String get modernFilter => 'Modern';
+
+  @override
+  String get edit => 'Edit';
+
+  @override
+  String get done => 'Selesai';
+
+  @override
+  String get visitor => 'Pengunjung';
+
+  @override
+  String get copyUid => 'Salin UID';
+
+  @override
+  String get uidCopied => 'UID disalin';
+
+  @override
+  String get offlineDownloads => 'Unduhan offline';
+
+  @override
+  String get watchPreferences => 'Preferensi tontonan';
+
+  @override
+  String get contactSupport => 'Hubungi dukungan';
+
+  @override
+  String get vipBrandName => 'Netshort VIP';
+
+  @override
+  String get mineVipSubtitle => 'Nikmati manfaat eksklusif';
+
+  @override
+  String favoriteEpisodeProgress(int episode, int total) {
+    return 'Episode $episode / total $total';
+  }
+
+  @override
+  String watchedToEpisode(int episode) {
+    return 'Ditonton hingga Episode $episode';
+  }
+
+  @override
+  String get homeWatchAll => 'Tonton semua';
+
+  @override
+  String get confirmRemove => 'Hapus item ini?';
+
+  @override
+  String get followingCountLabel => 'Mengikuti';
+
+  @override
+  String get watchRecordsCountLabel => 'Riwayat tontonan';
+
+  @override
+  String get dataUnavailable => '—';
+
+  @override
+  String get commonQuestions => 'Pertanyaan umum';
+
+  @override
+  String get aboutUs => 'Tentang kami';
+
+  @override
+  String get aboutDescription =>
+      'Tempat fokus dan imersif untuk menonton drama pendek.';
+
+  @override
+  String versionLabel(String version) {
+    return 'Versi $version';
+  }
 }
diff --git a/lib/l10n/app_localizations_zh.dart b/lib/l10n/app_localizations_zh.dart
index 3bfa8c4..62f7489 100644
--- a/lib/l10n/app_localizations_zh.dart
+++ b/lib/l10n/app_localizations_zh.dart
@@ -56,6 +56,9 @@ class AppLocalizationsZh extends AppLocalizations {
   @override
   String get searchDiscover => '搜索短剧、演员、类型…';
 
+  @override
+  String get searchCancel => '取消';
+
   @override
   String get featured => '精选';
 
@@ -159,7 +162,7 @@ class AppLocalizationsZh extends AppLocalizations {
   }
 
   @override
-  String get topCharts => '排行榜';
+  String get topCharts => '热播榜';
 
   @override
   String get newReleases => '新剧';
@@ -256,9 +259,6 @@ class AppLocalizationsZh extends AppLocalizations {
   @override
   String get myTab => '我的';
 
-  @override
-  String get localViewer => '本地观众';
-
   @override
   String get localDemoProfile => '本地演示档案';
 
@@ -287,7 +287,7 @@ class AppLocalizationsZh extends AppLocalizations {
 
   @override
   String watchedPercent(int percent) {
-    return '已观看 $percent%';
+    return '已看 $percent%';
   }
 
   @override
@@ -296,9 +296,6 @@ class AppLocalizationsZh extends AppLocalizations {
   @override
   String get history => '历史';
 
-  @override
-  String get watchlist => '收藏';
-
   @override
   String get likedTab => '喜欢';
 
@@ -318,7 +315,7 @@ class AppLocalizationsZh extends AppLocalizations {
   String get preferences => '偏好设置';
 
   @override
-  String get followingTab => '关注';
+  String get followingTab => '追剧';
 
   @override
   String get animatedTab => '漫剧';
@@ -679,18 +676,6 @@ class AppLocalizationsZh extends AppLocalizations {
   @override
   String get retry => '重试';
 
-  @override
-  String get pullToRefresh => '下拉刷新';
-
-  @override
-  String get releaseToRefresh => '松手刷新';
-
-  @override
-  String get refreshingLabel => '正在刷新…';
-
-  @override
-  String get noMore => '没有更多了';
-
   @override
   String get backToSeries => '返回剧集详情';
 
@@ -857,7 +842,7 @@ class AppLocalizationsZh extends AppLocalizations {
   String get freeBonus => '领免费奖励';
 
   @override
-  String get watchHistory => '观看历史';
+  String get watchHistory => '播放历史';
 
   @override
   String get settings => '设置';
@@ -1385,7 +1370,7 @@ class AppLocalizationsZh extends AppLocalizations {
   String get rankingTitle => '热门榜单';
 
   @override
-  String get rankingSubtitle => '依据目录实时分区排序。';
+  String get rankingSubtitle => '按播放热度实时排序';
 
   @override
   String get rankingHot => '热播';
@@ -1541,4 +1526,172 @@ class AppLocalizationsZh extends AppLocalizations {
 
   @override
   String get sleepTimer => '定时关闭';
+
+  @override
+  String get homeSearchHint => '搜索短剧、演员、类型…';
+
+  @override
+  String get homeSectionFeatured => '精选';
+
+  @override
+  String get homeSectionNew => '新剧';
+
+  @override
+  String get homeSectionCategories => '分类';
+
+  @override
+  String get homeSectionRanking => '榜单';
+
+  @override
+  String get homeSectionCostume => '古装';
+
+  @override
+  String get homeSectionCommunity => '社群';
+
+  @override
+  String get homeTagHot => '热门';
+
+  @override
+  String get homeTagUplifting => '爽剧';
+
+  @override
+  String get homeTagSweet => '甜宠';
+
+  @override
+  String get homeTagFaceSlap => '打脸虐渣';
+
+  @override
+  String get homeTagAngst => '虐恋';
+
+  @override
+  String get homeBadgeHot => '热剧';
+
+  @override
+  String get homeBadgeNew => '新剧';
+
+  @override
+  String get homeBadgeAnime => '漫剧';
+
+  @override
+  String get homeGridFilterEmpty => '没有符合筛选条件的短剧';
+
+  @override
+  String get homeGridClearFilter => '清除筛选';
+
+  @override
+  String get recommendTopTab => '推荐';
+
+  @override
+  String get playlistTopTab => '剧单';
+
+  @override
+  String get allDramasTopTab => '全部短剧';
+
+  @override
+  String get weeklyHitsTitle => '本週爆款推薦';
+
+  @override
+  String get weeklyHitsSubtitle => '本週話題熱劇，一次追完!';
+
+  @override
+  String get weeklyNewTitle => '本週精選新劇';
+
+  @override
+  String get weeklyNewSubtitle => '新劇來襲！追劇節奏啟動';
+
+  @override
+  String get costumeAwardsTitle => '古裝神劇大賞';
+
+  @override
+  String get costumeAwardsSubtitle => '口碑爆棚！古裝控必收片單';
+
+  @override
+  String get localFilter => '本地';
+
+  @override
+  String get asiaFilter => '亚洲';
+
+  @override
+  String get westernFilter => '欧美';
+
+  @override
+  String get subtitlesOnlyFilter => '仅字幕';
+
+  @override
+  String get dubbedFilter => '配音';
+
+  @override
+  String get reversalFilter => '逆袭';
+
+  @override
+  String get modernFilter => '现代';
+
+  @override
+  String get edit => '编辑';
+
+  @override
+  String get done => '完成';
+
+  @override
+  String get visitor => '访客';
+
+  @override
+  String get copyUid => '复制 UID';
+
+  @override
+  String get uidCopied => 'UID 已复制';
+
+  @override
+  String get offlineDownloads => '离线缓存';
+
+  @override
+  String get watchPreferences => '观看偏好';
+
+  @override
+  String get contactSupport => '联系客服';
+
+  @override
+  String get vipBrandName => 'Netshort VIP';
+
+  @override
+  String get mineVipSubtitle => '享受专属权益';
+
+  @override
+  String favoriteEpisodeProgress(int episode, int total) {
+    return '第 $episode 集 / 共 $total 集';
+  }
+
+  @override
+  String watchedToEpisode(int episode) {
+    return '已看至 第 $episode 集';
+  }
+
+  @override
+  String get homeWatchAll => '观看全集';
+
+  @override
+  String get confirmRemove => '确定移除这条内容吗？';
+
+  @override
+  String get followingCountLabel => '追剧数';
+
+  @override
+  String get watchRecordsCountLabel => '观看记录';
+
+  @override
+  String get dataUnavailable => '—';
+
+  @override
+  String get commonQuestions => '常见问题';
+
+  @override
+  String get aboutUs => '关于我们';
+
+  @override
+  String get aboutDescription => '专注于短剧观看与沉浸式追剧体验。';
+
+  @override
+  String versionLabel(String version) {
+    return '版本 $version';
+  }
 }
diff --git a/lib/l10n/app_zh.arb b/lib/l10n/app_zh.arb
index 32ecfa9..9af6280 100644
--- a/lib/l10n/app_zh.arb
+++ b/lib/l10n/app_zh.arb
@@ -16,6 +16,7 @@
   "currentSeries": "当前短剧",
   "discoverTab": "剧场",
   "searchDiscover": "搜索短剧、演员、类型…",
+  "searchCancel": "取消",
   "featured": "精选",
   "recommended": "推荐",
   "fruitShortsBrand": "水果短剧",
@@ -48,7 +49,7 @@
   "authorNoteLabel": "作者声明",
   "reserve": "预约",
   "heatLabel": "{count}热度",
-  "topCharts": "排行榜",
+  "topCharts": "热播榜",
   "newReleases": "新剧",
   "newDramas": "新剧",
   "trendingMicroDramas": "热门短剧",
@@ -94,7 +95,6 @@
   "emptyHint": "有新内容时会显示在这里。",
   "demoCatalogNotice": "三部演示短剧共用同一条本地视频。",
   "myTab": "我的",
-  "localViewer": "本地观众",
   "localDemoProfile": "本地演示档案",
   "continueWatching": "继续观看",
   "episodeRemaining": "第 {episode} 集 · 还剩 {minutes} 分钟",
@@ -122,7 +122,7 @@
       "count": {"type": "int"}
     }
   },
-  "watchedPercent": "已观看 {percent}%",
+  "watchedPercent": "已看 {percent}%",
   "@watchedPercent": {
     "placeholders": {
       "percent": {
@@ -132,14 +132,13 @@
   },
   "resume": "继续播放",
   "history": "历史",
-  "watchlist": "收藏",
   "likedTab": "喜欢",
   "all": "全部",
   "inProgress": "未看完",
   "completed": "已看完",
   "noSavedShows": "这里还没有剧集。",
   "preferences": "偏好设置",
-  "followingTab": "关注",
+  "followingTab": "追剧",
   "animatedTab": "漫剧",
   "recommendedTab": "推荐",
   "noCategoryDramas": "这个分类暂时没有剧集。",
@@ -282,10 +281,6 @@
     }
   },
   "retry": "重试",
-  "pullToRefresh": "下拉刷新",
-  "releaseToRefresh": "松手刷新",
-  "refreshingLabel": "正在刷新…",
-  "noMore": "没有更多了",
   "backToSeries": "返回剧集详情",
   "nextEpisode": "下一集",
   "pause": "暂停",
@@ -341,7 +336,7 @@
   "joinVip": "开通会员",
   "earnRewards": "赚奖励",
   "freeBonus": "领免费奖励",
-  "watchHistory": "观看历史",
+  "watchHistory": "播放历史",
   "settings": "设置",
   "serverAddress": "服务器地址",
   "serverSettings": "服务器设置",
@@ -563,7 +558,7 @@
   "ledgerAdjustment": "余额调整",
   "rankingTab": "榜单",
   "rankingTitle": "热门榜单",
-  "rankingSubtitle": "依据目录实时分区排序。",
+  "rankingSubtitle": "按播放热度实时排序",
   "rankingHot": "热播",
   "rankingNew": "新剧",
   "newReleasesAll": "全部新剧",
@@ -616,5 +611,71 @@
   "danmakuSettings": "弹幕设置",
   "offlineCache": "离线缓存",
   "screenCast": "投屏",
-  "sleepTimer": "定时关闭"
+  "sleepTimer": "定时关闭",
+  "homeSearchHint": "搜索短剧、演员、类型…",
+  "homeSectionFeatured": "精选",
+  "homeSectionNew": "新剧",
+  "homeSectionCategories": "分类",
+  "homeSectionRanking": "榜单",
+  "homeSectionCostume": "古装",
+  "homeSectionCommunity": "社群",
+  "homeTagHot": "热门",
+  "homeTagUplifting": "爽剧",
+  "homeTagSweet": "甜宠",
+  "homeTagFaceSlap": "打脸虐渣",
+  "homeTagAngst": "虐恋",
+  "homeBadgeHot": "热剧",
+  "homeBadgeNew": "新剧",
+  "homeBadgeAnime": "漫剧",
+  "homeGridFilterEmpty": "没有符合筛选条件的短剧",
+  "homeGridClearFilter": "清除筛选",
+  "recommendTopTab": "推荐",
+  "playlistTopTab": "剧单",
+  "allDramasTopTab": "全部短剧",
+  "weeklyHitsTitle": "本週爆款推薦",
+  "weeklyHitsSubtitle": "本週話題熱劇，一次追完!",
+  "weeklyNewTitle": "本週精選新劇",
+  "weeklyNewSubtitle": "新劇來襲！追劇節奏啟動",
+  "costumeAwardsTitle": "古裝神劇大賞",
+  "costumeAwardsSubtitle": "口碑爆棚！古裝控必收片單",
+  "localFilter": "本地",
+  "asiaFilter": "亚洲",
+  "westernFilter": "欧美",
+  "subtitlesOnlyFilter": "仅字幕",
+  "dubbedFilter": "配音",
+  "reversalFilter": "逆袭",
+  "modernFilter": "现代",
+  "edit": "编辑",
+  "done": "完成",
+  "visitor": "访客",
+  "copyUid": "复制 UID",
+  "uidCopied": "UID 已复制",
+  "offlineDownloads": "离线缓存",
+  "watchPreferences": "观看偏好",
+  "contactSupport": "联系客服",
+  "vipBrandName": "Netshort VIP",
+  "mineVipSubtitle": "享受专属权益",
+  "favoriteEpisodeProgress": "第 {episode} 集 / 共 {total} 集",
+  "@favoriteEpisodeProgress": {
+    "placeholders": {
+      "episode": { "type": "int" },
+      "total": { "type": "int" }
+    }
+  },
+  "watchedToEpisode": "已看至 第 {episode} 集",
+  "@watchedToEpisode": { "placeholders": { "episode": { "type": "int" } } },
+  "homeWatchAll": "观看全集",
+  "confirmRemove": "确定移除这条内容吗？",
+  "followingCountLabel": "追剧数",
+  "watchRecordsCountLabel": "观看记录",
+  "dataUnavailable": "—",
+  "commonQuestions": "常见问题",
+  "aboutUs": "关于我们",
+  "aboutDescription": "专注于短剧观看与沉浸式追剧体验。",
+  "versionLabel": "版本 {version}",
+  "@versionLabel": {
+    "placeholders": {
+      "version": { "type": "String" }
+    }
+  }
 }
diff --git a/lib/main.dart b/lib/main.dart
index 74bb23a..a87b4f6 100644
--- a/lib/main.dart
+++ b/lib/main.dart
@@ -1,5 +1,7 @@
 // Author: fruit.com.cn
 
+import 'dart:async';
+
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 
@@ -9,10 +11,10 @@ import 'core/config/server_endpoint.dart';
 
 Future<void> main() async {
   WidgetsFlutterBinding.ensureInitialized();
-  await Future.wait([
-    SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]),
-    ServerEndpoint.load(),
-  ]);
+  await ServerEndpoint.load();
   AppConfig.ready = AppConfig.probeAndApplyBaseUrl();
   runApp(const LumaDramaApp());
+  unawaited(
+    SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]),
+  );
 }
diff --git a/lib/pages/account/account_deactivate_page.dart b/lib/pages/account/account_deactivate_page.dart
index f5a123b..73d4711 100644
--- a/lib/pages/account/account_deactivate_page.dart
+++ b/lib/pages/account/account_deactivate_page.dart
@@ -51,7 +51,7 @@ class _AccountDeactivatePageState extends State<AccountDeactivatePage> {
     final signedIn = context.watch<AuthController>().isSignedIn;
     final canShow = signedIn || _logic.scheduledAt != null;
     return Theme(
-      data: AppTheme.light(),
+      data: AppTheme.dark(),
       child: PlainPageScaffold(
         pageKey: const Key('account-deactivate-page'),
         backKey: const Key('account-deactivate-back'),
diff --git a/lib/pages/account/account_devices_page.dart b/lib/pages/account/account_devices_page.dart
index 99f3101..e35ccb6 100644
--- a/lib/pages/account/account_devices_page.dart
+++ b/lib/pages/account/account_devices_page.dart
@@ -51,7 +51,7 @@ class _AccountDevicesPageState extends State<AccountDevicesPage> {
     final l10n = AppLocalizations.of(context)!;
     final signedIn = context.watch<AuthController>().isSignedIn;
     return Theme(
-      data: AppTheme.light(),
+      data: AppTheme.dark(),
       child: PlainPageScaffold(
         pageKey: const Key('account-devices-page'),
         backKey: const Key('account-devices-back'),
diff --git a/lib/pages/account/account_export_page.dart b/lib/pages/account/account_export_page.dart
index f451b27..4d134cd 100644
--- a/lib/pages/account/account_export_page.dart
+++ b/lib/pages/account/account_export_page.dart
@@ -52,7 +52,7 @@ class _AccountExportPageState extends State<AccountExportPage> {
     final l10n = AppLocalizations.of(context)!;
     final signedIn = context.watch<AuthController>().isSignedIn;
     return Theme(
-      data: AppTheme.light(),
+      data: AppTheme.dark(),
       child: PlainPageScaffold(
         pageKey: const Key('account-export-page'),
         backKey: const Key('account-export-back'),
diff --git a/lib/pages/account/account_profile_page.dart b/lib/pages/account/account_profile_page.dart
index 46ebb99..87b15d4 100644
--- a/lib/pages/account/account_profile_page.dart
+++ b/lib/pages/account/account_profile_page.dart
@@ -70,7 +70,7 @@ class _AccountProfilePageState extends State<AccountProfilePage> {
     final l10n = AppLocalizations.of(context)!;
     final signedIn = context.watch<AuthController>().isSignedIn;
     return Theme(
-      data: AppTheme.light(),
+      data: AppTheme.dark(),
       child: PlainPageScaffold(
         pageKey: const Key('account-profile-page'),
         backKey: const Key('account-profile-back'),
@@ -181,6 +181,7 @@ class _AccountProfilePageState extends State<AccountProfilePage> {
 
   Widget _genderField(AppLocalizations l10n) => DropdownButtonFormField<String>(
     key: const Key('account-gender'),
+    isExpanded: true,
     initialValue: _gender,
     decoration: InputDecoration(labelText: l10n.accountGender),
     items: [
diff --git a/lib/pages/auth/auth_form_widgets.dart b/lib/pages/auth/auth_form_widgets.dart
index 81a58a7..b46fd1a 100644
--- a/lib/pages/auth/auth_form_widgets.dart
+++ b/lib/pages/auth/auth_form_widgets.dart
@@ -268,7 +268,7 @@ class _ModeSegment extends StatelessWidget {
         duration: _segmentDuration,
         alignment: Alignment.center,
         decoration: BoxDecoration(
-          color: selected ? AppColors.blue : Colors.transparent,
+          color: selected ? AppColors.blue : AppColors.transparent,
           borderRadius: BorderRadius.circular(18),
         ),
         child: Stack(
diff --git a/lib/pages/auth/auth_view.dart b/lib/pages/auth/auth_view.dart
index 59b38b2..f0906ce 100644
--- a/lib/pages/auth/auth_view.dart
+++ b/lib/pages/auth/auth_view.dart
@@ -12,6 +12,7 @@ import '../../core/platform/keyboard_inset.dart';
 import '../../core/theme/app_colors.dart';
 import '../../core/theme/app_dimens.dart';
 import '../../core/theme/app_theme.dart';
+import '../../core/widgets/centered_toast.dart';
 import '../../core/widgets/subpage_header.dart';
 import '../../l10n/app_localizations.dart';
 import 'auth_logic.dart';
@@ -39,9 +40,9 @@ const double _buttonRadius = 25;
 const double _errorOpacity = 0.10;
 const double _errorBorderOpacity = 0.28;
 const double _enterSlideDistance = 16;
-const double _topContentPadding = 64;
+const double _topContentPadding = 56;
 const double _bottomContentPadding = 28;
-const double _compactTopContentPadding = 48;
+const double _compactTopContentPadding = 40;
 const double _compactHeightBreakpoint = 720;
 const double _compactBrandGap = 16;
 const double _glowSize = 280;
@@ -158,6 +159,19 @@ class _AuthPageState extends State<AuthPage> {
     }
   }
 
+  /// 点在当前邮箱或密码框之外时取消焦点。
+  void _releaseFieldFocus(PointerDownEvent event) {
+    final focus = FocusManager.instance.primaryFocus;
+    if (focus != _emailFocus && focus != _passwordFocus) return;
+    final renderObject = focus?.context?.findRenderObject();
+    if (renderObject is! RenderBox || !renderObject.hasSize) {
+      focus?.unfocus();
+      return;
+    }
+    final bounds = renderObject.localToGlobal(Offset.zero) & renderObject.size;
+    if (!bounds.contains(event.position)) focus?.unfocus();
+  }
+
   void _scheduleRevealFocusedField() {
     WidgetsBinding.instance.addPostFrameCallback((_) {
       if (mounted) _revealFocusedField();
@@ -227,6 +241,7 @@ class _AuthPageState extends State<AuthPage> {
       _logic.errorMessage = null;
     });
     final auth = context.read<AuthController>();
+    String? failureMessage;
     try {
       if (_logic.signUpMode) {
         await auth.register(
@@ -242,21 +257,21 @@ class _AuthPageState extends State<AuthPage> {
       if (!mounted) return;
       Navigator.of(context).maybePop();
     } on ApiException catch (error) {
-      if (!mounted) return;
-      setState(() => _logic.errorMessage = error.message);
+      failureMessage = error.message;
     } catch (_) {
-      if (!mounted) return;
-      setState(() => _logic.errorMessage = l10n.authNetworkError);
+      failureMessage = l10n.authNetworkError;
     } finally {
       if (mounted) setState(() => _logic.busy = false);
     }
+    if (!mounted || failureMessage == null) return;
+    showCenteredToast(context, failureMessage);
   }
 
   @override
   Widget build(BuildContext context) {
     final l10n = AppLocalizations.of(context)!;
     return Theme(
-      data: AppTheme.light(),
+      data: AppTheme.dark(),
       child: Scaffold(
         resizeToAvoidBottomInset: false,
         backgroundColor: AppColors.ink,
@@ -323,26 +338,31 @@ class _AuthPageState extends State<AuthPage> {
                       effectiveKeyboardInset(context, _keyboardInset);
                   final available = constraints.maxHeight - top - bottom;
                   final minHeight = available > 0 ? available : 0.0;
-                  return AutofillGroup(
-                    child: SingleChildScrollView(
-                      key: const Key('auth-scroll'),
-                      controller: _scrollController,
-                      keyboardDismissBehavior:
-                          ScrollViewKeyboardDismissBehavior.onDrag,
-                      padding: EdgeInsets.fromLTRB(
-                        AppDimens.pageHorizontal,
-                        top,
-                        AppDimens.pageHorizontal,
-                        bottom,
-                      ),
-                      child: ConstrainedBox(
-                        constraints: BoxConstraints(minHeight: minHeight),
-                        child: Center(
-                          child: ConstrainedBox(
-                            constraints: const BoxConstraints(
-                              maxWidth: _contentMaxWidth,
+                  return Listener(
+                    behavior: HitTestBehavior.translucent,
+                    onPointerDown: _releaseFieldFocus,
+                    child: AutofillGroup(
+                      child: SingleChildScrollView(
+                        key: const Key('auth-scroll'),
+                        controller: _scrollController,
+                        keyboardDismissBehavior:
+                            ScrollViewKeyboardDismissBehavior.onDrag,
+                        padding: EdgeInsets.fromLTRB(
+                          AppDimens.pageHorizontal,
+                          top,
+                          AppDimens.pageHorizontal,
+                          bottom,
+                        ),
+                        child: ConstrainedBox(
+                          constraints: BoxConstraints(minHeight: minHeight),
+                          child: Align(
+                            alignment: Alignment.topCenter,
+                            child: ConstrainedBox(
+                              constraints: const BoxConstraints(
+                                maxWidth: _contentMaxWidth,
+                              ),
+                              child: _content(l10n, compact: compact),
                             ),
-                            child: _content(l10n, compact: compact),
                           ),
                         ),
                       ),
@@ -408,7 +428,7 @@ class _AuthPageState extends State<AuthPage> {
 
   Widget _landing(AppLocalizations l10n) => Column(
     key: const Key('auth-landing'),
-    mainAxisAlignment: MainAxisAlignment.center,
+    mainAxisAlignment: MainAxisAlignment.start,
     crossAxisAlignment: CrossAxisAlignment.stretch,
     children: [
       Center(
diff --git a/lib/pages/auth/auth_widgets.dart b/lib/pages/auth/auth_widgets.dart
index 9355158..aaf377a 100644
--- a/lib/pages/auth/auth_widgets.dart
+++ b/lib/pages/auth/auth_widgets.dart
@@ -76,7 +76,7 @@ class _AuthCard extends StatelessWidget {
       decoration: BoxDecoration(
         color: AppColors.card,
         borderRadius: BorderRadius.circular(_cardRadius),
-        boxShadow: const [AppTheme.cardShadow],
+        border: Border.all(color: AppColors.border),
       ),
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.stretch,
@@ -141,7 +141,7 @@ class _AuthModeSwitch extends StatelessWidget {
       style: TextButton.styleFrom(
         minimumSize: const Size(0, _minTapTarget),
         padding: EdgeInsets.zero,
-        overlayColor: Colors.transparent,
+        overlayColor: AppColors.transparent,
         splashFactory: NoSplash.splashFactory,
         shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(22)),
       ),
diff --git a/lib/pages/auth/phone_auth_sheet.dart b/lib/pages/auth/phone_auth_sheet.dart
index c37f6c7..9fe651b 100644
--- a/lib/pages/auth/phone_auth_sheet.dart
+++ b/lib/pages/auth/phone_auth_sheet.dart
@@ -11,6 +11,7 @@ import '../../core/data/services/auth_controller.dart';
 import '../../core/platform/haptics.dart';
 import '../../core/platform/keyboard_inset.dart';
 import '../../core/theme/app_colors.dart';
+import '../../core/widgets/centered_toast.dart';
 import '../../l10n/app_localizations.dart';
 
 const double _fieldHeight = 52;
@@ -27,8 +28,8 @@ Future<bool?> showPhoneAuthSheet(BuildContext context, {bool signUp = false}) {
     context: context,
     isScrollControlled: true,
     useSafeArea: true,
-    backgroundColor: Colors.transparent,
-    barrierColor: Colors.black.withValues(alpha: 0.62),
+    backgroundColor: AppColors.transparent,
+    barrierColor: AppColors.mediaBlack.withValues(alpha: 0.62),
     builder: (_) => PhoneAuthSheet(initialSignUp: signUp),
   );
 }
@@ -164,6 +165,7 @@ class _PhoneAuthSheetState extends State<PhoneAuthSheet> {
     });
     final haptics = context.read<Haptics>();
     final auth = context.read<AuthController>();
+    String? failureMessage;
     await haptics.lightImpact();
     try {
       await auth.sendOtp(
@@ -173,16 +175,20 @@ class _PhoneAuthSheetState extends State<PhoneAuthSheet> {
       if (!mounted) return;
       _startCountdown();
       setState(() => _error = null);
-      ScaffoldMessenger.of(context)
-          .showSnackBar(SnackBar(content: Text(l10n.authCodeSent)));
+      ScaffoldMessenger.of(
+        context,
+      ).showSnackBar(SnackBar(content: Text(l10n.authCodeSent)));
       _codeFocus.requestFocus();
     } on ApiException catch (error) {
-      if (mounted) setState(() => _error = error.message);
+      failureMessage = error.message;
     } catch (_) {
-      if (mounted) setState(() => _error = l10n.authNetworkError);
+      failureMessage = l10n.authNetworkError;
     } finally {
       if (mounted) setState(() => _sending = false);
     }
+    if (mounted && failureMessage != null) {
+      showCenteredToast(context, failureMessage);
+    }
   }
 
   void _startCountdown() {
@@ -212,6 +218,7 @@ class _PhoneAuthSheetState extends State<PhoneAuthSheet> {
     });
     final haptics = context.read<Haptics>();
     final auth = context.read<AuthController>();
+    String? failureMessage;
     await haptics.lightImpact();
     try {
       if (_signUp) {
@@ -221,12 +228,15 @@ class _PhoneAuthSheetState extends State<PhoneAuthSheet> {
       }
       if (mounted) Navigator.of(context).pop(true);
     } on ApiException catch (error) {
-      if (mounted) setState(() => _error = error.message);
+      failureMessage = error.message;
     } catch (_) {
-      if (mounted) setState(() => _error = l10n.authNetworkError);
+      failureMessage = l10n.authNetworkError;
     } finally {
       if (mounted) setState(() => _submitting = false);
     }
+    if (mounted && failureMessage != null) {
+      showCenteredToast(context, failureMessage);
+    }
   }
 
   void _switchMode() {
diff --git a/lib/pages/create/create_view.dart b/lib/pages/create/create_view.dart
index bf6e729..d354834 100644
--- a/lib/pages/create/create_view.dart
+++ b/lib/pages/create/create_view.dart
@@ -13,8 +13,8 @@ const double _arrowSize = 36;
 const double _illustrationWidth = 156;
 const double _illustrationHeight = 88;
 const double _mottoLineWidth = 96;
-const List<Color> _aiGradientStart = [Color(0xFFFFE3D0), Color(0xFFFFC9AC)];
-const List<Color> _uploadGradient = [Color(0xFFFFEAD9), Color(0xFFFFD3B3)];
+const List<Color> _aiGradientStart = [AppColors.raised, AppColors.goldCard];
+const List<Color> _uploadGradient = [AppColors.card, AppColors.raised];
 
 /// 创作页：AI 制作与上传发布两张主卡，底部品牌标语。
 class CreatePage extends StatelessWidget {
@@ -24,7 +24,7 @@ class CreatePage extends StatelessWidget {
   Widget build(BuildContext context) {
     final l10n = AppLocalizations.of(context)!;
     return Theme(
-      data: AppTheme.light(),
+      data: AppTheme.dark(),
       child: SafeArea(
         bottom: false,
         child: ListView(
@@ -131,7 +131,7 @@ class _CreateCard extends StatelessWidget {
         boxShadow: const [AppTheme.cardShadow],
       ),
       child: Material(
-        color: Colors.transparent,
+        color: AppColors.transparent,
         borderRadius: BorderRadius.circular(_cardRadius),
         clipBehavior: Clip.antiAlias,
         child: InkWell(
@@ -296,7 +296,7 @@ class _UploadIllustration extends StatelessWidget {
               width: 30,
               height: 20,
               decoration: BoxDecoration(
-                color: Colors.white.withValues(alpha: 0.55),
+                color: AppColors.onSurface.withValues(alpha: 0.12),
                 borderRadius: BorderRadius.circular(4),
               ),
               child: const Icon(
diff --git a/lib/pages/discover/discover_logic.dart b/lib/pages/discover/discover_logic.dart
index d500ed7..c2d9f53 100644
--- a/lib/pages/discover/discover_logic.dart
+++ b/lib/pages/discover/discover_logic.dart
@@ -61,6 +61,14 @@ class DiscoverLogic extends ChangeNotifier {
     if (query.isNotEmpty) unawaited(_runSearch(query));
   }
 
+  /// 用当前关键词重新请求第一页；刷新期间保留旧结果。
+  Future<void> refreshSearch() async {
+    final query = search.text.trim();
+    if (query.isEmpty) return;
+    _searchTimer?.cancel();
+    await _runSearch(query, preserveResults: true);
+  }
+
   void _resetSearch() {
     _searchTimer?.cancel();
     _searchRequest++;
@@ -85,7 +93,7 @@ class DiscoverLogic extends ChangeNotifier {
     _searchTimer = Timer(searchDebounce, () => unawaited(_runSearch(query)));
   }
 
-  Future<void> _runSearch(String query) async {
+  Future<void> _runSearch(String query, {bool preserveResults = false}) async {
     final repository = searchRepository;
     if (repository == null) return;
     final request = ++_searchRequest;
@@ -101,9 +109,17 @@ class DiscoverLogic extends ChangeNotifier {
       if (request != _searchRequest) return;
       searchResults = result.list;
     } on ApiException catch (exception) {
-      _applySearchError(request, exception.message);
+      _applySearchError(
+        request,
+        exception.message,
+        preserveResults: preserveResults,
+      );
     } catch (_) {
-      _applySearchError(request, 'searchFailed');
+      _applySearchError(
+        request,
+        'searchFailed',
+        preserveResults: preserveResults,
+      );
     } finally {
       if (request == _searchRequest) {
         searchLoading = false;
@@ -112,26 +128,17 @@ class DiscoverLogic extends ChangeNotifier {
     }
   }
 
-  void _applySearchError(int request, String message) {
+  void _applySearchError(
+    int request,
+    String message, {
+    bool preserveResults = false,
+  }) {
     if (request != _searchRequest) return;
+    if (preserveResults && searchResults.isNotEmpty) return;
     searchError = message;
     searchResults = const [];
   }
 
-  /// 从播放器发起的搜索请求只在剧场页可见时抢焦点。
-  void syncSearch({
-    required bool active,
-    required int request,
-    required int previousRequest,
-    required bool Function() isActive,
-  }) {
-    if (!active || request == previousRequest) return;
-    WidgetsBinding.instance.addPostFrameCallback((_) {
-      if (isActive()) searchFocus.requestFocus();
-    });
-    WidgetsBinding.instance.scheduleFrame();
-  }
-
   void act(
     BuildContext context,
     DiscoverPageAction action, {
diff --git a/lib/pages/discover/discover_types.dart b/lib/pages/discover/discover_types.dart
index d369cc9..8443cb6 100644
--- a/lib/pages/discover/discover_types.dart
+++ b/lib/pages/discover/discover_types.dart
@@ -4,8 +4,8 @@ import 'package:flutter/foundation.dart';
 
 import '../../core/data/models/drama.dart';
 
-/// 剧场页与根导航之间的动作。
-enum DiscoverPageAction { home, create, my }
+/// 推荐页与根导航之间的动作。
+enum DiscoverPageAction { home, recommend, following, mine }
 
 /// 剧场页导航回调；没有 `onAction` 时按独立页面处理。
 class DiscoverPageCallbacks {
diff --git a/lib/pages/discover/discover_view.dart b/lib/pages/discover/discover_view.dart
index ef3771a..6fe6d64 100644
--- a/lib/pages/discover/discover_view.dart
+++ b/lib/pages/discover/discover_view.dart
@@ -17,8 +17,8 @@ import '../../core/formatting/error_text.dart';
 import '../../core/theme/app_colors.dart';
 import '../../core/theme/app_dimens.dart';
 import '../../core/theme/app_theme.dart';
-import '../../core/widgets/app_bottom_nav.dart';
 import '../../core/widgets/app_pull_to_refresh.dart';
+import '../../core/widgets/app_root_tab.dart';
 import '../../core/widgets/catalog_debug_info.dart';
 import '../../core/widgets/catalog_endpoint_editor.dart';
 import '../../core/widgets/empty_state.dart';
@@ -35,8 +35,8 @@ import 'widgets/discover_header.dart';
 import 'widgets/discover_search_results.dart';
 import 'widgets/drama_grid.dart';
 
-const Color _filterIconColor = Color(0xFF7B61FF);
-const Color _newIconColor = Color(0xFF14B8A6);
+const Color _filterIconColor = AppColors.blueSoft;
+const Color _newIconColor = AppColors.blueSoft;
 const double _toolbarHeight = 36;
 const double _toolbarGap = 10;
 const double _toolbarRadius = 10;
@@ -56,14 +56,10 @@ class DiscoverPage extends StatefulWidget {
   const DiscoverPage({
     super.key,
     this.active = true,
-    this.searchRequest = 0,
-    this.focusSearch = false,
     this.callbacks = const DiscoverPageCallbacks(),
   });
 
   final bool active;
-  final int searchRequest;
-  final bool focusSearch;
   final DiscoverPageCallbacks callbacks;
 
   @override
@@ -89,7 +85,6 @@ class _DiscoverPageState extends State<DiscoverPage> {
     logic.scroll.addListener(_onScroll);
     theater.addListener(_onTheaterChanged);
     unawaited(theater.select(null));
-    if (widget.focusSearch) _focusOnFirstFrame();
   }
 
   void _onScroll() {
@@ -106,23 +101,6 @@ class _DiscoverPageState extends State<DiscoverPage> {
     if (mounted) setState(() {});
   }
 
-  void _focusOnFirstFrame() {
-    WidgetsBinding.instance.addPostFrameCallback((_) {
-      if (mounted && widget.active) logic.openSearch();
-    });
-  }
-
-  @override
-  void didUpdateWidget(covariant DiscoverPage oldWidget) {
-    super.didUpdateWidget(oldWidget);
-    logic.syncSearch(
-      active: widget.active,
-      request: widget.searchRequest,
-      previousRequest: oldWidget.searchRequest,
-      isActive: () => mounted && widget.active,
-    );
-  }
-
   @override
   void dispose() {
     logic.scroll.removeListener(_onScroll);
@@ -149,7 +127,7 @@ class _DiscoverPageState extends State<DiscoverPage> {
       key: const Key('theater-page-surface'),
       color: AppColors.ink,
       child: SafeArea(
-        bottom: !embedded,
+        bottom: false,
         child: Column(
           children: [
             DiscoverHeader(
@@ -159,15 +137,15 @@ class _DiscoverPageState extends State<DiscoverPage> {
               loading: logic.searchLoading,
             ),
             Expanded(child: _feed(l10n, categories)),
-            if (!embedded) _bottomNav(l10n),
+            if (!embedded) _bottomNav(),
           ],
         ),
       ),
     );
     return AnnotatedRegion<SystemUiOverlayStyle>(
-      value: SystemUiOverlayStyle.dark,
+      value: SystemUiOverlayStyle.light,
       child: Theme(
-        data: AppTheme.light(),
+        data: AppTheme.dark(),
         child: embedded
             ? content
             : Scaffold(backgroundColor: AppColors.ink, body: content),
@@ -228,13 +206,13 @@ class _DiscoverPageState extends State<DiscoverPage> {
           color: AppColors.ink,
           border: Border(
             bottom: BorderSide(
-              color: pinned ? AppColors.border : Colors.transparent,
+              color: pinned ? AppColors.border : AppColors.transparent,
             ),
           ),
           boxShadow: pinned
               ? const [
                   BoxShadow(
-                    color: Color(0x14000000),
+                    color: AppColors.shadowSubtle,
                     blurRadius: 8,
                     offset: Offset(0, 2),
                   ),
@@ -419,7 +397,7 @@ class _DiscoverPageState extends State<DiscoverPage> {
                 _categoryUnderlineHeight,
               ),
               painter: CategoryUnderlinePainter(
-                color: selected ? AppColors.blue : Colors.transparent,
+                color: selected ? AppColors.blue : AppColors.transparent,
               ),
             ),
           ],
@@ -611,39 +589,17 @@ class _DiscoverPageState extends State<DiscoverPage> {
     unawaited(playDramaFromCatalog(context, drama));
   }
 
-  Widget _bottomNav(AppLocalizations l10n) => AppBottomNav(
-    items: [
-      AppBottomNavItem(
-        tabKey: const Key('discover-nav-home'),
-        icon: Icons.home_outlined,
-        selectedIcon: Icons.home_rounded,
-        label: l10n.homeTab,
-        onTap: () => _act(DiscoverPageAction.home),
-      ),
-      AppBottomNavItem(
-        tabKey: const Key('discover-nav-current'),
-        icon: Icons.explore_outlined,
-        selectedIcon: Icons.explore_rounded,
-        label: l10n.theaterTab,
-        selected: true,
-        onTap: () {},
-      ),
-      AppBottomNavItem(
-        tabKey: const Key('discover-nav-create'),
-        icon: Icons.add_box_outlined,
-        selectedIcon: Icons.add_box_rounded,
-        label: l10n.createTab,
-        onTap: () => _act(DiscoverPageAction.create),
-      ),
-      AppBottomNavItem(
-        tabKey: const Key('discover-nav-my'),
-        icon: Icons.person_outline_rounded,
-        selectedIcon: Icons.person_rounded,
-        label: l10n.myTab,
-        onTap: () => _act(DiscoverPageAction.my),
-      ),
-    ],
+  Widget _bottomNav() => AppRootBottomNav(
+    selected: AppRootTab.recommend,
+    onSelected: (tab) => _act(_actionOf(tab)),
   );
+
+  DiscoverPageAction _actionOf(AppRootTab tab) => switch (tab) {
+    AppRootTab.home => DiscoverPageAction.home,
+    AppRootTab.recommend => DiscoverPageAction.recommend,
+    AppRootTab.following => DiscoverPageAction.following,
+    AppRootTab.mine => DiscoverPageAction.mine,
+  };
 }
 
 /// 分类 tab 的弧形选中线。
diff --git a/lib/pages/discover/search_page.dart b/lib/pages/discover/search_page.dart
new file mode 100644
index 0000000..f93779c
--- /dev/null
+++ b/lib/pages/discover/search_page.dart
@@ -0,0 +1,292 @@
+// Author: fruit.com.cn
+
+import 'dart:async';
+
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:provider/provider.dart';
+
+import '../../core/data/repositories/search_repository.dart';
+import '../../core/formatting/error_text.dart';
+import '../../core/theme/app_colors.dart';
+import '../../core/theme/app_dimens.dart';
+import '../../core/theme/app_theme.dart';
+import '../../core/widgets/app_pull_to_refresh.dart';
+import '../../core/widgets/drama_grid_skeleton.dart';
+import '../../core/widgets/empty_state.dart';
+import '../../l10n/app_localizations.dart';
+import '../player/open_player.dart';
+import 'discover_binding.dart';
+import 'discover_logic.dart';
+import 'widgets/search_result_card.dart';
+
+class SearchPage extends StatefulWidget {
+  const SearchPage({super.key});
+
+  @override
+  State<SearchPage> createState() => _SearchPageState();
+}
+
+class _SearchPageState extends State<SearchPage> {
+  late final DiscoverLogic _logic;
+
+  @override
+  void initState() {
+    super.initState();
+    _logic = DiscoverBinding().create(search: context.read<SearchRepository>());
+    _logic.addListener(_rebuild);
+  }
+
+  void _rebuild() {
+    if (mounted) setState(() {});
+  }
+
+  @override
+  void dispose() {
+    _logic
+      ..removeListener(_rebuild)
+      ..dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final l10n = AppLocalizations.of(context)!;
+    return AnnotatedRegion<SystemUiOverlayStyle>(
+      value: SystemUiOverlayStyle.light,
+      child: Theme(
+        data: AppTheme.dark(),
+        child: MediaQuery.removeViewInsets(
+          context: context,
+          removeBottom: true,
+          child: Scaffold(
+            key: const Key('search-page'),
+            backgroundColor: AppColors.appBackground,
+            resizeToAvoidBottomInset: false,
+            body: SafeArea(
+              bottom: false,
+              child: Column(
+                children: [
+                  _header(l10n),
+                  Expanded(
+                    child: AppPullToRefresh(
+                      key: const Key('search-refresh'),
+                      onRefresh: _logic.refreshSearch,
+                      child: _body(l10n),
+                    ),
+                  ),
+                ],
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+
+  Widget _header(AppLocalizations l10n) {
+    return Padding(
+      padding: const EdgeInsets.fromLTRB(8, 6, 14, 8),
+      child: SizedBox(
+        height: AppDimens.searchHeight,
+        child: Row(
+          children: [
+            SizedBox.square(
+              dimension: AppDimens.buttonMedium,
+              child: IconButton(
+                key: const Key('search-back'),
+                padding: EdgeInsets.zero,
+                onPressed: () => Navigator.of(context).maybePop(),
+                icon: const Icon(
+                  Icons.arrow_back_ios_new_rounded,
+                  color: AppColors.textPrimary,
+                  size: 22,
+                ),
+              ),
+            ),
+            const SizedBox(width: AppDimens.spaceSm),
+            Expanded(child: _field(l10n)),
+            const SizedBox(width: AppDimens.spaceSm),
+            TextButton(
+              key: const Key('search-cancel'),
+              onPressed: () => Navigator.of(context).maybePop(),
+              child: Text(l10n.searchCancel),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget _field(AppLocalizations l10n) {
+    final hasText = _logic.search.text.isNotEmpty;
+    return Container(
+      key: const Key('search-field'),
+      height: AppDimens.searchHeight,
+      padding: const EdgeInsets.symmetric(horizontal: AppDimens.spaceMd),
+      decoration: BoxDecoration(
+        color: AppColors.contentSurface,
+        borderRadius: BorderRadius.circular(AppDimens.searchRadius),
+      ),
+      child: Row(
+        children: [
+          const Icon(
+            Icons.search_rounded,
+            color: AppColors.textSecondary,
+            size: 18,
+          ),
+          const SizedBox(width: AppDimens.spaceSm),
+          Expanded(
+            child: TextField(
+              key: const Key('discover-search'),
+              controller: _logic.search,
+              focusNode: _logic.searchFocus,
+              autofocus: true,
+              onChanged: (_) => _logic.onSearchChanged(),
+              textInputAction: TextInputAction.search,
+              style: const TextStyle(
+                color: AppColors.textPrimary,
+                fontSize: 14,
+              ),
+              decoration: InputDecoration(
+                isDense: true,
+                hintText: l10n.searchDiscover,
+                hintStyle: const TextStyle(
+                  color: AppColors.textSecondary,
+                  fontSize: 13,
+                ),
+                border: InputBorder.none,
+                enabledBorder: InputBorder.none,
+                focusedBorder: InputBorder.none,
+                contentPadding: EdgeInsets.zero,
+              ),
+              scrollPadding: EdgeInsets.zero,
+            ),
+          ),
+          if (_logic.searchLoading)
+            const SizedBox.square(
+              dimension: 16,
+              child: CircularProgressIndicator(
+                strokeWidth: 2,
+                color: AppColors.textPrimary,
+              ),
+            )
+          else if (hasText)
+            IconButton(
+              key: const Key('search-clear'),
+              padding: EdgeInsets.zero,
+              constraints: const BoxConstraints.tightFor(width: 24, height: 24),
+              onPressed: () {
+                _logic.search.clear();
+                _logic.onSearchChanged();
+                _logic.searchFocus.requestFocus();
+              },
+              icon: const Icon(
+                Icons.close_rounded,
+                color: AppColors.textSecondary,
+                size: 16,
+              ),
+            ),
+        ],
+      ),
+    );
+  }
+
+  Widget _body(AppLocalizations l10n) {
+    if (!_logic.hasSearchQuery) {
+      return _stateScroll(
+        EmptyState(
+          key: const Key('search-idle'),
+          icon: Icons.search_rounded,
+          title: l10n.searchDiscover,
+        ),
+      );
+    }
+    if (_logic.searchResults.isNotEmpty) {
+      return _resultsGrid();
+    }
+    if (_logic.searchLoading) {
+      return const DramaGridSkeleton(
+        key: Key('search-loading-skeleton'),
+        columns: 2,
+        horizontalPadding: AppDimens.feedPageHorizontal,
+        crossAxisSpacing: AppDimens.searchResultGap,
+        mainAxisSpacing: AppDimens.searchResultRowGap,
+        itemCount: 6,
+        physics: AppPullToRefresh.physics,
+      );
+    }
+    if (_logic.searchError != null) {
+      return _stateScroll(
+        EmptyState(
+          key: const Key('search-error'),
+          icon: Icons.cloud_off_rounded,
+          title: errorText(l10n, _logic.searchError, l10n.searchFailed),
+          actionLabel: l10n.retry,
+          onAction: _logic.retrySearch,
+        ),
+      );
+    }
+    return _stateScroll(
+      EmptyState(
+        key: const Key('search-empty'),
+        icon: Icons.search_off_rounded,
+        title: l10n.noSearchResults,
+        subtitle: l10n.emptyHint,
+      ),
+    );
+  }
+
+  Widget _stateScroll(Widget child) {
+    return LayoutBuilder(
+      builder: (context, constraints) => ListView(
+        physics: AppPullToRefresh.physics,
+        children: [
+          SizedBox(
+            height: constraints.maxHeight,
+            child: Center(child: child),
+          ),
+        ],
+      ),
+    );
+  }
+
+  Widget _resultsGrid() {
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        final width =
+            (constraints.maxWidth -
+                AppDimens.feedPageHorizontal * 2 -
+                AppDimens.searchResultGap) /
+            2;
+        final itemExtent =
+            width / AppDimens.cardCoverAspectRatio +
+            AppDimens.searchResultTextExtent;
+        return GridView.builder(
+          key: const Key('search-results-grid'),
+          physics: AppPullToRefresh.physics,
+          padding: const EdgeInsets.fromLTRB(
+            AppDimens.feedPageHorizontal,
+            AppDimens.spaceMd,
+            AppDimens.feedPageHorizontal,
+            AppDimens.spaceXl,
+          ),
+          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+            crossAxisCount: 2,
+            crossAxisSpacing: AppDimens.searchResultGap,
+            mainAxisSpacing: AppDimens.searchResultRowGap,
+            mainAxisExtent: itemExtent,
+          ),
+          itemCount: _logic.searchResults.length,
+          itemBuilder: (context, index) {
+            final drama = _logic.searchResults[index];
+            return SearchResultCard(
+              drama: drama,
+              onTap: () => unawaited(playDramaFromCatalog(context, drama)),
+            );
+          },
+        );
+      },
+    );
+  }
+}
diff --git a/lib/pages/discover/widgets/discover_search_field.dart b/lib/pages/discover/widgets/discover_search_field.dart
index 345d408..0ddcc2f 100644
--- a/lib/pages/discover/widgets/discover_search_field.dart
+++ b/lib/pages/discover/widgets/discover_search_field.dart
@@ -97,7 +97,7 @@ class _DiscoverSearchFieldState extends State<DiscoverSearchField> {
           color: AppColors.card,
           borderRadius: BorderRadius.circular(_searchRadius),
           border: Border.all(
-            color: _focused ? AppColors.blue : Colors.transparent,
+            color: _focused ? AppColors.blue : AppColors.transparent,
           ),
         ),
         child: Row(
diff --git a/lib/pages/discover/widgets/discover_search_results.dart b/lib/pages/discover/widgets/discover_search_results.dart
index dfaa0d5..51b9281 100644
--- a/lib/pages/discover/widgets/discover_search_results.dart
+++ b/lib/pages/discover/widgets/discover_search_results.dart
@@ -4,6 +4,7 @@ import 'package:flutter/material.dart';
 
 import '../../../core/data/models/drama.dart';
 import '../../../core/formatting/error_text.dart';
+import '../../../core/theme/app_colors.dart';
 import '../../../core/widgets/empty_state.dart';
 import '../../../l10n/app_localizations.dart';
 import 'drama_grid.dart';
@@ -38,7 +39,15 @@ class DiscoverSearchResults extends StatelessWidget {
     if (loading) {
       return const Padding(
         padding: EdgeInsets.symmetric(vertical: 80),
-        child: Center(child: CircularProgressIndicator(strokeWidth: 2)),
+        child: Center(
+          child: SizedBox.square(
+            dimension: 20,
+            child: CircularProgressIndicator(
+              strokeWidth: 2,
+              color: AppColors.textPrimary,
+            ),
+          ),
+        ),
       );
     }
     final message = error;
diff --git a/lib/pages/discover/widgets/drama_grid.dart b/lib/pages/discover/widgets/drama_grid.dart
index b58d8cf..a76d7eb 100644
--- a/lib/pages/discover/widgets/drama_grid.dart
+++ b/lib/pages/discover/widgets/drama_grid.dart
@@ -23,8 +23,8 @@ const double _tagChipFontSize = 11;
 const double _heatFontSize = 9;
 const double _heatIconSize = 11;
 const int _maxTags = 3;
-const Color _heatBackground = Color(0x99000000);
-const Color _tagChipBackground = Color(0xFFF4F1EE);
+const Color _heatBackground = AppColors.overlayMedium;
+const Color _tagChipBackground = AppColors.raised;
 final RegExp _tagSplitter = RegExp(r'[,/、·]');
 
 /// 剧场/分类页共用的双列剧目网格。
@@ -231,11 +231,11 @@ class _DiscoverCoverImage extends StatelessWidget {
 
   Widget _placeholder() {
     return const ColoredBox(
-      color: AppColors.card,
+      color: AppColors.raised,
       child: Center(
         child: Icon(
           Icons.image_not_supported_outlined,
-          color: AppColors.muted,
+          color: AppColors.subtle,
           size: 32,
         ),
       ),
diff --git a/lib/pages/discover/widgets/feed_banner_carousel.dart b/lib/pages/discover/widgets/feed_banner_carousel.dart
index b48cc83..839071c 100644
--- a/lib/pages/discover/widgets/feed_banner_carousel.dart
+++ b/lib/pages/discover/widgets/feed_banner_carousel.dart
@@ -183,8 +183,8 @@ class _FeedBannerCarouselState extends State<FeedBannerCarousel> {
                 begin: Alignment.topCenter,
                 end: Alignment.bottomCenter,
                 colors: drama == null
-                    ? const [Color(0x00000000), Color(0x8A0B0C10)]
-                    : const [Color(0x00000000), Color(0xE6000000)],
+                    ? const [AppColors.transparent, AppColors.bannerScrimMid]
+                    : const [AppColors.transparent, AppColors.bannerScrimEnd],
               ),
             ),
           ),
@@ -232,7 +232,7 @@ class _FeedBannerCarouselState extends State<FeedBannerCarousel> {
       child: dramaId == null
           ? card
           : Material(
-              color: Colors.transparent,
+              color: AppColors.transparent,
               borderRadius: borderRadius,
               clipBehavior: Clip.antiAlias,
               child: InkWell(
diff --git a/lib/pages/discover/widgets/search_result_card.dart b/lib/pages/discover/widgets/search_result_card.dart
new file mode 100644
index 0000000..ad6043f
--- /dev/null
+++ b/lib/pages/discover/widgets/search_result_card.dart
@@ -0,0 +1,104 @@
+// Author: fruit.com.cn
+
+import 'package:flutter/material.dart';
+
+import '../../../core/data/models/drama.dart';
+import '../../../core/theme/app_colors.dart';
+import '../../../core/theme/app_dimens.dart';
+import '../../../core/widgets/cover_play_count.dart';
+import '../../../core/widgets/remote_image.dart';
+
+class SearchResultCard extends StatelessWidget {
+  const SearchResultCard({super.key, required this.drama, required this.onTap});
+
+  final Drama drama;
+  final VoidCallback onTap;
+
+  @override
+  Widget build(BuildContext context) {
+    final tags = _tags();
+    return Material(
+      key: Key('search-result-card-${drama.id}'),
+      color: AppColors.transparent,
+      child: InkWell(
+        borderRadius: BorderRadius.circular(AppDimens.cardCoverRadius),
+        onTap: onTap,
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            ClipRRect(
+              borderRadius: BorderRadius.circular(AppDimens.cardCoverRadius),
+              child: AspectRatio(
+                key: Key('search-result-cover-${drama.id}'),
+                aspectRatio: AppDimens.cardCoverAspectRatio,
+                child: Stack(
+                  fit: StackFit.expand,
+                  children: [
+                    RemoteImage(
+                      drama.posterUrl,
+                      fit: BoxFit.cover,
+                      showFallbackIcon: true,
+                      fallbackColor: AppColors.contentSurface,
+                    ),
+                    const Positioned(
+                      left: 0,
+                      right: 0,
+                      bottom: 0,
+                      child: CoverBottomScrim(),
+                    ),
+                    Positioned(
+                      right: AppDimens.cardPlayCountRight,
+                      bottom: AppDimens.cardPlayCountBottom,
+                      child: CoverPlayCount(
+                        key: Key('search-result-views-${drama.id}'),
+                        count: drama.viewCount,
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+            ),
+            const SizedBox(height: AppDimens.searchResultTitleGap),
+            Text(
+              drama.title,
+              key: Key('search-result-title-${drama.id}'),
+              maxLines: 2,
+              overflow: TextOverflow.ellipsis,
+              textAlign: TextAlign.left,
+              style: const TextStyle(
+                color: AppColors.textPrimary,
+                fontSize: AppDimens.cardTitleFont,
+                fontWeight: FontWeight.w500,
+                height: AppDimens.cardTitleLineHeight,
+              ),
+            ),
+            if (tags.isNotEmpty) ...[
+              const SizedBox(height: AppDimens.searchResultMetaGap),
+              Text(
+                tags.join(' | '),
+                key: Key('search-result-tags-${drama.id}'),
+                maxLines: 1,
+                overflow: TextOverflow.ellipsis,
+                textAlign: TextAlign.left,
+                style: const TextStyle(
+                  color: AppColors.searchResultMeta,
+                  fontSize: AppDimens.searchResultMetaFont,
+                ),
+              ),
+            ],
+          ],
+        ),
+      ),
+    );
+  }
+
+  List<String> _tags() {
+    final seen = <String>{};
+    return [drama.genre, drama.category]
+        .expand((value) => value.split(RegExp(r'[,/、·]')))
+        .map((value) => value.trim())
+        .where((value) => value.isNotEmpty && seen.add(value))
+        .take(3)
+        .toList(growable: false);
+  }
+}
diff --git a/lib/pages/downloads/downloads_page.dart b/lib/pages/downloads/downloads_page.dart
index 359c2a7..e6ada06 100644
--- a/lib/pages/downloads/downloads_page.dart
+++ b/lib/pages/downloads/downloads_page.dart
@@ -56,7 +56,7 @@ class _DownloadsPageState extends State<DownloadsPage> {
     final l10n = AppLocalizations.of(context)!;
     final signedIn = context.watch<AuthController>().isSignedIn;
     return Theme(
-      data: AppTheme.light(),
+      data: AppTheme.dark(),
       child: PlainPageScaffold(
         pageKey: const Key('downloads-page'),
         backKey: const Key('downloads-back'),
@@ -105,7 +105,7 @@ class _DownloadsBody extends StatelessWidget {
                 child: Text(
                   l10n.downloadedItems,
                   style: const TextStyle(
-                    color: Colors.white,
+                    color: AppColors.onSurface,
                     fontSize: 16,
                     fontWeight: FontWeight.w700,
                   ),
@@ -227,8 +227,8 @@ class _PolicyPanel extends StatelessWidget {
       padding: const EdgeInsets.fromLTRB(16, 16, 16, 12),
       decoration: BoxDecoration(
         color: AppColors.card,
-        borderRadius: BorderRadius.circular(AppDimens.innerRadius),
-        border: Border.all(color: AppColors.outlineVariantDark),
+        borderRadius: BorderRadius.circular(AppDimens.cardRadius),
+        border: Border.all(color: AppColors.border),
       ),
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
@@ -236,7 +236,7 @@ class _PolicyPanel extends StatelessWidget {
           Text(
             l10n.downloadQuota(policy.remaining, policy.maxPerDevice),
             style: const TextStyle(
-              color: Colors.white,
+              color: AppColors.onSurface,
               fontSize: 17,
               fontWeight: FontWeight.w800,
             ),
@@ -261,7 +261,7 @@ class _PolicyPanel extends StatelessWidget {
                 child: Text(
                   l10n.downloadWifiOnly,
                   style: const TextStyle(
-                    color: Colors.white,
+                    color: AppColors.onSurface,
                     fontSize: AppDimens.body,
                   ),
                 ),
@@ -279,7 +279,7 @@ class _PolicyPanel extends StatelessWidget {
                 child: Text(
                   l10n.downloadQuality,
                   style: const TextStyle(
-                    color: Colors.white,
+                    color: AppColors.onSurface,
                     fontSize: AppDimens.body,
                   ),
                 ),
@@ -362,7 +362,8 @@ class _LicenseTile extends StatelessWidget {
       padding: const EdgeInsets.all(12),
       decoration: BoxDecoration(
         color: AppColors.card,
-        borderRadius: BorderRadius.circular(AppDimens.innerRadius),
+        borderRadius: BorderRadius.circular(AppDimens.cardRadius),
+        border: Border.all(color: AppColors.border),
       ),
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
@@ -375,7 +376,7 @@ class _LicenseTile extends StatelessWidget {
                   maxLines: 1,
                   overflow: TextOverflow.ellipsis,
                   style: const TextStyle(
-                    color: Colors.white,
+                    color: AppColors.onSurface,
                     fontSize: 15,
                     fontWeight: FontWeight.w700,
                   ),
@@ -418,12 +419,12 @@ class _LicenseTile extends StatelessWidget {
               ),
               Text(
                 l10n.downloadProgress(license.progressPercent),
-                style: const TextStyle(color: Colors.white70, fontSize: 12),
+                style: const TextStyle(color: AppColors.muted, fontSize: 12),
               ),
               if (license.quality.isNotEmpty)
                 Text(
                   license.quality,
-                  style: const TextStyle(color: Colors.white70, fontSize: 12),
+                  style: const TextStyle(color: AppColors.muted, fontSize: 12),
                 ),
             ],
           ),
@@ -433,7 +434,7 @@ class _LicenseTile extends StatelessWidget {
             child: LinearProgressIndicator(
               minHeight: AppDimens.progressHeight,
               value: progress.clamp(0.0, 1.0),
-              backgroundColor: Colors.white24,
+              backgroundColor: AppColors.border,
               valueColor: const AlwaysStoppedAnimation(AppColors.blueSoft),
             ),
           ),
diff --git a/lib/pages/drama_detail/drama_detail_binding.dart b/lib/pages/drama_detail/drama_detail_binding.dart
index 060dda3..4edaccd 100644
--- a/lib/pages/drama_detail/drama_detail_binding.dart
+++ b/lib/pages/drama_detail/drama_detail_binding.dart
@@ -4,6 +4,7 @@ import '../../core/data/models/drama.dart';
 import '../../core/data/repositories/playback_repository.dart';
 import '../../core/data/repositories/watch_history_repository.dart';
 import '../../core/data/services/favorite_controller.dart';
+import '../../core/data/services/playback_position_cache.dart';
 import 'drama_detail_logic.dart';
 
 class DramaDetailBinding {
@@ -12,10 +13,12 @@ class DramaDetailBinding {
     required WatchHistoryRepository history,
     required PlaybackRepository playback,
     required FavoriteController favorites,
+    required PlaybackPositionCache positionCache,
   }) => DramaDetailLogic(
     drama: drama,
     history: history,
     playback: playback,
     favorites: favorites,
+    positionCache: positionCache,
   );
 }
diff --git a/lib/pages/drama_detail/drama_detail_logic.dart b/lib/pages/drama_detail/drama_detail_logic.dart
index 42c0a73..82d7536 100644
--- a/lib/pages/drama_detail/drama_detail_logic.dart
+++ b/lib/pages/drama_detail/drama_detail_logic.dart
@@ -11,6 +11,7 @@ import '../../core/data/repositories/watch_history_repository.dart';
 import '../../core/data/repositories/playback_repository.dart';
 import '../../core/data/services/favorite_controller.dart';
 import '../../core/data/services/download_controller.dart';
+import '../../core/data/services/playback_position_cache.dart';
 import '../../core/data/services/wallet_controller.dart';
 import '../player/player_view.dart';
 
@@ -20,6 +21,7 @@ class DramaDetailLogic extends ChangeNotifier {
     required this.history,
     required this.playback,
     required this.favorites,
+    required this.positionCache,
   });
 
   /// 先用列表卡片渲染，取到详情后换成带完整剧集的版本。
@@ -27,6 +29,7 @@ class DramaDetailLogic extends ChangeNotifier {
   final WatchHistoryRepository history;
   final PlaybackRepository playback;
   final FavoriteController favorites;
+  final PlaybackPositionCache positionCache;
   bool loading = false;
   bool failed = false;
 
@@ -71,6 +74,23 @@ class DramaDetailLogic extends ChangeNotifier {
   }
 
   Future<void> loadContinue() async {
+    final cached = positionCache.latestForDrama(drama.id);
+    if (cached != null) {
+      final index = _indexOf(cached.episodeId);
+      if (index != null) {
+        progress = WatchProgress(
+          dramaId: cached.dramaId,
+          episodeId: cached.episodeId,
+          position: cached.position,
+          duration: cached.duration,
+          updatedAt: cached.updatedAt,
+        );
+        continueIndex = index;
+        progressError = null;
+        notify();
+        return;
+      }
+    }
     try {
       final record = await history.progressFor(drama.id);
       if (_disposed) return;
diff --git a/lib/pages/drama_detail/drama_detail_view.dart b/lib/pages/drama_detail/drama_detail_view.dart
index de2ae86..eaedc8e 100644
--- a/lib/pages/drama_detail/drama_detail_view.dart
+++ b/lib/pages/drama_detail/drama_detail_view.dart
@@ -12,6 +12,7 @@ import '../../core/data/repositories/watch_history_repository.dart';
 import '../../core/data/services/catalog_controller.dart';
 import '../../core/data/services/favorite_controller.dart';
 import '../../core/data/services/interaction_controller.dart';
+import '../../core/data/services/playback_position_cache.dart';
 import '../../core/data/services/platform_share_service.dart';
 import '../../core/formatting/error_text.dart';
 import '../../core/formatting/localized_content.dart';
@@ -64,6 +65,7 @@ class _DramaDetailPageState extends State<DramaDetailPage> {
       history: context.read<WatchHistoryRepository>(),
       playback: context.read<PlaybackRepository>(),
       favorites: context.read<FavoriteController>(),
+      positionCache: context.read<PlaybackPositionCache>(),
     );
     _load();
   }
@@ -86,15 +88,15 @@ class _DramaDetailPageState extends State<DramaDetailPage> {
   Widget build(BuildContext context) {
     return AnnotatedRegion<SystemUiOverlayStyle>(
       key: const Key('detail-system-overlay'),
-      value: SystemUiOverlayStyle.dark.copyWith(
-        statusBarColor: Colors.transparent,
+      value: SystemUiOverlayStyle.light.copyWith(
+        statusBarColor: AppColors.transparent,
         systemNavigationBarColor: AppColors.ink,
-        systemNavigationBarDividerColor: Colors.transparent,
-        systemNavigationBarIconBrightness: Brightness.dark,
+        systemNavigationBarDividerColor: AppColors.transparent,
+        systemNavigationBarIconBrightness: Brightness.light,
         systemNavigationBarContrastEnforced: false,
       ),
       child: Theme(
-        data: AppTheme.light(),
+        data: AppTheme.dark(),
         child: ListenableBuilder(
           listenable: logic,
           builder: (context, _) => _page(context),
diff --git a/lib/pages/drama_detail/widgets/drama_detail_header.dart b/lib/pages/drama_detail/widgets/drama_detail_header.dart
index d1da929..5c27728 100644
--- a/lib/pages/drama_detail/widgets/drama_detail_header.dart
+++ b/lib/pages/drama_detail/widgets/drama_detail_header.dart
@@ -5,6 +5,7 @@ import 'package:flutter/material.dart';
 import '../../../core/data/models/drama.dart';
 import '../../../core/formatting/localized_content.dart';
 import '../../../core/theme/app_colors.dart';
+import '../../../core/theme/app_theme.dart';
 import '../../../core/widgets/remote_image.dart';
 import '../../../core/widgets/subpage_header.dart';
 import '../../../l10n/app_localizations.dart';
@@ -53,13 +54,7 @@ class DramaDetailHeader extends StatelessWidget {
   Widget build(BuildContext context) {
     return Container(
       key: const Key('detail-hero'),
-      decoration: const BoxDecoration(
-        gradient: LinearGradient(
-          begin: Alignment.topCenter,
-          end: Alignment.bottomCenter,
-          colors: [AppColors.surfaceTop, AppColors.ink],
-        ),
-      ),
+      decoration: const BoxDecoration(gradient: AppTheme.pageGradient),
       child: SafeArea(
         bottom: false,
         child: Padding(
diff --git a/lib/pages/drama_detail/widgets/drama_detail_sections.dart b/lib/pages/drama_detail/widgets/drama_detail_sections.dart
index 9b2e559..cd79043 100644
--- a/lib/pages/drama_detail/widgets/drama_detail_sections.dart
+++ b/lib/pages/drama_detail/widgets/drama_detail_sections.dart
@@ -5,12 +5,13 @@ import 'package:flutter/material.dart';
 import '../../../core/data/models/drama.dart';
 import '../../../core/formatting/count_format.dart';
 import '../../../core/theme/app_colors.dart';
+import '../../../core/theme/app_dimens.dart';
 import '../../../l10n/app_localizations.dart';
 
 const double _horizontal = 14;
 const double _sectionTop = 16;
 const double _statsVertical = 12;
-const double _statsRadius = 14;
+const double _statsRadius = AppDimens.cardRadius;
 const double _dividerHeight = 28;
 const int _synopsisLines = 3;
 const int _gridColumns = 6;
@@ -63,6 +64,7 @@ class DramaStatsCard extends StatelessWidget {
       decoration: BoxDecoration(
         color: AppColors.card,
         borderRadius: BorderRadius.circular(_statsRadius),
+        border: Border.all(color: AppColors.border),
       ),
       child: Row(
         children: [
@@ -330,7 +332,7 @@ class DramaEpisodeGrid extends StatelessWidget {
       shape: RoundedRectangleBorder(
         borderRadius: BorderRadius.circular(_chipRadius),
         side: BorderSide(
-          color: selected || locked ? Colors.transparent : AppColors.border,
+          color: selected || locked ? AppColors.transparent : AppColors.border,
         ),
       ),
       clipBehavior: Clip.antiAlias,
diff --git a/lib/pages/drama_detail/widgets/drama_episode_states.dart b/lib/pages/drama_detail/widgets/drama_episode_states.dart
index de7787d..39db405 100644
--- a/lib/pages/drama_detail/widgets/drama_episode_states.dart
+++ b/lib/pages/drama_detail/widgets/drama_episode_states.dart
@@ -4,6 +4,7 @@ import 'package:flutter/material.dart';
 
 import '../../../core/formatting/error_text.dart';
 import '../../../core/theme/app_colors.dart';
+import '../../../core/theme/app_dimens.dart';
 import '../../../l10n/app_localizations.dart';
 
 const int _skeletonCount = 6;
@@ -138,7 +139,8 @@ class DramaEpisodesLoadError extends StatelessWidget {
             padding: const EdgeInsets.all(16),
             decoration: BoxDecoration(
               color: AppColors.card,
-              borderRadius: BorderRadius.circular(14),
+              borderRadius: BorderRadius.circular(AppDimens.cardRadius),
+              border: Border.all(color: AppColors.border),
             ),
             child: Column(
               children: [
diff --git a/lib/pages/favorites/favorites_page.dart b/lib/pages/favorites/favorites_page.dart
index 3f68c21..bfadfe5 100644
--- a/lib/pages/favorites/favorites_page.dart
+++ b/lib/pages/favorites/favorites_page.dart
@@ -12,10 +12,12 @@ import '../../core/formatting/count_format.dart';
 import '../../core/formatting/error_text.dart';
 import '../../core/platform/haptics.dart';
 import '../../core/theme/app_colors.dart';
+import '../../core/theme/app_dimens.dart';
 import '../../core/theme/app_theme.dart';
 import '../../core/widgets/app_pull_to_refresh.dart';
 import '../../core/widgets/auth_gate.dart';
 import '../../core/widgets/empty_state.dart';
+import '../../core/widgets/paged_list_footer.dart';
 import '../../core/widgets/remote_image.dart';
 import '../../core/widgets/subpage_header.dart';
 import '../../l10n/app_localizations.dart';
@@ -23,7 +25,7 @@ import '../player/open_player.dart';
 import 'favorites_binding.dart';
 
 const double _pageHorizontal = 14;
-const double _cardRadius = 14;
+const double _cardRadius = AppDimens.cardRadius;
 const double _cardPadding = 10;
 const double _coverWidth = 80;
 const double _coverHeight = 106;
@@ -33,20 +35,43 @@ const double _removeIconSize = 20;
 const double _statsFontSize = 12;
 const double _metaFontSize = 11;
 const double _titleFontSize = 15;
+const double _synopsisFontSize = 12;
+const double _synopsisLineHeight = 1.15;
+const double _synopsisGap = 4;
 const int _maxTags = 2;
 const double _emptyListHeight = 360;
+const double _loadMoreThreshold = 240;
 
 final RegExp _tagSplitter = RegExp(r'[,/、·]');
 
 /// 独立我的收藏页。
-class FavoritesPage extends StatefulWidget {
+class FavoritesPage extends StatelessWidget {
   const FavoritesPage({super.key});
 
   @override
-  State<FavoritesPage> createState() => _FavoritesPageState();
+  Widget build(BuildContext context) {
+    return Theme(
+      data: AppTheme.dark(),
+      child: Scaffold(
+        key: const Key('favorites-page'),
+        backgroundColor: AppColors.ink,
+        body: const SafeArea(child: FavoritesContent()),
+      ),
+    );
+  }
 }
 
-class _FavoritesPageState extends State<FavoritesPage> {
+/// 收藏列表主体；可独立使用，也可直接嵌入根导航。
+class FavoritesContent extends StatefulWidget {
+  const FavoritesContent({super.key, this.showBack = true});
+
+  final bool showBack;
+
+  @override
+  State<FavoritesContent> createState() => _FavoritesContentState();
+}
+
+class _FavoritesContentState extends State<FavoritesContent> {
   bool _requested = false;
 
   @override
@@ -69,28 +94,21 @@ class _FavoritesPageState extends State<FavoritesPage> {
   Widget build(BuildContext context) {
     final l10n = AppLocalizations.of(context)!;
     final signedIn = context.watch<AuthController>().isSignedIn;
-    return Theme(
-      data: AppTheme.light(),
-      child: Scaffold(
-        key: const Key('favorites-page'),
-        backgroundColor: AppColors.ink,
-        body: SafeArea(
-          child: Column(
-            children: [
-              AppSubpageHeader(
-                title: l10n.myFavorites,
-                backKey: const Key('favorites-back'),
-              ),
-              Expanded(
-                child: signedIn
-                    ? _FavoritesBody(
-                        favorites: context.watch<FavoriteController>(),
-                      )
-                    : const AuthGatePanel(),
-              ),
-            ],
+    return SafeArea(
+      bottom: false,
+      child: Column(
+        children: [
+          AppSubpageHeader(
+            title: l10n.myFavorites,
+            backKey: const Key('favorites-back'),
+            showBack: widget.showBack,
           ),
-        ),
+          Expanded(
+            child: signedIn
+                ? _FavoritesBody(favorites: context.watch<FavoriteController>())
+                : const AuthGatePanel(),
+          ),
+        ],
       ),
     );
   }
@@ -156,6 +174,13 @@ class _FavoritesBody extends StatelessWidget {
             onRemove: () => _remove(context, drama.id),
           ),
         ],
+        PagedListFooter(
+          loading: favorites.loadingMore,
+          errorMessage: favorites.loadMoreError == null
+              ? null
+              : errorText(l10n, favorites.loadMoreError, l10n.favoritesError),
+          onRetry: favorites.loadMore,
+        ),
       ],
     );
   }
@@ -164,26 +189,42 @@ class _FavoritesBody extends StatelessWidget {
     FavoriteController favorites, {
     required List<Widget> children,
   }) {
-    return AppPullToRefresh(
-      onRefresh: favorites.load,
-      child: ListView(
-        physics: AppPullToRefresh.physics,
-        padding: const EdgeInsets.fromLTRB(
-          _pageHorizontal,
-          4,
-          _pageHorizontal,
-          28,
+    return NotificationListener<ScrollNotification>(
+      onNotification: _onScroll,
+      child: AppPullToRefresh(
+        onRefresh: favorites.load,
+        child: ListView(
+          physics: AppPullToRefresh.physics,
+          padding: const EdgeInsets.fromLTRB(
+            _pageHorizontal,
+            4,
+            _pageHorizontal,
+            28,
+          ),
+          children: children,
         ),
-        children: children,
       ),
     );
   }
 
+  bool _onScroll(ScrollNotification notification) {
+    if (notification.depth != 0) return false;
+    final reachedBottom =
+        notification.metrics.extentAfter <= _loadMoreThreshold;
+    if (reachedBottom &&
+        (notification is ScrollUpdateNotification ||
+            notification is ScrollEndNotification ||
+            notification is OverscrollNotification)) {
+      unawaited(favorites.loadMore());
+    }
+    return false;
+  }
+
   Widget _summary(AppLocalizations l10n) {
     return Align(
       alignment: Alignment.centerLeft,
       child: Text(
-        l10n.favoritesCount(favorites.cards.length),
+        l10n.favoritesCount(favorites.total),
         key: const Key('favorites-count'),
         style: const TextStyle(
           color: AppColors.muted,
@@ -225,15 +266,16 @@ class _FavoriteCard extends StatelessWidget {
   Widget build(BuildContext context) {
     final l10n = AppLocalizations.of(context)!;
     final tags = _tags();
+    final synopsis = drama.synopsis.trim();
     return Container(
       key: ValueKey('favorite-card-${drama.id}'),
       decoration: BoxDecoration(
         color: AppColors.card,
         borderRadius: BorderRadius.circular(_cardRadius),
-        boxShadow: const [AppTheme.cardShadow],
+        border: Border.all(color: AppColors.border),
       ),
       child: Material(
-        color: Colors.transparent,
+        color: AppColors.transparent,
         borderRadius: BorderRadius.circular(_cardRadius),
         clipBehavior: Clip.antiAlias,
         child: InkWell(
@@ -318,7 +360,25 @@ class _FavoriteCard extends StatelessWidget {
                                     ),
                                   ),
                                 ),
-                              const Spacer(),
+                              if (synopsis.isNotEmpty) ...[
+                                const SizedBox(height: _synopsisGap),
+                                Flexible(
+                                  child: Text(
+                                    synopsis,
+                                    key: ValueKey(
+                                      'favorite-synopsis-${drama.id}',
+                                    ),
+                                    maxLines: 2,
+                                    overflow: TextOverflow.ellipsis,
+                                    style: const TextStyle(
+                                      color: AppColors.muted,
+                                      fontSize: _synopsisFontSize,
+                                      height: _synopsisLineHeight,
+                                    ),
+                                  ),
+                                ),
+                              ] else
+                                const Spacer(),
                               Row(
                                 children: [
                                   const Icon(
diff --git a/lib/pages/filter/filter_page.dart b/lib/pages/filter/filter_page.dart
index 2def7eb..d1f62d0 100644
--- a/lib/pages/filter/filter_page.dart
+++ b/lib/pages/filter/filter_page.dart
@@ -58,7 +58,7 @@ class _FilterPageState extends State<FilterPage> {
     );
     final results = _filtered(catalog.dramas);
     return AnnotatedRegion<SystemUiOverlayStyle>(
-      value: SystemUiOverlayStyle.dark,
+      value: SystemUiOverlayStyle.light,
       child: Scaffold(
         key: const Key('filter-page'),
         backgroundColor: AppColors.ink,
@@ -255,6 +255,7 @@ class _FilterPageState extends State<FilterPage> {
       decoration: BoxDecoration(
         color: AppColors.card,
         borderRadius: BorderRadius.circular(12),
+        border: Border.all(color: AppColors.border),
       ),
       child: Row(
         crossAxisAlignment: CrossAxisAlignment.start,
diff --git a/lib/pages/following/following_grid_card.dart b/lib/pages/following/following_grid_card.dart
new file mode 100644
index 0000000..e20f320
--- /dev/null
+++ b/lib/pages/following/following_grid_card.dart
@@ -0,0 +1,197 @@
+// Author: fruit.com.cn
+
+import 'package:flutter/material.dart';
+
+import '../../core/theme/app_colors.dart';
+import '../../core/theme/app_dimens.dart';
+import '../../core/widgets/cover_play_count.dart';
+import '../../core/widgets/remote_image.dart';
+
+class FollowingGridCard extends StatelessWidget {
+  const FollowingGridCard({
+    super.key,
+    required this.dramaId,
+    required this.title,
+    required this.posterUrl,
+    required this.viewCount,
+    required this.subtitle,
+    required this.onTap,
+    this.progress,
+    this.editing = false,
+    this.onRemove,
+  });
+
+  final String dramaId;
+  final String title;
+  final String posterUrl;
+  final int viewCount;
+  final String subtitle;
+  final VoidCallback onTap;
+  final double? progress;
+  final bool editing;
+  final VoidCallback? onRemove;
+
+  @override
+  Widget build(BuildContext context) {
+    return InkWell(
+      key: Key('following-card-$dramaId'),
+      borderRadius: BorderRadius.circular(AppDimens.homeCardRadius),
+      onTap: onTap,
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          AspectRatio(
+            key: Key('following-cover-$dramaId'),
+            aspectRatio: AppDimens.cardCoverAspectRatio,
+            child: Stack(
+              clipBehavior: Clip.hardEdge,
+              children: [
+                Positioned.fill(
+                  child: ClipRRect(
+                    borderRadius: BorderRadius.circular(
+                      AppDimens.homeCardRadius,
+                    ),
+                    child: RemoteImage(
+                      posterUrl,
+                      fit: BoxFit.cover,
+                      showFallbackIcon: true,
+                      fallbackColor: AppColors.contentSurface,
+                    ),
+                  ),
+                ),
+                if (editing)
+                  Positioned(
+                    top: -2,
+                    right: -2,
+                    child: GestureDetector(
+                      key: Key('following-remove-$dramaId'),
+                      onTap: onRemove,
+                      child: const CircleAvatar(
+                        radius: 12,
+                        backgroundColor: AppColors.contentChip,
+                        child: Icon(
+                          Icons.remove_rounded,
+                          color: AppColors.textPrimary,
+                          size: 17,
+                        ),
+                      ),
+                    ),
+                  ),
+                const Positioned(
+                  left: 0,
+                  right: 0,
+                  bottom: 0,
+                  child: CoverBottomScrim(),
+                ),
+                Positioned(
+                  right: AppDimens.cardPlayCountRight,
+                  bottom: progress == null
+                      ? AppDimens.cardPlayCountBottom
+                      : AppDimens.followingProgressHeight + 4,
+                  child: CoverPlayCount(
+                    key: Key('following-views-$dramaId'),
+                    count: viewCount,
+                  ),
+                ),
+                if (progress != null)
+                  Positioned(
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    child: LinearProgressIndicator(
+                      key: Key('following-progress-$dramaId'),
+                      value: progress!.clamp(0.0, 1.0).toDouble(),
+                      minHeight: AppDimens.followingProgressHeight,
+                      backgroundColor: AppColors.inactiveTrack,
+                      valueColor: const AlwaysStoppedAnimation<Color>(
+                        AppColors.primary,
+                      ),
+                    ),
+                  ),
+              ],
+            ),
+          ),
+          const SizedBox(height: AppDimens.cardCoverTitleGap),
+          Text(
+            title,
+            maxLines: 2,
+            overflow: TextOverflow.ellipsis,
+            textAlign: TextAlign.left,
+            style: const TextStyle(
+              color: AppColors.textPrimary,
+              fontSize: AppDimens.cardTitleFont,
+              fontWeight: FontWeight.w500,
+              height: AppDimens.cardTitleLineHeight,
+            ),
+          ),
+          const SizedBox(height: AppDimens.followingSubtitleGap),
+          Text(
+            subtitle,
+            maxLines: 1,
+            overflow: TextOverflow.ellipsis,
+            textAlign: TextAlign.left,
+            style: const TextStyle(
+              color: AppColors.textTertiary,
+              fontSize: AppDimens.followingSubtitleFont,
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class FollowingAddCard extends StatelessWidget {
+  const FollowingAddCard({super.key, required this.onTap});
+
+  final VoidCallback onTap;
+
+  @override
+  Widget build(BuildContext context) {
+    return InkWell(
+      key: const Key('following-add-card'),
+      borderRadius: BorderRadius.circular(AppDimens.homeCardRadius),
+      onTap: onTap,
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          AspectRatio(
+            aspectRatio: AppDimens.cardCoverAspectRatio,
+            child: DecoratedBox(
+              decoration: BoxDecoration(
+                color: AppColors.contentSurface,
+                borderRadius: BorderRadius.circular(AppDimens.homeCardRadius),
+              ),
+              child: const Center(
+                child: CustomPaint(
+                  key: Key('following-add-icon'),
+                  size: Size.square(AppDimens.followingAddIconSize),
+                  painter: _FollowingPlusPainter(),
+                ),
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class _FollowingPlusPainter extends CustomPainter {
+  const _FollowingPlusPainter();
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    final paint = Paint()
+      ..color = AppColors.textSecondary
+      ..strokeWidth = AppDimens.followingAddIconStroke
+      ..strokeCap = StrokeCap.round;
+    final center = size.center(Offset.zero);
+    canvas
+      ..drawLine(Offset(center.dx, 0), Offset(center.dx, size.height), paint)
+      ..drawLine(Offset(0, center.dy), Offset(size.width, center.dy), paint);
+  }
+
+  @override
+  bool shouldRepaint(covariant _FollowingPlusPainter oldDelegate) => false;
+}
diff --git a/lib/pages/following/following_history_card.dart b/lib/pages/following/following_history_card.dart
new file mode 100644
index 0000000..e2a2af3
--- /dev/null
+++ b/lib/pages/following/following_history_card.dart
@@ -0,0 +1,234 @@
+// Author: fruit.com.cn
+
+import 'package:flutter/material.dart';
+
+import '../../core/theme/app_colors.dart';
+import '../../core/theme/app_dimens.dart';
+import '../../core/widgets/cover_play_count.dart';
+import '../../core/widgets/remote_image.dart';
+import '../../l10n/app_localizations.dart';
+
+class FollowingHistoryCard extends StatelessWidget {
+  const FollowingHistoryCard({
+    super.key,
+    required this.dramaId,
+    required this.title,
+    required this.posterUrl,
+    required this.viewCount,
+    required this.subtitle,
+    required this.onTap,
+    required this.onContinue,
+    this.progress,
+    this.progressLabel,
+    this.editing = false,
+    this.onRemove,
+  });
+
+  final String dramaId;
+  final String title;
+  final String posterUrl;
+  final int viewCount;
+  final String subtitle;
+  final VoidCallback onTap;
+  final VoidCallback onContinue;
+  final double? progress;
+  final String? progressLabel;
+  final bool editing;
+  final VoidCallback? onRemove;
+
+  @override
+  Widget build(BuildContext context) {
+    final l10n = AppLocalizations.of(context)!;
+    return InkWell(
+      key: Key('following-history-card-$dramaId'),
+      borderRadius: BorderRadius.circular(
+        AppDimens.followingHistoryCoverRadius,
+      ),
+      onTap: onTap,
+      child: SizedBox(
+        height: AppDimens.followingHistoryCoverHeight,
+        child: Row(
+          crossAxisAlignment: CrossAxisAlignment.center,
+          children: [
+            _cover(),
+            const SizedBox(width: AppDimens.followingHistoryContentGap),
+            Expanded(child: _details(l10n)),
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget _cover() {
+    return SizedBox(
+      key: Key('following-history-cover-$dramaId'),
+      width: AppDimens.followingHistoryCoverWidth,
+      height: AppDimens.followingHistoryCoverHeight,
+      child: Stack(
+        clipBehavior: Clip.hardEdge,
+        children: [
+          Positioned.fill(
+            child: ClipRRect(
+              borderRadius: BorderRadius.circular(
+                AppDimens.followingHistoryCoverRadius,
+              ),
+              child: RemoteImage(
+                posterUrl,
+                fit: BoxFit.cover,
+                showFallbackIcon: true,
+                fallbackColor: AppColors.contentSurface,
+              ),
+            ),
+          ),
+          const Positioned(
+            left: 0,
+            right: 0,
+            bottom: 0,
+            child: CoverBottomScrim(),
+          ),
+          Positioned(
+            right: AppDimens.cardPlayCountRight,
+            bottom: AppDimens.cardPlayCountBottom,
+            child: CoverPlayCount(
+              key: Key('following-history-views-$dramaId'),
+              count: viewCount,
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  Widget _details(AppLocalizations l10n) {
+    final hasProgress = progress != null;
+    return Stack(
+      children: [
+        Align(
+          alignment: Alignment.center,
+          child: Padding(
+            padding: const EdgeInsets.only(bottom: 8),
+            child: Column(
+              mainAxisSize: MainAxisSize.min,
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Padding(
+                  padding: EdgeInsets.only(right: editing ? 28 : 0),
+                  child: Text(
+                    title,
+                    maxLines: 2,
+                    overflow: TextOverflow.ellipsis,
+                    textAlign: TextAlign.left,
+                    style: const TextStyle(
+                      color: AppColors.textPrimary,
+                      fontSize: AppDimens.cardTitleFont,
+                      fontWeight: FontWeight.w500,
+                      height: AppDimens.cardTitleLineHeight,
+                    ),
+                  ),
+                ),
+                const SizedBox(height: AppDimens.followingSubtitleGap),
+                Row(
+                  children: [
+                    Expanded(
+                      child: Text(
+                        subtitle,
+                        maxLines: 1,
+                        overflow: TextOverflow.ellipsis,
+                        style: const TextStyle(
+                          color: AppColors.textTertiary,
+                          fontSize: AppDimens.followingSubtitleFont,
+                        ),
+                      ),
+                    ),
+                    if (!editing && hasProgress) ...[
+                      const SizedBox(width: AppDimens.spaceSm),
+                      _continueButton(l10n),
+                    ],
+                  ],
+                ),
+                if (hasProgress) ...[
+                  const SizedBox(height: AppDimens.followingHistoryProgressGap),
+                  ClipRRect(
+                    borderRadius: BorderRadius.circular(
+                      AppDimens.followingHistoryProgressRadius,
+                    ),
+                    child: LinearProgressIndicator(
+                      key: Key('following-progress-$dramaId'),
+                      value: progress!.clamp(0.0, 1.0).toDouble(),
+                      minHeight: AppDimens.followingHistoryProgressHeight,
+                      backgroundColor: AppColors.inactiveTrack,
+                      valueColor: const AlwaysStoppedAnimation<Color>(
+                        AppColors.primary,
+                      ),
+                    ),
+                  ),
+                  if (progressLabel != null) ...[
+                    const SizedBox(height: AppDimens.followingHistoryLabelGap),
+                    Text(
+                      progressLabel!,
+                      key: Key('following-history-percent-$dramaId'),
+                      maxLines: 1,
+                      overflow: TextOverflow.ellipsis,
+                      style: const TextStyle(
+                        color: AppColors.textTertiary,
+                        fontSize: AppDimens.followingSubtitleFont,
+                      ),
+                    ),
+                  ],
+                ],
+              ],
+            ),
+          ),
+        ),
+        if (editing)
+          Positioned(
+            top: 0,
+            right: 0,
+            child: GestureDetector(
+              key: Key('following-history-remove-$dramaId'),
+              onTap: onRemove,
+              child: const CircleAvatar(
+                radius: 12,
+                backgroundColor: AppColors.contentChip,
+                child: Icon(
+                  Icons.remove_rounded,
+                  color: AppColors.textPrimary,
+                  size: 17,
+                ),
+              ),
+            ),
+          ),
+      ],
+    );
+  }
+
+  Widget _continueButton(AppLocalizations l10n) {
+    return SizedBox(
+      height: AppDimens.followingHistoryActionHeight,
+      child: TextButton(
+        key: Key('following-history-continue-$dramaId'),
+        onPressed: onContinue,
+        style: ButtonStyle(
+          foregroundColor: WidgetStateProperty.resolveWith(
+            (states) => states.contains(WidgetState.pressed)
+                ? AppColors.primary
+                : AppColors.textTabInactive,
+          ),
+          backgroundColor: const WidgetStatePropertyAll(AppColors.transparent),
+          overlayColor: const WidgetStatePropertyAll(AppColors.transparent),
+          padding: const WidgetStatePropertyAll(EdgeInsets.zero),
+          minimumSize: const WidgetStatePropertyAll(Size.zero),
+          tapTargetSize: MaterialTapTargetSize.shrinkWrap,
+          visualDensity: VisualDensity.compact,
+          textStyle: const WidgetStatePropertyAll(
+            TextStyle(
+              fontSize: AppDimens.followingSubtitleFont,
+              fontWeight: FontWeight.w500,
+            ),
+          ),
+        ),
+        child: Text(l10n.continueWatching),
+      ),
+    );
+  }
+}
diff --git a/lib/pages/following/following_keep_alive_tab.dart b/lib/pages/following/following_keep_alive_tab.dart
new file mode 100644
index 0000000..d0c9c14
--- /dev/null
+++ b/lib/pages/following/following_keep_alive_tab.dart
@@ -0,0 +1,24 @@
+// Author: fruit.com.cn
+
+import 'package:flutter/widgets.dart';
+
+class FollowingKeepAliveTab extends StatefulWidget {
+  const FollowingKeepAliveTab({super.key, required this.child});
+
+  final Widget child;
+
+  @override
+  State<FollowingKeepAliveTab> createState() => _FollowingKeepAliveTabState();
+}
+
+class _FollowingKeepAliveTabState extends State<FollowingKeepAliveTab>
+    with AutomaticKeepAliveClientMixin {
+  @override
+  bool get wantKeepAlive => true;
+
+  @override
+  Widget build(BuildContext context) {
+    super.build(context);
+    return widget.child;
+  }
+}
diff --git a/lib/pages/following/following_page.dart b/lib/pages/following/following_page.dart
new file mode 100644
index 0000000..4a8e05d
--- /dev/null
+++ b/lib/pages/following/following_page.dart
@@ -0,0 +1,492 @@
+// Author: fruit.com.cn
+
+import 'dart:async';
+
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+
+import '../../core/data/models/watch_record.dart';
+import '../../core/data/repositories/catalog_repository.dart';
+import '../../core/data/repositories/watch_history_repository.dart';
+import '../../core/data/services/auth_controller.dart';
+import '../../core/data/services/favorite_controller.dart';
+import '../../core/data/services/watch_records_controller.dart';
+import '../../core/formatting/error_text.dart';
+import '../../core/theme/app_colors.dart';
+import '../../core/theme/app_dimens.dart';
+import '../../core/widgets/auth_gate.dart';
+import '../../core/widgets/empty_state.dart';
+import '../../l10n/app_localizations.dart';
+import '../player/open_player.dart';
+import 'following_grid_card.dart';
+import 'following_history_card.dart';
+import 'following_keep_alive_tab.dart';
+import 'following_paged_grid.dart';
+
+enum FollowingTab { favorites, history }
+
+class FollowingPage extends StatefulWidget {
+  const FollowingPage({
+    super.key,
+    required this.onGoHome,
+    required this.favoriteController,
+    this.historyRequest = 0,
+  });
+
+  final VoidCallback onGoHome;
+  final FavoriteController favoriteController;
+  final int historyRequest;
+
+  @override
+  State<FollowingPage> createState() => _FollowingPageState();
+}
+
+class _FollowingPageState extends State<FollowingPage> {
+  final PageController _pageController = PageController();
+  final ScrollController _favoriteScroll = ScrollController();
+  final ScrollController _historyScroll = ScrollController();
+  final ValueNotifier<FollowingTab> _tab = ValueNotifier<FollowingTab>(
+    FollowingTab.favorites,
+  );
+  final ValueNotifier<bool> _editing = ValueNotifier(false);
+  late final WatchRecordsController _history;
+
+  @override
+  void initState() {
+    super.initState();
+    _history = WatchRecordsController(
+      history: context.read<WatchHistoryRepository>(),
+      catalog: context.read<CatalogRepository>(),
+    );
+    unawaited(_history.load());
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      if (mounted) unawaited(widget.favoriteController.load());
+    });
+  }
+
+  @override
+  void dispose() {
+    _pageController.dispose();
+    _favoriteScroll.dispose();
+    _historyScroll.dispose();
+    _tab.dispose();
+    _editing.dispose();
+    _history.dispose();
+    super.dispose();
+  }
+
+  @override
+  void didUpdateWidget(covariant FollowingPage oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    if (oldWidget.historyRequest == widget.historyRequest) return;
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      if (mounted) _selectTab(FollowingTab.history);
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final l10n = AppLocalizations.of(context)!;
+    final signedIn = context.watch<AuthController>().isSignedIn;
+    return ColoredBox(
+      key: const Key('following-page'),
+      color: AppColors.appBackground,
+      child: SafeArea(
+        bottom: false,
+        child: Column(
+          children: [
+            _header(l10n),
+            Expanded(
+              child: !signedIn
+                  ? const AuthGatePanel()
+                  : PageView(
+                      key: const Key('following-tab-pages'),
+                      controller: _pageController,
+                      onPageChanged: _onPageChanged,
+                      children: [
+                        FollowingKeepAliveTab(
+                          child: _FavoritesGrid(
+                            controller: widget.favoriteController,
+                            editing: _editing,
+                            scrollController: _favoriteScroll,
+                            onGoHome: widget.onGoHome,
+                            onListEmptied: _exitEditingIfEmpty,
+                          ),
+                        ),
+                        FollowingKeepAliveTab(
+                          child: _HistoryList(
+                            controller: _history,
+                            editing: _editing,
+                            scrollController: _historyScroll,
+                            onListEmptied: _exitEditingIfEmpty,
+                          ),
+                        ),
+                      ],
+                    ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget _header(AppLocalizations l10n) {
+    return SizedBox(
+      key: const Key('following-header'),
+      height: AppDimens.followingHeaderHeight,
+      child: Padding(
+        padding: const EdgeInsets.symmetric(
+          horizontal: AppDimens.feedPageHorizontal,
+        ),
+        child: ValueListenableBuilder<FollowingTab>(
+          valueListenable: _tab,
+          builder: (context, selectedTab, _) {
+            return ValueListenableBuilder<bool>(
+              valueListenable: _editing,
+              builder: (context, editing, _) {
+                return Row(
+                  children: [
+                    _tabButton(
+                      FollowingTab.favorites,
+                      l10n.followingTab,
+                      'favorites',
+                      selectedTab == FollowingTab.favorites,
+                    ),
+                    const SizedBox(width: AppDimens.followingTabGap),
+                    _tabButton(
+                      FollowingTab.history,
+                      l10n.watchHistory,
+                      'history',
+                      selectedTab == FollowingTab.history,
+                    ),
+                    const Spacer(),
+                    if (editing)
+                      SizedBox(
+                        width: AppDimens.followingEditHitSize,
+                        height: AppDimens.followingEditHitSize,
+                        child: InkWell(
+                          key: const Key('following-edit'),
+                          onTap: _toggleEditing,
+                          child: Align(
+                            alignment: Alignment.centerRight,
+                            child: Text(
+                              l10n.done,
+                              style: const TextStyle(
+                                color: AppColors.textPrimary,
+                                fontSize: AppDimens.followingTabFont,
+                                fontWeight: FontWeight.w600,
+                              ),
+                            ),
+                          ),
+                        ),
+                      )
+                    else
+                      Semantics(
+                        button: true,
+                        label: l10n.edit,
+                        child: SizedBox(
+                          width: AppDimens.followingEditHitSize,
+                          height: AppDimens.followingEditHitSize,
+                          child: InkWell(
+                            key: const Key('following-edit'),
+                            onTap: _toggleEditing,
+                            child: const Align(
+                              alignment: Alignment.centerRight,
+                              child: Icon(
+                                Icons.edit_outlined,
+                                size: AppDimens.followingEditIconSize,
+                                color: AppColors.textTabInactive,
+                              ),
+                            ),
+                          ),
+                        ),
+                      ),
+                  ],
+                );
+              },
+            );
+          },
+        ),
+      ),
+    );
+  }
+
+  Widget _tabButton(
+    FollowingTab tab,
+    String label,
+    String keyName,
+    bool selected,
+  ) {
+    return InkWell(
+      key: Key('following-tab-$keyName'),
+      onTap: () => _selectTab(tab),
+      child: SizedBox(
+        height: AppDimens.followingHeaderHeight,
+        child: Center(
+          child: AnimatedDefaultTextStyle(
+            duration: AppDimens.followingTabAnimationDuration,
+            style: TextStyle(
+              color: selected
+                  ? AppColors.textPrimary
+                  : AppColors.textTabInactive,
+              fontSize: AppDimens.followingTabFont,
+              fontWeight: selected ? FontWeight.w600 : FontWeight.w400,
+            ),
+            child: Text(label, maxLines: 1),
+          ),
+        ),
+      ),
+    );
+  }
+
+  void _selectTab(FollowingTab tab) {
+    _editing.value = false;
+    _tab.value = tab;
+    if (_pageController.hasClients) {
+      unawaited(
+        _pageController.animateToPage(
+          tab.index,
+          duration: AppDimens.followingPageAnimationDuration,
+          curve: Curves.easeOutCubic,
+        ),
+      );
+    }
+  }
+
+  void _onPageChanged(int index) {
+    final tab = FollowingTab.values[index];
+    _editing.value = false;
+    _tab.value = tab;
+  }
+
+  void _toggleEditing() {
+    _editing.value = !_editing.value;
+  }
+
+  void _exitEditingIfEmpty() => _editing.value = false;
+}
+
+class _FavoritesGrid extends StatelessWidget {
+  const _FavoritesGrid({
+    required this.controller,
+    required this.editing,
+    required this.scrollController,
+    required this.onGoHome,
+    required this.onListEmptied,
+  });
+
+  final FavoriteController controller;
+  final ValueListenable<bool> editing;
+  final ScrollController scrollController;
+  final VoidCallback onGoHome;
+  final VoidCallback onListEmptied;
+
+  @override
+  Widget build(BuildContext context) {
+    return ValueListenableBuilder<bool>(
+      valueListenable: editing,
+      builder: (context, isEditing, _) {
+        return ListenableBuilder(
+          listenable: controller,
+          builder: (context, _) {
+            final l10n = AppLocalizations.of(context)!;
+            return FollowingPagedGrid(
+              key: const Key('following-favorites-grid'),
+              scrollController: scrollController,
+              loading: controller.loading,
+              loadingMore: controller.loadingMore,
+              hasMore: controller.hasMore,
+              hasItems: controller.cards.isNotEmpty,
+              showInitialLoading: false,
+              errorMessage: controller.error == null
+                  ? null
+                  : errorText(l10n, controller.error, l10n.favoritesError),
+              loadMoreError: controller.loadMoreError == null
+                  ? null
+                  : errorText(
+                      l10n,
+                      controller.loadMoreError,
+                      l10n.favoritesError,
+                    ),
+              onRefresh: controller.load,
+              onLoadMore: controller.loadMore,
+              itemCount: controller.cards.length + 1,
+              empty: const SizedBox.shrink(),
+              itemBuilder: (context, index) {
+                if (index == controller.cards.length) {
+                  return FollowingAddCard(onTap: onGoHome);
+                }
+                final drama = controller.cards[index];
+                final episode = drama.episodes.isEmpty
+                    ? 1
+                    : drama.episodes.first.number;
+                return FollowingGridCard(
+                  dramaId: drama.id,
+                  title: drama.title,
+                  posterUrl: drama.posterUrl,
+                  viewCount: drama.viewCount,
+                  editing: isEditing,
+                  subtitle: l10n.favoriteEpisodeProgress(
+                    episode,
+                    drama.episodeCount,
+                  ),
+                  onTap: () => unawaited(playDramaFromCatalog(context, drama)),
+                  onRemove: () async {
+                    if (await _confirmRemove(context) &&
+                        await controller.remove(drama.id) &&
+                        controller.cards.isEmpty) {
+                      onListEmptied();
+                    }
+                  },
+                );
+              },
+            );
+          },
+        );
+      },
+    );
+  }
+}
+
+class _HistoryList extends StatelessWidget {
+  const _HistoryList({
+    required this.controller,
+    required this.editing,
+    required this.scrollController,
+    required this.onListEmptied,
+  });
+
+  final WatchRecordsController controller;
+  final ValueListenable<bool> editing;
+  final ScrollController scrollController;
+  final VoidCallback onListEmptied;
+
+  @override
+  Widget build(BuildContext context) {
+    return ValueListenableBuilder<bool>(
+      valueListenable: editing,
+      builder: (context, isEditing, _) {
+        return ListenableBuilder(
+          listenable: controller,
+          builder: (context, _) {
+            final l10n = AppLocalizations.of(context)!;
+            return FollowingPagedGrid(
+              key: const Key('following-history-grid'),
+              scrollController: scrollController,
+              loading: controller.loading,
+              loadingMore: controller.loadingMore,
+              hasMore: controller.hasMore,
+              hasItems: controller.records.isNotEmpty,
+              singleColumn: true,
+              errorMessage: controller.error == null
+                  ? null
+                  : errorText(l10n, controller.error, l10n.progressError),
+              loadMoreError: controller.loadMoreError == null
+                  ? null
+                  : errorText(
+                      l10n,
+                      controller.loadMoreError,
+                      l10n.progressError,
+                    ),
+              onRefresh: controller.load,
+              onLoadMore: controller.loadMore,
+              itemCount: controller.records.length,
+              empty: EmptyState(
+                key: const Key('following-history-empty'),
+                icon: Icons.history_rounded,
+                title: l10n.noWatchRecords,
+                subtitle: l10n.emptyHint,
+              ),
+              itemBuilder: (context, index) {
+                final record = controller.records[index];
+                final progress = record.progress.fraction;
+                final hasProgress = record.progress.duration > Duration.zero;
+                final watchedPercent = (progress * 100)
+                    .round()
+                    .clamp(0, 100)
+                    .toInt();
+                void openRecord() {
+                  unawaited(_openHistory(context, controller, record));
+                }
+
+                return FollowingHistoryCard(
+                  dramaId: record.dramaId,
+                  title: _historyTitle(l10n, record),
+                  posterUrl: record.displayCover,
+                  viewCount:
+                      record.drama?.viewCount ?? record.progress.playCount,
+                  progress: hasProgress ? progress : null,
+                  progressLabel: hasProgress
+                      ? l10n.watchedPercent(watchedPercent)
+                      : null,
+                  editing: isEditing,
+                  subtitle: _historySubtitle(l10n, record),
+                  onTap: openRecord,
+                  onContinue: openRecord,
+                  onRemove: () async {
+                    if (await _confirmRemove(context) &&
+                        await controller.remove(record.dramaId) &&
+                        controller.records.isEmpty) {
+                      onListEmptied();
+                    }
+                  },
+                );
+              },
+            );
+          },
+        );
+      },
+    );
+  }
+}
+
+String _historyTitle(AppLocalizations l10n, WatchRecord record) {
+  return record.displayTitle.isEmpty
+      ? l10n.episodeLabel(record.episodeNumber)
+      : record.displayTitle;
+}
+
+String _historySubtitle(AppLocalizations l10n, WatchRecord record) {
+  final total =
+      record.progress.totalEpisodes ?? record.drama?.episodeCount ?? 0;
+  if (record.episodeNumber <= 0 || total <= 0) {
+    return l10n.watchedToEpisode(record.episodeNumber);
+  }
+  return l10n.favoriteEpisodeProgress(record.episodeNumber, total);
+}
+
+Future<void> _openHistory(
+  BuildContext context,
+  WatchRecordsController controller,
+  WatchRecord record,
+) async {
+  final drama = record.drama ?? await controller.detailForOpen(record.dramaId);
+  if (!context.mounted || drama == null) return;
+  await playDramaFromCatalog(
+    context,
+    drama,
+    episodeId: record.progress.episodeId,
+  );
+}
+
+Future<bool> _confirmRemove(BuildContext context) async {
+  final l10n = AppLocalizations.of(context)!;
+  return await showDialog<bool>(
+        context: context,
+        builder: (dialogContext) => AlertDialog(
+          content: Text(l10n.confirmRemove),
+          actions: [
+            TextButton(
+              onPressed: () => Navigator.pop(dialogContext, false),
+              child: Text(l10n.cancel),
+            ),
+            FilledButton(
+              onPressed: () => Navigator.pop(dialogContext, true),
+              child: Text(l10n.remove),
+            ),
+          ],
+        ),
+      ) ??
+      false;
+}
diff --git a/lib/pages/following/following_paged_grid.dart b/lib/pages/following/following_paged_grid.dart
new file mode 100644
index 0000000..119b900
--- /dev/null
+++ b/lib/pages/following/following_paged_grid.dart
@@ -0,0 +1,159 @@
+// Author: fruit.com.cn
+
+import 'dart:async';
+
+import 'package:flutter/material.dart';
+
+import '../../core/theme/app_colors.dart';
+import '../../core/theme/app_dimens.dart';
+import '../../core/widgets/app_pull_to_refresh.dart';
+import '../../core/widgets/empty_state.dart';
+import '../../core/widgets/paged_list_footer.dart';
+import '../../l10n/app_localizations.dart';
+
+class FollowingPagedGrid extends StatelessWidget {
+  const FollowingPagedGrid({
+    super.key,
+    required this.scrollController,
+    required this.loading,
+    required this.loadingMore,
+    required this.hasMore,
+    required this.hasItems,
+    required this.itemCount,
+    required this.itemBuilder,
+    required this.empty,
+    required this.onRefresh,
+    required this.onLoadMore,
+    this.showInitialLoading = true,
+    this.singleColumn = false,
+    this.errorMessage,
+    this.loadMoreError,
+  });
+
+  static const double _loadMoreThreshold = 240;
+
+  final ScrollController scrollController;
+  final bool loading;
+  final bool loadingMore;
+  final bool hasMore;
+  final bool hasItems;
+  final int itemCount;
+  final IndexedWidgetBuilder itemBuilder;
+  final Widget empty;
+  final String? errorMessage;
+  final String? loadMoreError;
+  final bool showInitialLoading;
+  final bool singleColumn;
+  final Future<void> Function() onRefresh;
+  final Future<void> Function() onLoadMore;
+
+  @override
+  Widget build(BuildContext context) {
+    if (showInitialLoading && loading && !hasItems) {
+      return const Center(child: CircularProgressIndicator());
+    }
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        final gridWidth =
+            constraints.maxWidth - AppDimens.feedPageHorizontal * 2;
+        final itemWidth = (gridWidth - AppDimens.followingGridGap * 2) / 3;
+        final itemExtent =
+            itemWidth / AppDimens.cardCoverAspectRatio +
+            AppDimens.followingCardTextExtent;
+        final gridDelegate = singleColumn
+            ? const SliverGridDelegateWithFixedCrossAxisCount(
+                crossAxisCount: 1,
+                mainAxisSpacing: AppDimens.followingHistoryRowGap,
+                mainAxisExtent: AppDimens.followingHistoryCoverHeight,
+              )
+            : SliverGridDelegateWithFixedCrossAxisCount(
+                crossAxisCount: 3,
+                crossAxisSpacing: AppDimens.followingGridGap,
+                mainAxisSpacing: AppDimens.followingGridRowGap,
+                mainAxisExtent: itemExtent,
+              );
+        return NotificationListener<ScrollNotification>(
+          onNotification: _onScroll,
+          child: AppPullToRefresh(
+            onRefresh: onRefresh,
+            child: CustomScrollView(
+              key: ValueKey<String>('following-scroll-$runtimeType'),
+              controller: scrollController,
+              physics: AppPullToRefresh.physics,
+              slivers: [
+                if (itemCount == 0)
+                  SliverFillRemaining(
+                    hasScrollBody: false,
+                    child: errorMessage == null
+                        ? empty
+                        : EmptyState(
+                            icon: Icons.cloud_off_rounded,
+                            title: errorMessage!,
+                            actionLabel: AppLocalizations.of(context)!.retry,
+                            onAction: () => unawaited(onRefresh()),
+                          ),
+                  )
+                else ...[
+                  if (errorMessage != null)
+                    SliverToBoxAdapter(
+                      child: Padding(
+                        padding: const EdgeInsets.fromLTRB(
+                          AppDimens.feedPageHorizontal,
+                          AppDimens.spaceSm,
+                          AppDimens.feedPageHorizontal,
+                          0,
+                        ),
+                        child: Text(
+                          errorMessage!,
+                          style: const TextStyle(
+                            color: AppColors.textTertiary,
+                            fontSize: AppDimens.followingSubtitleFont,
+                          ),
+                        ),
+                      ),
+                    ),
+                  SliverPadding(
+                    padding: const EdgeInsets.fromLTRB(
+                      AppDimens.feedPageHorizontal,
+                      0,
+                      AppDimens.feedPageHorizontal,
+                      AppDimens.spaceSm,
+                    ),
+                    sliver: SliverGrid(
+                      gridDelegate: gridDelegate,
+                      delegate: SliverChildBuilderDelegate(
+                        itemBuilder,
+                        childCount: itemCount,
+                      ),
+                    ),
+                  ),
+                  SliverToBoxAdapter(
+                    child: PagedListFooter(
+                      loading: loadingMore,
+                      errorMessage: loadMoreError,
+                      onRetry: onLoadMore,
+                    ),
+                  ),
+                  const SliverToBoxAdapter(
+                    child: SizedBox(height: AppDimens.spaceXl),
+                  ),
+                ],
+              ],
+            ),
+          ),
+        );
+      },
+    );
+  }
+
+  bool _onScroll(ScrollNotification notification) {
+    if (notification.depth != 0) return false;
+    if (notification.metrics.extentAfter > _loadMoreThreshold) return false;
+    if (notification is ScrollUpdateNotification ||
+        notification is ScrollEndNotification ||
+        notification is OverscrollNotification) {
+      unawaited(onLoadMore());
+    }
+    return false;
+  }
+}
diff --git a/lib/pages/home/home_logic.dart b/lib/pages/home/home_logic.dart
index 826749e..daa8fcc 100644
--- a/lib/pages/home/home_logic.dart
+++ b/lib/pages/home/home_logic.dart
@@ -12,14 +12,15 @@ import '../player/open_player.dart';
 import '../watch_records/watch_records_page.dart';
 
 class HomeLogic extends ChangeNotifier {
-  HomeLogic(List<Drama> dramas) : currentDrama = dramas.first;
+  HomeLogic(List<Drama> dramas)
+    : currentDrama = dramas.isEmpty ? null : dramas.first;
 
   final scaffoldKey = GlobalKey<ScaffoldState>();
-  Drama currentDrama;
+  Drama? currentDrama;
   int tab = 0;
-  int searchRequest = 0;
   int resumeRequest = 0;
   int backRequest = 0;
+  int followingHistoryRequest = 0;
   bool drawerOpen = false;
   bool detailOpen = false;
   bool videoImmersive = false;
@@ -30,10 +31,9 @@ class HomeLogic extends ChangeNotifier {
     if (!_disposed) notifyListeners();
   }
 
-  void select(int nextTab, {bool search = false, bool resume = false}) {
+  void select(int nextTab, {bool resume = false}) {
     FocusManager.instance.primaryFocus?.unfocus();
     tab = nextTab;
-    if (search) searchRequest++;
     if (resume) resumeRequest++;
     notify();
   }
@@ -45,13 +45,15 @@ class HomeLogic extends ChangeNotifier {
   }
 
   Future<void> openCurrentSeries(BuildContext context) async {
+    final drama = currentDrama;
+    if (drama == null) return;
     detailOpen = true;
     notify();
     await WidgetsBinding.instance.endOfFrame;
     if (!context.mounted) return;
     try {
       await Navigator.of(context).push<void>(
-        MaterialPageRoute(builder: (_) => DramaDetailPage(drama: currentDrama)),
+        MaterialPageRoute(builder: (_) => DramaDetailPage(drama: drama)),
       );
     } finally {
       if (context.mounted) {
@@ -79,9 +81,11 @@ class HomeLogic extends ChangeNotifier {
     switch (action) {
       case DiscoverPageAction.home:
         select(0);
-      case DiscoverPageAction.create:
+      case DiscoverPageAction.recommend:
+        select(1);
+      case DiscoverPageAction.following:
         select(2);
-      case DiscoverPageAction.my:
+      case DiscoverPageAction.mine:
         select(3);
     }
   }
@@ -98,14 +102,22 @@ class HomeLogic extends ChangeNotifier {
     ).push(MaterialPageRoute<void>(builder: (_) => const WatchRecordsPage()));
   }
 
+  void openFollowingHistory() {
+    tab = 2;
+    followingHistoryRequest += 1;
+    notify();
+  }
+
   void myAction(MyPageAction action) {
     switch (action) {
       case MyPageAction.home:
         select(0);
-      case MyPageAction.discover:
-        select(1, search: true);
-      case MyPageAction.create:
+      case MyPageAction.recommend:
+        select(1);
+      case MyPageAction.following:
         select(2);
+      case MyPageAction.mine:
+        select(3);
       case MyPageAction.resume:
         select(0, resume: true);
     }
diff --git a/lib/pages/home/home_view.dart b/lib/pages/home/home_view.dart
index dcd4075..1b8877a 100644
--- a/lib/pages/home/home_view.dart
+++ b/lib/pages/home/home_view.dart
@@ -2,35 +2,33 @@
 
 import 'dart:async';
 
-import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:provider/provider.dart';
 
 import '../../core/config/app_config.dart';
-import '../../core/data/models/drama.dart';
 import '../../core/data/services/home_feed_controller.dart';
 import '../../core/data/services/catalog_controller.dart';
-import '../../core/data/services/catalog_retry.dart';
 import '../../core/data/services/category_controller.dart';
+import '../../core/data/services/favorite_controller.dart';
+import '../../core/data/services/wallet_controller.dart';
 import '../../core/platform/haptics.dart';
 import '../../core/theme/app_colors.dart';
 import '../../core/theme/app_theme.dart';
-import '../../core/widgets/app_bottom_nav.dart';
-import '../../core/widgets/catalog_debug_info.dart';
-import '../../core/widgets/catalog_endpoint_editor.dart';
-import '../../core/widgets/empty_state.dart';
-import '../../l10n/app_localizations.dart';
-import '../discover/discover_types.dart';
-import '../discover/discover_view.dart';
-import '../create/create_view.dart';
+import '../../core/widgets/auth_gate.dart';
+import '../../core/widgets/app_root_tab.dart';
+import '../discover/search_page.dart';
+import '../following/following_page.dart';
+import '../filter/filter_page.dart';
 import '../mine/mine_types.dart';
-import '../player/widgets/home_feed_header.dart';
-import '../player/player_view.dart';
+import '../recommend/recommend_page.dart';
 import '../mine/mine_view.dart';
-import 'home_feed_channel.dart';
+import '../store/vip_page.dart';
+import '../wallet/wallet_page.dart';
 import 'home_binding.dart';
 import 'home_logic.dart';
+import 'widgets/home_feed_grid.dart';
+import 'widgets/home_grid_header.dart';
 
 class HomePage extends StatefulWidget {
   const HomePage({super.key});
@@ -40,11 +38,6 @@ class HomePage extends StatefulWidget {
 }
 
 class _HomePageState extends State<HomePage> with WidgetsBindingObserver {
-  static const _androidSplashAsset = 'assets/icon/splash_logo_android12.png';
-  static const _defaultSplashAsset = 'assets/icon/splash_logo.png';
-  static const _androidSplashSize = 288.0;
-  static const _defaultSplashSize = 384.0;
-
   bool _resumeRetryInFlight = false;
   HomeFeedController? _homeFeed;
   bool _recommendSeeded = false;
@@ -87,58 +80,18 @@ class _HomePageState extends State<HomePage> with WidgetsBindingObserver {
     }
   }
 
-  Future<void> _retryHome(CatalogController catalog) {
-    return retryCatalogLoad(reload: catalog.load);
-  }
-
-  Future<void> _editHomeEndpoint(CatalogController catalog) {
-    return showCatalogEndpointEditor(context, reload: catalog.load);
-  }
-
   @override
   Widget build(BuildContext context) {
     final catalog = context.watch<CatalogController>();
-    final l10n = AppLocalizations.of(context)!;
     return Theme(
-      data: AppTheme.light(),
-      child: _buildHome(context, catalog, l10n),
+      data: AppTheme.dark(),
+      child: _buildHome(context, catalog),
     );
   }
 
-  Widget _buildHome(
-    BuildContext context,
-    CatalogController catalog,
-    AppLocalizations l10n,
-  ) {
-    if (catalog.loading) {
-      return catalog.settled ? _retryLoading() : _startupSplash();
-    }
-    if (catalog.error != null) {
-      return Scaffold(
-        backgroundColor: Colors.transparent,
-        body: HomeFailureView(
-          error: catalog.debugError ?? catalog.error,
-          onRetry: () => unawaited(_retryHome(catalog)),
-          onEditEndpoint: () => unawaited(_editHomeEndpoint(catalog)),
-        ),
-      );
-    }
-    if (catalog.dramas.isEmpty) {
-      return Scaffold(
-        backgroundColor: Colors.transparent,
-        body: EmptyState(
-          key: const Key('home-empty'),
-          icon: Icons.movie_outlined,
-          title: l10n.noStories,
-          subtitle: l10n.emptyHint,
-          actionLabel: l10n.retry,
-          onAction: catalog.load,
-        ),
-      );
-    }
-
+  Widget _buildHome(BuildContext context, CatalogController catalog) {
     final homeFeed = _ensureHomeFeed(catalog);
-    if (!_recommendSeeded) {
+    if (!_recommendSeeded && catalog.dramas.isNotEmpty) {
       _recommendSeeded = true;
       homeFeed.seedRecommend(catalog.dramas);
       WidgetsBinding.instance.addPostFrameCallback((_) {
@@ -157,64 +110,6 @@ class _HomePageState extends State<HomePage> with WidgetsBindingObserver {
       await homeFeed.prefetchChannels();
     }
   }
-
-  Widget _startupSplash() {
-    final isAndroid = defaultTargetPlatform == TargetPlatform.android;
-    final size = isAndroid ? _androidSplashSize : _defaultSplashSize;
-    return AnnotatedRegion<SystemUiOverlayStyle>(
-      value: SystemUiOverlayStyle.light,
-      child: ColoredBox(
-        color: AppColors.splashInk,
-        child: Center(
-          child: Image.asset(
-            isAndroid ? _androidSplashAsset : _defaultSplashAsset,
-            key: const Key('startup-splash'),
-            width: size,
-            height: size,
-            fit: BoxFit.contain,
-          ),
-        ),
-      ),
-    );
-  }
-
-  Widget _retryLoading() {
-    return AnnotatedRegion<SystemUiOverlayStyle>(
-      value: SystemUiOverlayStyle.light,
-      child: const Scaffold(
-        backgroundColor: AppColors.splashInk,
-        body: Center(child: CircularProgressIndicator(color: AppColors.blue)),
-      ),
-    );
-  }
-}
-
-/// 首页目录加载失败与重试入口。
-class HomeFailureView extends StatelessWidget {
-  const HomeFailureView({
-    super.key,
-    this.error,
-    required this.onRetry,
-    this.onEditEndpoint,
-  });
-
-  final String? error;
-  final VoidCallback onRetry;
-  final VoidCallback? onEditEndpoint;
-
-  @override
-  Widget build(BuildContext context) {
-    final l10n = AppLocalizations.of(context)!;
-    return EmptyState(
-      icon: Icons.cloud_off_rounded,
-      title: l10n.catalogError,
-      actionLabel: l10n.retry,
-      onAction: onRetry,
-      footer: kDebugMode
-          ? CatalogDebugInfo(error: error, onEditEndpoint: onEditEndpoint)
-          : null,
-    );
-  }
 }
 
 /// 四个根页面共享同一路由并保持各自状态。
@@ -229,29 +124,19 @@ class _HomeTabs extends StatefulWidget {
 
 class _HomeTabsState extends State<_HomeTabs> {
   late final HomeLogic logic;
-  List<Drama>? _visibleDramas;
-  HomeFeedChannel? _visibleChannel;
 
   @override
   void initState() {
     super.initState();
     logic = HomeBinding().create(widget.feedController.dramas);
-    _visibleDramas = widget.feedController.dramas;
-    _visibleChannel = widget.feedController.channel;
-    widget.feedController.addListener(_onFeedChanged);
   }
 
   @override
   void dispose() {
-    widget.feedController.removeListener(_onFeedChanged);
     logic.dispose();
     super.dispose();
   }
 
-  void _onFeedChanged() {
-    if (mounted) setState(() {});
-  }
-
   @override
   Widget build(BuildContext context) {
     return ListenableBuilder(
@@ -261,8 +146,7 @@ class _HomeTabsState extends State<_HomeTabs> {
   }
 
   Widget _scaffold(BuildContext context) {
-    final l10n = AppLocalizations.of(context)!;
-    final feed = logic.tab == 0;
+    final mediaTab = logic.tab == 0 || logic.tab == 1;
     final content = PopScope(
       canPop: false,
       onPopInvokedWithResult: (didPop, _) {
@@ -271,15 +155,15 @@ class _HomeTabsState extends State<_HomeTabs> {
       },
       child: Scaffold(
         key: logic.scaffoldKey,
-        backgroundColor: Colors.transparent,
+        backgroundColor: AppColors.transparent,
         resizeToAvoidBottomInset: false,
         body: _body(context),
-        bottomNavigationBar: logic.videoImmersive ? null : _nav(context, l10n),
+        bottomNavigationBar: logic.videoImmersive ? null : _nav(context),
       ),
     );
     return AnnotatedRegion<SystemUiOverlayStyle>(
-      value: feed ? SystemUiOverlayStyle.light : SystemUiOverlayStyle.dark,
-      child: feed
+      value: SystemUiOverlayStyle.light,
+      child: mediaTab
           ? content
           : DecoratedBox(
               key: const Key('home-page-gradient'),
@@ -293,218 +177,84 @@ class _HomeTabsState extends State<_HomeTabs> {
     return IndexedStack(
       index: logic.tab,
       children: [
-        _home(context),
-        _discover(context),
-        const CreatePage(),
+        _homeGrid(context),
+        _recommend(context),
+        FollowingPage(
+          onGoHome: () => logic.select(0),
+          favoriteController: context.read<FavoriteController>(),
+          historyRequest: logic.followingHistoryRequest,
+        ),
         _my(context),
       ],
     );
   }
 
-  Widget _home(BuildContext context) {
-    final currentDramas = widget.feedController.dramas;
-    final currentChannel = widget.feedController.channel;
-    if (currentDramas.isNotEmpty) {
-      _visibleDramas = currentDramas;
-      _visibleChannel = currentChannel;
-    }
-    if (currentDramas.isEmpty && !widget.feedController.loadingFirstPage) {
-      return _feedChannelPlaceholder(context);
-    }
-    final visibleDramas = _visibleDramas;
-    final visibleChannel = _visibleChannel;
-    final switching =
-        currentDramas.isEmpty && widget.feedController.loadingFirstPage;
-    if (visibleDramas == null ||
-        visibleDramas.isEmpty ||
-        visibleChannel == null) {
-      return _feedChannelPlaceholder(context);
-    }
-    final playerDramas = currentDramas.isEmpty ? visibleDramas : currentDramas;
-    final playerChannel = currentDramas.isEmpty
-        ? visibleChannel
-        : currentChannel;
-    return Stack(
-      fit: StackFit.expand,
-      children: [
-        PlayerPage(
-          homeMode: true,
-          embedded: true,
-          active: logic.tab == 0,
-          drama: playerDramas.first,
-          initialIndex: 0,
-          feedDramas: playerDramas,
-          feedChannel: playerChannel,
-          headerChannel: currentChannel,
-          onOpenFullPlayer: (drama, episode) =>
-              logic.playDrama(context, drama, episodeId: episode.id),
-          onRefreshFeed: widget.feedController.refreshCurrent,
-          onLoadMore: widget.feedController.loadMore,
-          onChannelSelected: _selectFeedChannel,
-          onDramaChanged: logic.onDramaChanged,
-          onImmersiveChanged: logic.onImmersiveChanged,
-          onSearch: () => logic.select(1, search: true),
-          onDiscover: () => logic.select(1),
-          onMy: () => logic.select(3),
-        ),
-        if (switching)
-          Positioned.fill(
-            child: IgnorePointer(
-              key: const Key('home-feed-channel-loading'),
-              child: ColoredBox(
-                color: Colors.black26,
-                child: Center(
-                  child: SizedBox.square(
-                    dimension: 24,
-                    child: CircularProgressIndicator(
-                      strokeWidth: 2.4,
-                      color: Colors.white70,
-                    ),
-                  ),
-                ),
-              ),
-            ),
-          ),
-      ],
+  Widget _homeGrid(BuildContext context) {
+    return HomeFeedGrid(
+      feedController: widget.feedController,
+      callbacks: HomeGridCallbacks(
+        onSearch: () => _openSearch(context),
+        onOpenVip: () => unawaited(_openVip(context)),
+        onOpenWallet: () => unawaited(_openWallet(context)),
+        onOpenFilter: () => _pushPage(context, const FilterPage()),
+      ),
+      onOpenDrama: (drama) => unawaited(logic.playDrama(context, drama)),
     );
   }
 
-  Widget _feedChannelPlaceholder(BuildContext context) {
-    final l10n = AppLocalizations.of(context)!;
-    return Stack(
-      fit: StackFit.expand,
-      children: [
-        const ColoredBox(color: Colors.black),
-        SafeArea(
-          bottom: false,
-          child: Column(
-            children: [
-              HomeFeedHeader(
-                l10n: l10n,
-                channel: widget.feedController.channel,
-                onChannelSelected: _selectFeedChannel,
-                onRefresh: () => _refreshPlaceholder(context),
-                onSearch: () => logic.select(1, search: true),
-                onMore: () {},
-              ),
-              Expanded(
-                child: widget.feedController.loadingFirstPage
-                    ? const Center(
-                        child: SizedBox.square(
-                          dimension: 24,
-                          child: CircularProgressIndicator(
-                            key: Key('home-feed-channel-loading'),
-                            strokeWidth: 2.4,
-                            color: Colors.white70,
-                          ),
-                        ),
-                      )
-                    : EmptyState(
-                        icon: Icons.movie_outlined,
-                        title: l10n.noStories,
-                        actionLabel: l10n.retry,
-                        onAction: () =>
-                            unawaited(widget.feedController.refreshCurrent()),
-                      ),
-              ),
-            ],
-          ),
-        ),
-      ],
-    );
-  }
-
-  Future<bool> _refreshPlaceholder(BuildContext context) async {
-    final ok = await widget.feedController.refreshCurrent();
-    if (!ok && context.mounted) {
-      ScaffoldMessenger.of(context).showSnackBar(
-        SnackBar(content: Text(AppLocalizations.of(context)!.catalogError)),
-      );
-    }
-    return ok;
-  }
-
-  void _selectFeedChannel(HomeFeedChannel channel) {
-    unawaited(widget.feedController.selectChannel(channel));
-  }
-
-  Widget _discover(BuildContext context) {
-    return DiscoverPage(
+  Widget _recommend(BuildContext context) {
+    return RecommendPage(
+      feedController: widget.feedController,
       active: logic.tab == 1,
-      searchRequest: logic.searchRequest,
-      callbacks: DiscoverPageCallbacks(
-        onAction: logic.discoverAction,
-        onDramaSelected: (drama) => logic.playDrama(context, drama),
-        onProfile: logic.openProfile,
+      onSearch: () => _openSearch(context),
+    );
+  }
+
+  void _openSearch(BuildContext context) {
+    Navigator.of(
+      context,
+    ).push<void>(MaterialPageRoute(builder: (_) => const SearchPage()));
+  }
+
+  void _pushPage(BuildContext context, Widget page) {
+    Navigator.of(context).push<void>(MaterialPageRoute(builder: (_) => page));
+  }
+
+  Future<void> _openVip(BuildContext context) async {
+    if (!await ensureSignedIn(context) || !context.mounted) return;
+    final wallet = context.read<WalletController>();
+    await Navigator.of(context).push<void>(
+      MaterialPageRoute(
+        builder: (_) => VipPage(onPurchased: () => unawaited(wallet.load())),
       ),
     );
   }
 
+  Future<void> _openWallet(BuildContext context) async {
+    if (!await ensureSignedIn(context) || !context.mounted) return;
+    await Navigator.of(
+      context,
+    ).push<void>(MaterialPageRoute(builder: (_) => const WalletPage()));
+  }
+
   Widget _my(BuildContext context) {
     return MyPage(
       active: logic.tab == 3,
       callbacks: MyPageCallbacks(
         onAction: logic.myAction,
-        onDramaSelected: (drama) => logic.openDrama(context, drama),
+        onOpenHistoryTab: logic.openFollowingHistory,
       ),
     );
   }
 
-  Widget _nav(BuildContext context, AppLocalizations l10n) {
-    return AppBottomNav(
+  Widget _nav(BuildContext context) {
+    return AppRootBottomNav(
       barKey: const Key('home-tabs-bar'),
-      dark: logic.tab == 0,
-      items: [
-        _navItem(context, l10n, 0),
-        _navItem(context, l10n, 1),
-        _navItem(context, l10n, 2),
-        _navItem(context, l10n, 3),
-      ],
+      selected: AppRootTab.values[logic.tab],
+      onSelected: (tab) => _selectTab(context, tab.index),
     );
   }
 
-  AppBottomNavItem _navItem(
-    BuildContext context,
-    AppLocalizations l10n,
-    int index,
-  ) {
-    final selected = logic.tab == index;
-    return switch (index) {
-      0 => AppBottomNavItem(
-        tabKey: const Key('tab-home'),
-        icon: Icons.home_outlined,
-        selectedIcon: Icons.home_rounded,
-        label: l10n.homeTab,
-        selected: selected,
-        onTap: () => _selectTab(context, index),
-      ),
-      1 => AppBottomNavItem(
-        tabKey: const Key('tab-theater'),
-        icon: Icons.explore_outlined,
-        selectedIcon: Icons.explore_rounded,
-        label: l10n.theaterTab,
-        selected: selected,
-        onTap: () => _selectTab(context, index),
-      ),
-      2 => AppBottomNavItem(
-        tabKey: const Key('tab-create'),
-        icon: Icons.add_box_outlined,
-        selectedIcon: Icons.add_box_rounded,
-        label: l10n.createTab,
-        selected: selected,
-        onTap: () => _selectTab(context, index),
-      ),
-      _ => AppBottomNavItem(
-        tabKey: const Key('tab-mine'),
-        icon: Icons.person_outline_rounded,
-        selectedIcon: Icons.person_rounded,
-        label: l10n.myTab,
-        selected: selected,
-        onTap: () => _selectTab(context, index),
-      ),
-    };
-  }
-
   void _selectTab(BuildContext context, int tab) {
     final same = logic.tab == tab;
     if (!same) {
diff --git a/lib/pages/home/widgets/home_drama_classification.dart b/lib/pages/home/widgets/home_drama_classification.dart
new file mode 100644
index 0000000..88e87d6
--- /dev/null
+++ b/lib/pages/home/widgets/home_drama_classification.dart
@@ -0,0 +1,49 @@
+// Author: fruit.com.cn
+
+import '../../../core/data/models/drama.dart';
+
+const int homeNewReleaseDays = 7;
+const int homeHotViewThreshold = 100000;
+const int _snowflakeEpochMillis = 1288834974657;
+const int _snowflakeTimestampShift = 22;
+
+const Map<String, List<String>> _tagAliases = {
+  'uplifting': ['爽剧', '逆袭', '复仇', 'revenge', 'balas'],
+  'sweet': ['甜宠', '甜', 'sweet', 'romantis'],
+  'faceSlap': ['打脸', '虐渣', 'comeuppance', 'comeback'],
+  'angst': ['虐恋', '虐心', 'angst', 'heartbreak'],
+};
+
+DateTime? publishedAtForDrama(Drama drama) {
+  if (drama.createdAt != null) return drama.createdAt;
+  final snowflake = BigInt.tryParse(drama.id);
+  if (snowflake == null) return null;
+  final timestamp =
+      (snowflake >> _snowflakeTimestampShift).toInt() + _snowflakeEpochMillis;
+  final publishedAt = DateTime.fromMillisecondsSinceEpoch(timestamp);
+  return publishedAt.year >= 2015 ? publishedAt : null;
+}
+
+bool isNewDrama(Drama drama, {DateTime? now}) {
+  final publishedAt = publishedAtForDrama(drama);
+  if (publishedAt == null) return false;
+  final age = (now ?? DateTime.now()).difference(publishedAt);
+  return !age.isNegative && age <= const Duration(days: homeNewReleaseDays);
+}
+
+bool isHotDrama(Drama drama) {
+  return drama.isHot || drama.viewCount >= homeHotViewThreshold;
+}
+
+bool matchesHomeTag(Drama drama, String tagId) {
+  if (tagId == 'hot') return isHotDrama(drama);
+  return tagMatchesText(tagId, drama.genre) ||
+      tagMatchesText(tagId, drama.category);
+}
+
+bool tagMatchesText(String tagId, String text) {
+  if (tagId == 'hot') return false;
+  final normalized = text.toLowerCase();
+  final aliases = _tagAliases[tagId] ?? const [];
+  return aliases.any(normalized.contains);
+}
diff --git a/lib/pages/home/widgets/home_drama_grid.dart b/lib/pages/home/widgets/home_drama_grid.dart
index a5b82ce..c923237 100644
--- a/lib/pages/home/widgets/home_drama_grid.dart
+++ b/lib/pages/home/widgets/home_drama_grid.dart
@@ -86,7 +86,7 @@ class HomeDramaCard extends StatelessWidget {
         boxShadow: const [AppTheme.cardShadow],
       ),
       child: Material(
-        color: Colors.transparent,
+        color: AppColors.transparent,
         borderRadius: BorderRadius.circular(AppDimens.cardRadius),
         clipBehavior: Clip.antiAlias,
         child: InkWell(
diff --git a/lib/pages/home/widgets/home_failure_view.dart b/lib/pages/home/widgets/home_failure_view.dart
new file mode 100644
index 0000000..8ec39d8
--- /dev/null
+++ b/lib/pages/home/widgets/home_failure_view.dart
@@ -0,0 +1,36 @@
+// Author: fruit.com.cn
+
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+
+import '../../../core/widgets/catalog_debug_info.dart';
+import '../../../core/widgets/empty_state.dart';
+import '../../../l10n/app_localizations.dart';
+
+/// 首页目录加载失败与重试入口。
+class HomeFailureView extends StatelessWidget {
+  const HomeFailureView({
+    super.key,
+    this.error,
+    required this.onRetry,
+    this.onEditEndpoint,
+  });
+
+  final String? error;
+  final VoidCallback onRetry;
+  final VoidCallback? onEditEndpoint;
+
+  @override
+  Widget build(BuildContext context) {
+    final l10n = AppLocalizations.of(context)!;
+    return EmptyState(
+      icon: Icons.cloud_off_rounded,
+      title: l10n.catalogError,
+      actionLabel: l10n.retry,
+      onAction: onRetry,
+      footer: kDebugMode
+          ? CatalogDebugInfo(error: error, onEditEndpoint: onEditEndpoint)
+          : null,
+    );
+  }
+}
diff --git a/lib/pages/home/widgets/home_feed_card.dart b/lib/pages/home/widgets/home_feed_card.dart
new file mode 100644
index 0000000..a5ad5bd
--- /dev/null
+++ b/lib/pages/home/widgets/home_feed_card.dart
@@ -0,0 +1,178 @@
+// Author: fruit.com.cn
+
+import 'package:flutter/material.dart';
+
+import '../../../core/data/models/drama.dart';
+import '../../../core/theme/app_colors.dart';
+import '../../../core/theme/app_dimens.dart';
+import '../../../core/widgets/cover_play_count.dart';
+import '../../../core/widgets/drama_cover_badge_ribbon.dart';
+import '../../../core/widgets/remote_image.dart';
+import '../../../l10n/app_localizations.dart';
+import 'home_drama_classification.dart';
+
+final RegExp _tagSplitter = RegExp(r'[,/、·]');
+
+enum HomeDramaBadge { hot, newRelease, anime }
+
+class HomeFeedCard extends StatelessWidget {
+  const HomeFeedCard({
+    super.key,
+    required this.drama,
+    required this.onTap,
+    this.now,
+  });
+
+  final Drama drama;
+  final VoidCallback onTap;
+  final DateTime? now;
+
+  @override
+  Widget build(BuildContext context) {
+    final l10n = AppLocalizations.of(context)!;
+    return Material(
+      key: Key('home-feed-card-${drama.id}'),
+      color: AppColors.transparent,
+      child: InkWell(
+        borderRadius: BorderRadius.circular(AppDimens.cardCoverRadius),
+        onTap: onTap,
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          mainAxisAlignment: MainAxisAlignment.start,
+          children: [
+            _cover(l10n),
+            Expanded(
+              child: Padding(
+                padding: const EdgeInsets.only(
+                  top: AppDimens.cardCoverTitleGap,
+                ),
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  mainAxisAlignment: MainAxisAlignment.start,
+                  children: [
+                    Text(
+                      drama.title,
+                      key: Key('home-feed-title-${drama.id}'),
+                      maxLines: 2,
+                      overflow: TextOverflow.ellipsis,
+                      textAlign: TextAlign.left,
+                      style: const TextStyle(
+                        color: AppColors.navSelected,
+                        fontSize: AppDimens.cardTitleFont,
+                        fontWeight: FontWeight.w500,
+                        height: AppDimens.cardTitleLineHeight,
+                      ),
+                    ),
+                    const SizedBox(height: AppDimens.cardTitleTagGap),
+                    _tags(),
+                  ],
+                ),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget _cover(AppLocalizations l10n) {
+    final badge = _badge();
+    return ClipRRect(
+      key: Key('home-feed-cover-clip-${drama.id}'),
+      borderRadius: BorderRadius.circular(AppDimens.cardCoverRadius),
+      child: AspectRatio(
+        aspectRatio: AppDimens.cardCoverAspectRatio,
+        child: Stack(
+          fit: StackFit.expand,
+          children: [
+            RemoteImage(
+              drama.posterUrl,
+              key: Key('home-feed-cover-${drama.id}'),
+              fit: BoxFit.cover,
+              showFallbackIcon: true,
+              fallbackColor: AppColors.contentSurface,
+            ),
+            if (badge != null)
+              Positioned(
+                top: 0,
+                right: 0,
+                child: DramaCoverBadgeRibbon(
+                  label: _badgeLabel(l10n, badge),
+                  color: _badgeColor(badge),
+                  keyPrefix: '${drama.id}-${badge.name}',
+                ),
+              ),
+            const Positioned(
+              left: 0,
+              right: 0,
+              bottom: 0,
+              child: CoverBottomScrim(),
+            ),
+            Positioned(
+              right: AppDimens.cardPlayCountRight,
+              bottom: AppDimens.cardPlayCountBottom,
+              child: CoverPlayCount(
+                key: Key('home-feed-views-${drama.id}'),
+                count: drama.viewCount,
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  HomeDramaBadge? _badge() {
+    if (drama.dramaType.toUpperCase() == 'ANIME') {
+      return HomeDramaBadge.anime;
+    }
+    if (isNewDrama(drama, now: now)) return HomeDramaBadge.newRelease;
+    if (isHotDrama(drama)) {
+      return HomeDramaBadge.hot;
+    }
+    return null;
+  }
+
+  String _badgeLabel(AppLocalizations l10n, HomeDramaBadge badge) {
+    return switch (badge) {
+      HomeDramaBadge.hot => l10n.homeBadgeHot,
+      HomeDramaBadge.newRelease => l10n.homeBadgeNew,
+      HomeDramaBadge.anime => l10n.homeBadgeAnime,
+    };
+  }
+
+  Color _badgeColor(HomeDramaBadge badge) {
+    return switch (badge) {
+      HomeDramaBadge.hot => AppColors.badgeHot,
+      HomeDramaBadge.newRelease => AppColors.badgeNew,
+      HomeDramaBadge.anime => AppColors.badgeAnime,
+    };
+  }
+
+  Widget _tags() {
+    final tags = _cardTags();
+    if (tags.isEmpty) return const SizedBox.shrink();
+    return Text(
+      tags.join(' | '),
+      key: Key('home-feed-tags-${drama.id}'),
+      maxLines: 1,
+      overflow: TextOverflow.ellipsis,
+      textAlign: TextAlign.left,
+      style: const TextStyle(
+        color: AppColors.textTertiary,
+        fontSize: AppDimens.cardTagFont,
+        letterSpacing: 0,
+      ),
+    );
+  }
+
+  List<String> _cardTags() {
+    final seen = <String>{};
+    return [drama.genre, drama.category]
+        .expand((value) => value.split(_tagSplitter))
+        .map((value) => value.trim())
+        .where((value) => value.isNotEmpty && seen.add(value))
+        .take(3)
+        .toList(growable: false);
+  }
+}
diff --git a/lib/pages/home/widgets/home_feed_grid.dart b/lib/pages/home/widgets/home_feed_grid.dart
new file mode 100644
index 0000000..5fbce27
--- /dev/null
+++ b/lib/pages/home/widgets/home_feed_grid.dart
@@ -0,0 +1,409 @@
+// Author: fruit.com.cn
+
+import 'dart:async';
+
+import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+
+import '../../../core/data/models/content_category.dart';
+import '../../../core/data/models/drama.dart';
+import '../../../core/data/services/auth_controller.dart';
+import '../../../core/data/services/catalog_controller.dart';
+import '../../../core/data/services/category_controller.dart';
+import '../../../core/data/services/home_feed_controller.dart';
+import '../../../core/data/services/wallet_controller.dart';
+import '../../../core/theme/app_colors.dart';
+import '../../../core/theme/app_dimens.dart';
+import '../../../core/theme/app_theme.dart';
+import '../../../core/widgets/app_pull_to_refresh.dart';
+import '../../../core/widgets/drama_grid_skeleton.dart';
+import '../../../core/widgets/empty_state.dart';
+import '../../../core/widgets/paged_list_footer.dart';
+import '../../../l10n/app_localizations.dart';
+import '../../ranking/ranking_page.dart';
+import 'home_drama_classification.dart';
+import 'home_feed_card.dart';
+import 'home_grid_header.dart';
+
+const double _loadMoreThreshold = 240;
+const List<String> _costumeAliases = ['古装', 'costume', 'period'];
+const List<String> _communityAliases = ['社群', 'community', 'komunitas'];
+
+class HomeFeedGrid extends StatefulWidget {
+  const HomeFeedGrid({
+    super.key,
+    required this.feedController,
+    required this.callbacks,
+    required this.onOpenDrama,
+  });
+
+  final HomeFeedController feedController;
+  final HomeGridCallbacks callbacks;
+  final ValueChanged<Drama> onOpenDrama;
+
+  @override
+  State<HomeFeedGrid> createState() => _HomeFeedGridState();
+}
+
+class _HomeFeedGridState extends State<HomeFeedGrid> {
+  HomePrimaryTab _selectedPrimary = HomePrimaryTab.featured;
+  final PageController _pageController = PageController();
+  final Map<HomePrimaryTab, ScrollController> _scrollControllers = {
+    for (final tab in HomePrimaryTab.values) tab: ScrollController(),
+  };
+  final Map<HomePrimaryTab, String?> _selectedTags = {
+    for (final tab in HomePrimaryTab.values) tab: null,
+  };
+
+  @override
+  void initState() {
+    super.initState();
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      if (mounted && _pageController.hasClients) {
+        _pageController.jumpToPage(_selectedPrimary.index);
+      }
+    });
+  }
+
+  @override
+  void dispose() {
+    _pageController.dispose();
+    for (final controller in _scrollControllers.values) {
+      controller.dispose();
+    }
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final l10n = AppLocalizations.of(context)!;
+    final categories = context.watch<CategoryController>().categories;
+    final catalog = context.watch<CatalogController>();
+    final auth = context.watch<AuthController>();
+    final wallet = context.watch<WalletController>();
+    final shortcuts = _categoryShortcuts(categories, l10n);
+    final walletBadge = auth.isSignedIn && wallet.snapshot != null
+        ? wallet.balance
+        : null;
+    final ranking = _selectedPrimary == HomePrimaryTab.ranking;
+    return DecoratedBox(
+      key: const Key('home-grid'),
+      decoration: BoxDecoration(
+        color: ranking ? null : AppColors.appBackground,
+        gradient: ranking ? AppTheme.pageGradient : null,
+      ),
+      child: SafeArea(
+        bottom: false,
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            HomeGridHeader(
+              callbacks: widget.callbacks,
+              categories: shortcuts,
+              selectedPrimary: _selectedPrimary,
+              onPrimarySelected: _selectPrimary,
+              walletBadge: walletBadge,
+            ),
+            Expanded(
+              child: ListenableBuilder(
+                listenable: widget.feedController,
+                builder: (context, _) => PageView.builder(
+                  key: const Key('home-primary-page-view'),
+                  controller: _pageController,
+                  itemCount: HomePrimaryTab.values.length,
+                  onPageChanged: (index) => setState(
+                    () => _selectedPrimary = HomePrimaryTab.values[index],
+                  ),
+                  itemBuilder: (context, index) => _KeepAlivePage(
+                    key: PageStorageKey(
+                      'home-primary-page-${HomePrimaryTab.values[index].name}',
+                    ),
+                    child: _tabGrid(
+                      context,
+                      l10n,
+                      tab: HomePrimaryTab.values[index],
+                      catalog: catalog,
+                      shortcuts: shortcuts,
+                    ),
+                  ),
+                ),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  void _selectPrimary(HomePrimaryTab tab) {
+    if (tab == _selectedPrimary) return;
+    if (!_pageController.hasClients) {
+      setState(() => _selectedPrimary = tab);
+      return;
+    }
+    unawaited(
+      _pageController.animateToPage(
+        tab.index,
+        duration: AppDimens.homePrimaryTabAnimationDuration,
+        curve: Curves.easeOut,
+      ),
+    );
+  }
+
+  Widget _tabGrid(
+    BuildContext context,
+    AppLocalizations l10n, {
+    required HomePrimaryTab tab,
+    required CatalogController catalog,
+    required List<HomeGridCategoryShortcut> shortcuts,
+  }) {
+    if (catalog.error != null && widget.feedController.dramas.isEmpty) {
+      return _catalogErrorState(l10n, catalog);
+    }
+    if ((!catalog.settled || catalog.loading) &&
+        widget.feedController.dramas.isEmpty) {
+      return const DramaGridSkeleton(
+        key: Key('home-grid-skeleton'),
+        columns: 3,
+        horizontalPadding: AppDimens.feedPageHorizontal,
+        crossAxisSpacing: AppDimens.homeGridGap,
+        mainAxisSpacing: AppDimens.homeGridRowGap,
+      );
+    }
+    if (tab == HomePrimaryTab.ranking) {
+      return const RankingPage(embedded: true);
+    }
+    final tag = _selectedTags[tab];
+    final dramas = _dramasFor(tab, tag, shortcuts);
+    if (widget.feedController.loadingFirstPage && dramas.isEmpty) {
+      return const DramaGridSkeleton(
+        key: Key('home-grid-skeleton'),
+        columns: 3,
+        horizontalPadding: AppDimens.feedPageHorizontal,
+        crossAxisSpacing: AppDimens.homeGridGap,
+        mainAxisSpacing: AppDimens.homeGridRowGap,
+      );
+    }
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        final itemWidth =
+            (constraints.maxWidth -
+                AppDimens.feedPageHorizontal * 2 -
+                AppDimens.homeGridGap * 2) /
+            3;
+        final itemExtent =
+            itemWidth / AppDimens.cardCoverAspectRatio +
+            AppDimens.homeCardBodyExtent;
+        return NotificationListener<ScrollNotification>(
+          onNotification: _onScroll,
+          child: AppPullToRefresh(
+            key: const Key('home-grid-refresh'),
+            onRefresh: _refresh,
+            child: CustomScrollView(
+              key: const Key('home-grid-scroll'),
+              controller: _scrollControllers[tab],
+              physics: AppPullToRefresh.physics,
+              slivers: [
+                if (dramas.isEmpty)
+                  SliverFillRemaining(
+                    hasScrollBody: false,
+                    child: _emptyState(l10n, tab, tag),
+                  )
+                else
+                  SliverPadding(
+                    padding: const EdgeInsets.symmetric(
+                      horizontal: AppDimens.feedPageHorizontal,
+                    ),
+                    sliver: SliverGrid(
+                      key: const Key('home-grid-cards'),
+                      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+                        crossAxisCount: 3,
+                        crossAxisSpacing: AppDimens.homeGridGap,
+                        mainAxisSpacing: AppDimens.homeGridRowGap,
+                        mainAxisExtent: itemExtent,
+                      ),
+                      delegate: SliverChildBuilderDelegate(
+                        (context, index) => HomeFeedCard(
+                          drama: dramas[index],
+                          onTap: () => widget.onOpenDrama(dramas[index]),
+                        ),
+                        childCount: dramas.length,
+                      ),
+                    ),
+                  ),
+                if (dramas.isNotEmpty)
+                  SliverToBoxAdapter(
+                    child: Padding(
+                      padding: const EdgeInsets.only(bottom: AppDimens.spaceXl),
+                      child: PagedListFooter(
+                        loading: widget.feedController.loadingMore,
+                        errorMessage: widget.feedController.lastError == null
+                            ? null
+                            : l10n.catalogError,
+                        onRetry: widget.feedController.loadMore,
+                      ),
+                    ),
+                  ),
+              ],
+            ),
+          ),
+        );
+      },
+    );
+  }
+
+  Widget _catalogErrorState(AppLocalizations l10n, CatalogController catalog) {
+    final theme = Theme.of(context);
+    return Theme(
+      data: theme.copyWith(
+        colorScheme: theme.colorScheme.copyWith(
+          onSurface: AppColors.textTertiary,
+        ),
+      ),
+      child: EmptyState(
+        key: const Key('home-grid-error'),
+        icon: Icons.cloud_off_rounded,
+        title: l10n.catalogError,
+        actionLabel: l10n.retry,
+        onAction: catalog.load,
+      ),
+    );
+  }
+
+  Future<void> _refresh() async {
+    await widget.feedController.refreshCurrent();
+  }
+
+  bool _onScroll(ScrollNotification notification) {
+    if (notification.depth != 0) return false;
+    final reachedBottom =
+        notification.metrics.extentAfter <= _loadMoreThreshold;
+    if (reachedBottom &&
+        (notification is ScrollUpdateNotification ||
+            notification is ScrollEndNotification ||
+            notification is OverscrollNotification)) {
+      unawaited(widget.feedController.loadMore());
+    }
+    return false;
+  }
+
+  List<HomeGridCategoryShortcut> _categoryShortcuts(
+    List<ContentCategory> categories,
+    AppLocalizations l10n,
+  ) {
+    final costume = _findCategory(categories, _costumeAliases);
+    final community = _findCategory(categories, _communityAliases);
+    return [
+      HomeGridCategoryShortcut(
+        label: l10n.homeSectionCostume,
+        categoryName: costume?.name ?? '',
+        tab: HomePrimaryTab.costume,
+      ),
+      HomeGridCategoryShortcut(
+        label: l10n.homeSectionCommunity,
+        categoryName: community?.name ?? '',
+        tab: HomePrimaryTab.community,
+      ),
+    ];
+  }
+
+  ContentCategory? _findCategory(
+    List<ContentCategory> categories,
+    List<String> aliases,
+  ) {
+    for (final category in categories) {
+      final name = category.name.toLowerCase();
+      if (aliases.any(name.contains)) return category;
+    }
+    return null;
+  }
+
+  List<Drama> _dramasFor(
+    HomePrimaryTab tab,
+    String? tag,
+    List<HomeGridCategoryShortcut> shortcuts,
+  ) {
+    Iterable<Drama> source = widget.feedController.dramas;
+    if (tab == HomePrimaryTab.costume || tab == HomePrimaryTab.community) {
+      final categoryName = shortcuts
+          .firstWhere((shortcut) => shortcut.tab == tab)
+          .categoryName
+          .toLowerCase();
+      if (categoryName.isEmpty) return const [];
+      source = source.where(
+        (drama) =>
+            drama.category.toLowerCase().contains(categoryName) ||
+            drama.genre.toLowerCase().contains(categoryName),
+      );
+    }
+    if (tag != null) {
+      source = source.where((drama) => matchesHomeTag(drama, tag));
+    }
+    final dramas = source.toList(growable: false);
+    switch (tab) {
+      case HomePrimaryTab.newReleases:
+        return [...dramas]..sort((a, b) {
+          final left = publishedAtForDrama(a);
+          final right = publishedAtForDrama(b);
+          if (left == null && right == null) return b.id.compareTo(a.id);
+          if (left == null) return 1;
+          if (right == null) return -1;
+          return right.compareTo(left);
+        });
+      case HomePrimaryTab.ranking:
+        return [...dramas]..sort((a, b) => b.viewCount.compareTo(a.viewCount));
+      case HomePrimaryTab.featured:
+      case HomePrimaryTab.categories:
+      case HomePrimaryTab.costume:
+      case HomePrimaryTab.community:
+        return dramas;
+    }
+  }
+
+  Widget _emptyState(AppLocalizations l10n, HomePrimaryTab tab, String? tag) {
+    if (widget.feedController.lastError != null) {
+      return EmptyState(
+        key: const Key('home-grid-error'),
+        icon: Icons.cloud_off_rounded,
+        title: l10n.catalogError,
+        actionLabel: l10n.retry,
+        onAction: () => unawaited(widget.feedController.refreshCurrent()),
+      );
+    }
+    final filtered =
+        tab == HomePrimaryTab.costume ||
+        tab == HomePrimaryTab.community ||
+        tag != null;
+    return EmptyState(
+      key: const Key('home-grid-empty'),
+      icon: Icons.movie_filter_outlined,
+      title: filtered ? l10n.homeGridFilterEmpty : l10n.noStories,
+      subtitle: filtered ? null : l10n.emptyHint,
+      actionLabel: filtered ? l10n.homeGridClearFilter : null,
+      onAction: filtered
+          ? () => setState(() => _selectedTags[tab] = null)
+          : null,
+    );
+  }
+}
+
+class _KeepAlivePage extends StatefulWidget {
+  const _KeepAlivePage({super.key, required this.child});
+
+  final Widget child;
+
+  @override
+  State<_KeepAlivePage> createState() => _KeepAlivePageState();
+}
+
+class _KeepAlivePageState extends State<_KeepAlivePage>
+    with AutomaticKeepAliveClientMixin {
+  @override
+  bool get wantKeepAlive => true;
+
+  @override
+  Widget build(BuildContext context) {
+    super.build(context);
+    return widget.child;
+  }
+}
diff --git a/lib/pages/home/widgets/home_grid_header.dart b/lib/pages/home/widgets/home_grid_header.dart
new file mode 100644
index 0000000..131dcc4
--- /dev/null
+++ b/lib/pages/home/widgets/home_grid_header.dart
@@ -0,0 +1,310 @@
+// Author: fruit.com.cn
+
+import 'package:flutter/material.dart';
+
+import '../../../core/formatting/count_format.dart';
+import '../../../core/theme/app_colors.dart';
+import '../../../core/theme/app_dimens.dart';
+import '../../../l10n/app_localizations.dart';
+
+enum HomePrimaryTab {
+  featured,
+  newReleases,
+  categories,
+  ranking,
+  costume,
+  community,
+}
+
+class HomeGridCategoryShortcut {
+  const HomeGridCategoryShortcut({
+    required this.label,
+    required this.categoryName,
+    required this.tab,
+  });
+
+  final String label;
+  final String categoryName;
+  final HomePrimaryTab tab;
+}
+
+class HomeGridCallbacks {
+  const HomeGridCallbacks({
+    required this.onSearch,
+    required this.onOpenVip,
+    required this.onOpenWallet,
+    required this.onOpenFilter,
+  });
+
+  final VoidCallback onSearch;
+  final VoidCallback onOpenVip;
+  final VoidCallback onOpenWallet;
+  final VoidCallback onOpenFilter;
+}
+
+class HomeGridHeader extends StatelessWidget {
+  const HomeGridHeader({
+    super.key,
+    required this.callbacks,
+    required this.categories,
+    required this.selectedPrimary,
+    required this.onPrimarySelected,
+    this.walletBadge,
+  });
+
+  final HomeGridCallbacks callbacks;
+  final List<HomeGridCategoryShortcut> categories;
+  final HomePrimaryTab selectedPrimary;
+  final ValueChanged<HomePrimaryTab> onPrimarySelected;
+  final int? walletBadge;
+
+  @override
+  Widget build(BuildContext context) {
+    final l10n = AppLocalizations.of(context)!;
+    return Column(
+      key: const Key('home-grid-header'),
+      crossAxisAlignment: CrossAxisAlignment.start,
+      mainAxisAlignment: MainAxisAlignment.start,
+      children: [
+        _searchRow(l10n),
+        _primaryRow(l10n),
+        const SizedBox(height: AppDimens.homeSecondaryGridGap),
+      ],
+    );
+  }
+
+  Widget _searchRow(AppLocalizations l10n) {
+    return Padding(
+      padding: const EdgeInsets.fromLTRB(
+        AppDimens.feedPageHorizontal,
+        AppDimens.homeSearchTopGap,
+        AppDimens.feedPageHorizontal,
+        AppDimens.homeSearchPrimaryGap,
+      ),
+      child: Row(
+        crossAxisAlignment: CrossAxisAlignment.center,
+        mainAxisAlignment: MainAxisAlignment.start,
+        children: [
+          Expanded(
+            child: InkWell(
+              key: const Key('home-search-entry'),
+              borderRadius: BorderRadius.circular(AppDimens.searchRadius),
+              onTap: callbacks.onSearch,
+              child: Container(
+                height: AppDimens.searchHeight,
+                padding: const EdgeInsets.symmetric(
+                  horizontal: AppDimens.spaceMd,
+                ),
+                decoration: BoxDecoration(
+                  color: AppColors.contentSurface,
+                  borderRadius: BorderRadius.circular(AppDimens.searchRadius),
+                ),
+                child: Row(
+                  children: [
+                    const Icon(
+                      Icons.search_rounded,
+                      size: AppDimens.homeHeaderIcon,
+                      color: AppColors.textSecondary,
+                    ),
+                    const SizedBox(width: AppDimens.spaceSm),
+                    Expanded(
+                      child: Text(
+                        l10n.homeSearchHint,
+                        maxLines: 1,
+                        overflow: TextOverflow.ellipsis,
+                        style: const TextStyle(
+                          color: AppColors.textSecondary,
+                          fontSize: AppDimens.searchPlaceholderFont,
+                        ),
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+            ),
+          ),
+          const SizedBox(width: AppDimens.spaceSm),
+          _headerAction(
+            key: const Key('home-vip-entry'),
+            frameKey: const Key('home-vip-icon-frame'),
+            imageKey: const Key('home-vip-image'),
+            assetPath: 'assets/icon/crown.png',
+            fallbackIcon: Icons.workspace_premium_outlined,
+            color: AppColors.homeCrownGold,
+            tooltip: l10n.vipMembership,
+            onTap: callbacks.onOpenVip,
+          ),
+          const SizedBox(width: AppDimens.homeActionGap),
+          _headerAction(
+            key: const Key('home-wallet-entry'),
+            frameKey: const Key('home-wallet-icon-frame'),
+            imageKey: const Key('home-wallet-image'),
+            assetPath: 'assets/icon/gift.png',
+            fallbackIcon: Icons.card_giftcard_rounded,
+            color: AppColors.homeGiftPink,
+            tooltip: l10n.wallet,
+            onTap: callbacks.onOpenWallet,
+            badge: walletBadge,
+          ),
+        ],
+      ),
+    );
+  }
+
+  Widget _headerAction({
+    required Key key,
+    required Key frameKey,
+    required Key imageKey,
+    required String assetPath,
+    required IconData fallbackIcon,
+    required Color color,
+    required String tooltip,
+    required VoidCallback onTap,
+    int? badge,
+  }) {
+    return SizedBox.square(
+      dimension: AppDimens.homeActionSlot,
+      child: Stack(
+        clipBehavior: Clip.none,
+        children: [
+          Positioned.fill(
+            child: Tooltip(
+              message: tooltip,
+              child: Material(
+                color: AppColors.transparent,
+                child: InkWell(
+                  key: key,
+                  onTap: onTap,
+                  child: Center(
+                    child: SizedBox.square(
+                      key: frameKey,
+                      dimension: AppDimens.homeActionIcon,
+                      child: Image.asset(
+                        assetPath,
+                        key: imageKey,
+                        width: AppDimens.homeActionIcon,
+                        height: AppDimens.homeActionIcon,
+                        fit: BoxFit.contain,
+                        errorBuilder: (_, _, _) => Icon(
+                          fallbackIcon,
+                          size: AppDimens.homeActionIcon,
+                          color: color,
+                        ),
+                      ),
+                    ),
+                  ),
+                ),
+              ),
+            ),
+          ),
+          if (badge != null && badge > 0)
+            Positioned(
+              key: const Key('home-wallet-badge'),
+              top: 0,
+              right: 0,
+              child: Container(
+                constraints: const BoxConstraints(minWidth: 20, minHeight: 16),
+                padding: const EdgeInsets.symmetric(horizontal: 5),
+                alignment: Alignment.center,
+                decoration: BoxDecoration(
+                  color: AppColors.badgeHot,
+                  borderRadius: BorderRadius.circular(AppDimens.pillRadius),
+                ),
+                child: Text(
+                  formatInteractionCount(badge),
+                  style: const TextStyle(
+                    color: AppColors.navSelected,
+                    fontSize: AppDimens.cardBadgeFont,
+                    fontWeight: FontWeight.w700,
+                  ),
+                ),
+              ),
+            ),
+        ],
+      ),
+    );
+  }
+
+  Widget _primaryRow(AppLocalizations l10n) {
+    return SingleChildScrollView(
+      key: const Key('home-primary-sections'),
+      scrollDirection: Axis.horizontal,
+      padding: const EdgeInsets.symmetric(
+        horizontal: AppDimens.feedPageHorizontal,
+      ),
+      child: Row(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        mainAxisAlignment: MainAxisAlignment.start,
+        children: [
+          _primaryItem(
+            key: const Key('home-section-featured'),
+            label: l10n.homeSectionFeatured,
+            tab: HomePrimaryTab.featured,
+          ),
+          _primaryItem(
+            key: const Key('home-section-new'),
+            label: l10n.homeSectionNew,
+            tab: HomePrimaryTab.newReleases,
+          ),
+          _primaryItem(
+            key: const Key('home-section-categories'),
+            label: l10n.homeSectionCategories,
+            tab: HomePrimaryTab.categories,
+          ),
+          _primaryItem(
+            key: const Key('home-section-ranking'),
+            label: l10n.homeSectionRanking,
+            tab: HomePrimaryTab.ranking,
+          ),
+          for (final category in categories)
+            _primaryItem(
+              key: Key(
+                category.categoryName.isEmpty
+                    ? 'home-section-${category.tab.name}'
+                    : 'home-section-category-${category.categoryName}',
+              ),
+              label: category.label,
+              tab: category.tab,
+            ),
+        ],
+      ),
+    );
+  }
+
+  Widget _primaryItem({
+    required Key key,
+    required String label,
+    required HomePrimaryTab tab,
+  }) {
+    final selected = selectedPrimary == tab;
+    return InkWell(
+      key: key,
+      onTap: () => onPrimarySelected(tab),
+      child: Padding(
+        padding: const EdgeInsets.only(right: AppDimens.homePrimaryCategoryGap),
+        child: SizedBox(
+          height: AppDimens.homePrimaryRowHeight,
+          child: Align(
+            alignment: Alignment.bottomLeft,
+            child: AnimatedDefaultTextStyle(
+              key: Key('home-primary-label-${tab.name}'),
+              duration: AppDimens.homePrimaryTabAnimationDuration,
+              curve: Curves.easeOut,
+              style: TextStyle(
+                color: selected
+                    ? AppColors.navSelected
+                    : AppColors.textTabInactive,
+                fontSize: selected
+                    ? AppDimens.homePrimaryTabSelectedFont
+                    : AppDimens.homePrimaryTabFont,
+                fontWeight: selected ? FontWeight.w700 : FontWeight.w400,
+                letterSpacing: 0,
+              ),
+              child: Text(label, textAlign: TextAlign.left),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
diff --git a/lib/pages/mine/about_page.dart b/lib/pages/mine/about_page.dart
new file mode 100644
index 0000000..2da3cbe
--- /dev/null
+++ b/lib/pages/mine/about_page.dart
@@ -0,0 +1,70 @@
+// Author: fruit.com.cn
+
+import 'package:flutter/material.dart';
+
+import '../../core/theme/app_colors.dart';
+import '../../core/theme/app_dimens.dart';
+import '../../core/theme/app_theme.dart';
+import '../../core/widgets/plain_page_scaffold.dart';
+import '../../l10n/app_localizations.dart';
+
+// package_info is not configured in this client; keep the fallback in sync
+// with the version in pubspec.yaml.
+const String _fallbackAppVersion = '1.0.0';
+
+class MineAboutPage extends StatelessWidget {
+  const MineAboutPage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final l10n = AppLocalizations.of(context)!;
+    return Theme(
+      data: AppTheme.dark(),
+      child: PlainPageScaffold(
+        pageKey: const Key('mine-about-page'),
+        backKey: const Key('mine-about-back'),
+        title: l10n.aboutUs,
+        child: ListView(
+          padding: const EdgeInsets.fromLTRB(
+            AppDimens.pageHorizontal,
+            AppDimens.spaceXl,
+            AppDimens.pageHorizontal,
+            AppDimens.spaceXl,
+          ),
+          children: [
+            Text(
+              l10n.appName,
+              textAlign: TextAlign.center,
+              style: const TextStyle(
+                fontFamily: 'Outfit',
+                color: AppColors.textPrimary,
+                fontSize: AppDimens.detailHeadline,
+                fontWeight: FontWeight.w700,
+              ),
+            ),
+            const SizedBox(height: AppDimens.spaceSm),
+            Text(
+              l10n.versionLabel(_fallbackAppVersion),
+              key: const Key('mine-about-version'),
+              textAlign: TextAlign.center,
+              style: const TextStyle(
+                color: AppColors.textTertiary,
+                fontSize: AppDimens.caption,
+              ),
+            ),
+            const SizedBox(height: AppDimens.spaceXl),
+            Text(
+              l10n.aboutDescription,
+              textAlign: TextAlign.center,
+              style: const TextStyle(
+                color: AppColors.textTabInactive,
+                fontSize: AppDimens.body,
+                height: 1.5,
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
diff --git a/lib/pages/mine/mine_logic.dart b/lib/pages/mine/mine_logic.dart
index b60be77..cf7f0e6 100644
--- a/lib/pages/mine/mine_logic.dart
+++ b/lib/pages/mine/mine_logic.dart
@@ -14,6 +14,7 @@ class MineLogic extends ChangeNotifier {
 
   final WatchHistoryRepository history;
   List<WatchProgress> recent = const [];
+  int? watchRecordTotal;
   bool recentLoading = false;
   String? recentError;
   bool _disposed = false;
@@ -22,13 +23,15 @@ class MineLogic extends ChangeNotifier {
     if (!_disposed) notifyListeners();
   }
 
-  /// 最近观看：服务端只给 dramaId/位置，剧名封面用目录卡片按 id 映射。
+  /// 最近观看：取分页首屏，剧名封面仍由目录卡片按 id 映射。
   Future<void> refreshRecent() async {
     recentLoading = true;
     recentError = null;
     notify();
     try {
-      recent = await history.recent(limit: 20);
+      final page = await history.recent(pageIndex: 1, pageSize: 10);
+      recent = page.list;
+      watchRecordTotal = page.total;
     } catch (_) {
       recentError = 'progressError';
     } finally {
diff --git a/lib/pages/mine/mine_types.dart b/lib/pages/mine/mine_types.dart
index a823e8b..3d69297 100644
--- a/lib/pages/mine/mine_types.dart
+++ b/lib/pages/mine/mine_types.dart
@@ -2,18 +2,16 @@
 
 import 'package:flutter/foundation.dart';
 
-import '../../core/data/models/drama.dart';
-
 /// 「我的」页与根导航之间的返回动作。
-enum MyPageAction { home, discover, create, resume }
+enum MyPageAction { home, recommend, following, mine, resume }
 
 /// 「我的」页可进入的功能目的地。
 enum MineDestination {
-  watchlist,
   history,
   downloads,
   wallet,
   vip,
+  preferences,
   works,
   creatorCenter,
   notices,
@@ -23,10 +21,10 @@ enum MineDestination {
 
 /// 「我的」页导航回调；没有 `onAction` 时按独立页面处理。
 class MyPageCallbacks {
-  const MyPageCallbacks({this.onAction, this.onDramaSelected});
+  const MyPageCallbacks({this.onAction, this.onOpenHistoryTab});
 
   final ValueChanged<MyPageAction>? onAction;
-  final ValueChanged<Drama>? onDramaSelected;
+  final VoidCallback? onOpenHistoryTab;
 
   bool get embedded => onAction != null;
 }
diff --git a/lib/pages/mine/mine_view.dart b/lib/pages/mine/mine_view.dart
index 3b777a5..9105a09 100644
--- a/lib/pages/mine/mine_view.dart
+++ b/lib/pages/mine/mine_view.dart
@@ -3,32 +3,38 @@
 import 'dart:async';
 
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 import 'package:provider/provider.dart';
 
 import '../../core/data/repositories/watch_history_repository.dart';
 import '../../core/data/services/auth_controller.dart';
+import '../../core/data/services/favorite_controller.dart';
 import '../../core/data/services/locale_controller.dart';
 import '../../core/data/services/wallet_controller.dart';
 import '../../core/theme/app_colors.dart';
 import '../../core/theme/app_dimens.dart';
 import '../../core/theme/app_theme.dart';
-import '../../core/widgets/app_bottom_nav.dart';
+import '../../core/widgets/app_root_tab.dart';
 import '../../core/widgets/auth_gate.dart';
 import '../../core/widgets/plain_page_scaffold.dart';
 import '../../l10n/app_localizations.dart';
 import '../downloads/downloads_page.dart';
-import '../favorites/favorites_page.dart';
+import '../account/account_profile_page.dart';
+import '../filter/filter_page.dart';
 import '../notices/notices_page.dart';
 import '../settings/settings_page.dart';
-import '../store/recharge_page.dart';
 import '../store/vip_page.dart';
 import '../wallet/wallet_page.dart';
 import '../watch_records/watch_records_page.dart';
+import 'about_page.dart';
 import 'mine_binding.dart';
 import 'mine_logic.dart';
 import 'mine_types.dart';
+import 'widgets/mine_continue_watching.dart';
 import 'widgets/mine_header.dart';
 import 'widgets/mine_menu.dart';
+import 'widgets/mine_more_services.dart';
+import 'widgets/mine_stats_panel.dart';
 
 /// K28-B 我的页。
 class MyPage extends StatefulWidget {
@@ -79,96 +85,133 @@ class _MyPageState extends State<MyPage> {
   }
 
   Widget _page(BuildContext context) {
-    final l10n = AppLocalizations.of(context)!;
-    final content = SafeArea(
-      bottom: !embedded,
-      child: Column(
+    final content = DecoratedBox(
+      key: const Key('mine-page-surface'),
+      decoration: const BoxDecoration(
+        gradient: LinearGradient(
+          begin: Alignment.topCenter,
+          end: Alignment.bottomCenter,
+          colors: [
+            AppColors.mineGradientTop,
+            AppColors.mineGradientMiddle,
+            AppColors.mineGradientBottom,
+          ],
+          stops: [0, 0.4, 0.75],
+        ),
+      ),
+      child: Stack(
+        fit: StackFit.expand,
         children: [
-          _topBar(l10n),
-          Expanded(child: _body(context, l10n)),
-          if (!embedded) _bottomNav(l10n),
+          const DecoratedBox(
+            key: Key('mine-page-glow'),
+            decoration: BoxDecoration(
+              gradient: RadialGradient(
+                center: Alignment(0, -0.95),
+                radius: 0.9,
+                colors: [AppColors.mineGradientGlow, AppColors.transparent],
+              ),
+            ),
+          ),
+          SafeArea(
+            bottom: false,
+            child: Column(
+              children: [
+                Expanded(child: _body(context)),
+                if (!embedded) _bottomNav(),
+              ],
+            ),
+          ),
         ],
       ),
     );
-    return Theme(
-      data: AppTheme.light(),
-      child: embedded
-          ? content
-          : Scaffold(backgroundColor: AppColors.ink, body: content),
-    );
-  }
-
-  Widget _topBar(AppLocalizations l10n) {
-    return SizedBox(
-      height: AppDimens.contentHeaderHeight,
-      child: Padding(
-        padding: const EdgeInsets.symmetric(
-          horizontal: AppDimens.pageHorizontal,
-        ),
-        child: Align(
-          alignment: Alignment.centerLeft,
-          child: Text(
-            l10n.myTab,
-            style: const TextStyle(
-              fontFamily: 'Outfit',
-              color: AppColors.onSurface,
-              fontSize: AppDimens.pageTitle,
-              fontWeight: FontWeight.w800,
-            ),
-          ),
-        ),
+    return AnnotatedRegion<SystemUiOverlayStyle>(
+      value: SystemUiOverlayStyle.light,
+      child: Theme(
+        data: AppTheme.dark(),
+        child: embedded
+            ? content
+            : Scaffold(backgroundColor: AppColors.appBackground, body: content),
       ),
     );
   }
 
-  Widget _body(BuildContext context, AppLocalizations l10n) {
+  Widget _body(BuildContext context) {
     final auth = context.watch<AuthController>();
+    final favorites = context.watch<FavoriteController>();
     final wallet = context.watch<WalletController>();
-    final locale = context.watch<LocaleController>();
+    final continueWatching = logic.recent.take(10).toList(growable: false);
+    final followingCount =
+        auth.isSignedIn &&
+            favorites.error == null &&
+            !(favorites.loading && favorites.total == 0)
+        ? favorites.total
+        : null;
+    final watchRecordCount = auth.isSignedIn ? logic.watchRecordTotal : null;
+    final coinBalance = auth.isSignedIn && wallet.snapshot != null
+        ? wallet.balance
+        : null;
     return ListView(
       key: const Key('mine-page-scroll'),
-      padding: const EdgeInsets.fromLTRB(
-        AppDimens.pageHorizontal,
-        0,
-        AppDimens.pageHorizontal,
-        AppDimens.spaceXl,
-      ),
+      padding: const EdgeInsets.only(bottom: AppDimens.spaceXl),
       children: [
-        MineHeader(onTap: () => _openDestination(MineDestination.settings)),
-        const SizedBox(height: AppDimens.spaceMd),
-        MineShortcutGrid(onOpen: _openDestination),
-        const SizedBox(height: AppDimens.spaceMd),
-        MineWalletCard(
-          balance: _walletValue(l10n, auth, wallet),
-          onOpen: () => _openDestination(MineDestination.wallet),
-          onRecharge: _openRecharge,
+        Padding(
+          padding: const EdgeInsets.symmetric(
+            horizontal: AppDimens.pageHorizontal,
+          ),
+          child: MineHeader(onLogin: _openLogin, onEdit: _openEditActions),
         ),
-        const SizedBox(height: AppDimens.spaceMd),
-        MineVipCard(onOpen: () => _openDestination(MineDestination.vip)),
-        const SizedBox(height: AppDimens.spaceMd),
-        MineMenuList(
-          onOpen: _openDestination,
-          onLanguage: _openLanguage,
-          languageLabel: _languageLabel(l10n, locale.locale),
+        Padding(
+          padding: const EdgeInsets.symmetric(
+            horizontal: AppDimens.pageHorizontal,
+          ),
+          child: MineVipBanner(
+            onOpen: () => _openDestination(MineDestination.vip),
+          ),
+        ),
+        if (continueWatching.isNotEmpty) ...[
+          const SizedBox(height: AppDimens.mineSectionGap),
+          MineContinueWatching(
+            records: continueWatching,
+            onOpenAll: _openHistoryTab,
+          ),
+        ],
+        const SizedBox(height: AppDimens.mineSectionGap),
+        Padding(
+          padding: const EdgeInsets.symmetric(
+            horizontal: AppDimens.mineGridHorizontal,
+          ),
+          child: MineStatsPanel(
+            followingCount: followingCount,
+            watchRecordCount: watchRecordCount,
+            coinBalance: coinBalance,
+          ),
+        ),
+        const SizedBox(height: AppDimens.mineSectionGap),
+        Padding(
+          padding: const EdgeInsets.symmetric(
+            horizontal: AppDimens.mineGridHorizontal,
+          ),
+          child: MineMenuList(
+            onOpen: _openDestination,
+            onLanguage: _openLanguage,
+          ),
+        ),
+        const SizedBox(height: AppDimens.mineSectionGap),
+        Padding(
+          padding: const EdgeInsets.symmetric(
+            horizontal: AppDimens.mineGridHorizontal,
+          ),
+          child: MineMoreServices(
+            onCommonQuestions: () => _pushPlaceholder(MinePlaceholderKind.help),
+            onAbout: () => _push(const MineAboutPage()),
+          ),
         ),
       ],
     );
   }
 
-  String _walletValue(
-    AppLocalizations l10n,
-    AuthController auth,
-    WalletController wallet,
-  ) {
-    if (!auth.isSignedIn) return l10n.logInHint;
-    if (wallet.snapshot == null) return l10n.coins;
-    return l10n.walletBalanceShort(wallet.balance);
-  }
-
   void _openDestination(MineDestination destination) {
     switch (destination) {
-      case MineDestination.watchlist:
-        _push(const FavoritesPage());
       case MineDestination.history:
         _push(const WatchRecordsPage());
       case MineDestination.downloads:
@@ -177,6 +220,8 @@ class _MyPageState extends State<MyPage> {
         _openProtected(const WalletPage());
       case MineDestination.vip:
         _openVip();
+      case MineDestination.preferences:
+        _push(const FilterPage());
       case MineDestination.works:
         _pushPlaceholder(MinePlaceholderKind.works);
       case MineDestination.creatorCenter:
@@ -190,6 +235,73 @@ class _MyPageState extends State<MyPage> {
     }
   }
 
+  void _openLogin() {
+    unawaited(openAuthPage(context));
+  }
+
+  void _openHistoryTab() {
+    final callback = widget.callbacks.onOpenHistoryTab;
+    if (callback != null) {
+      callback();
+      return;
+    }
+    _push(const WatchRecordsPage());
+  }
+
+  Future<void> _openEditActions() async {
+    final selected = await showModalBottomSheet<String>(
+      context: context,
+      backgroundColor: AppColors.transparent,
+      showDragHandle: false,
+      builder: (sheetContext) => Material(
+        color: AppColors.mineCard,
+        borderRadius: const BorderRadius.vertical(
+          top: Radius.circular(AppDimens.mineCardRadius),
+        ),
+        clipBehavior: Clip.antiAlias,
+        child: SafeArea(
+          top: false,
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              ListTile(
+                key: const Key('mine-edit-profile'),
+                title: Text(AppLocalizations.of(sheetContext)!.accountProfile),
+                onTap: () => Navigator.pop(sheetContext, 'profile'),
+              ),
+              ListTile(
+                key: const Key('mine-edit-works'),
+                title: Text(AppLocalizations.of(sheetContext)!.myWorks),
+                onTap: () => Navigator.pop(sheetContext, 'works'),
+              ),
+              ListTile(
+                key: const Key('mine-edit-creator'),
+                title: Text(AppLocalizations.of(sheetContext)!.creatorCenter),
+                onTap: () => Navigator.pop(sheetContext, 'creator'),
+              ),
+              ListTile(
+                key: const Key('mine-edit-notices'),
+                title: Text(AppLocalizations.of(sheetContext)!.notices),
+                onTap: () => Navigator.pop(sheetContext, 'notices'),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+    if (!mounted || selected == null) return;
+    switch (selected) {
+      case 'profile':
+        _push(const AccountProfilePage());
+      case 'works':
+        _pushPlaceholder(MinePlaceholderKind.works);
+      case 'creator':
+        _pushPlaceholder(MinePlaceholderKind.creator);
+      case 'notices':
+        _push(const NoticesPage());
+    }
+  }
+
   void _push(Widget page) {
     Navigator.of(context).push<void>(MaterialPageRoute(builder: (_) => page));
   }
@@ -211,19 +323,10 @@ class _MyPageState extends State<MyPage> {
     _openProtected(VipPage(onPurchased: () => unawaited(wallet.load())));
   }
 
-  String _languageLabel(AppLocalizations l10n, Locale? locale) {
-    return switch (locale?.languageCode) {
-      'zh' => l10n.simplifiedChinese,
-      'en' => l10n.english,
-      'id' => l10n.bahasaIndonesia,
-      _ => l10n.language,
-    };
-  }
-
   Future<void> _openLanguage() async {
     final selected = await showModalBottomSheet<Locale>(
       context: context,
-      backgroundColor: Colors.transparent,
+      backgroundColor: AppColors.transparent,
       showDragHandle: false,
       builder: (_) =>
           _LanguageSheet(selected: context.read<LocaleController>().locale),
@@ -232,47 +335,20 @@ class _MyPageState extends State<MyPage> {
     await context.read<LocaleController>().select(selected);
   }
 
-  void _openRecharge() {
-    final wallet = context.read<WalletController>();
-    _openProtected(RechargePage(onPurchased: () => unawaited(wallet.load())));
-  }
-
-  Widget _bottomNav(AppLocalizations l10n) {
-    return AppBottomNav(
-      items: [
-        AppBottomNavItem(
-          tabKey: const Key('mine-nav-home'),
-          icon: Icons.home_outlined,
-          selectedIcon: Icons.home_rounded,
-          label: l10n.homeTab,
-          onTap: () => _act(MyPageAction.home),
-        ),
-        AppBottomNavItem(
-          tabKey: const Key('mine-nav-discover'),
-          icon: Icons.explore_outlined,
-          selectedIcon: Icons.explore_rounded,
-          label: l10n.theaterTab,
-          onTap: () => _act(MyPageAction.discover),
-        ),
-        AppBottomNavItem(
-          tabKey: const Key('mine-nav-create'),
-          icon: Icons.add_box_outlined,
-          selectedIcon: Icons.add_box_rounded,
-          label: l10n.createTab,
-          onTap: () => _act(MyPageAction.create),
-        ),
-        AppBottomNavItem(
-          tabKey: const Key('mine-nav-current'),
-          icon: Icons.person_outline_rounded,
-          selectedIcon: Icons.person_rounded,
-          label: l10n.myTab,
-          selected: true,
-          onTap: () {},
-        ),
-      ],
+  Widget _bottomNav() {
+    return AppRootBottomNav(
+      selected: AppRootTab.mine,
+      onSelected: (tab) => _act(_actionOf(tab)),
     );
   }
 
+  MyPageAction _actionOf(AppRootTab tab) => switch (tab) {
+    AppRootTab.home => MyPageAction.home,
+    AppRootTab.recommend => MyPageAction.recommend,
+    AppRootTab.following => MyPageAction.following,
+    AppRootTab.mine => MyPageAction.mine,
+  };
+
   void _act(MyPageAction action) {
     logic.act(
       context,
@@ -302,8 +378,10 @@ class _LanguageSheet extends StatelessWidget {
     ];
     return Material(
       key: const Key('mine-language-sheet'),
-      color: AppColors.card,
-      borderRadius: const BorderRadius.vertical(top: Radius.circular(20)),
+      color: AppColors.contentCard,
+      borderRadius: const BorderRadius.vertical(
+        top: Radius.circular(AppDimens.mineCardRadius),
+      ),
       clipBehavior: Clip.antiAlias,
       child: SafeArea(
         top: false,
@@ -319,9 +397,9 @@ class _LanguageSheet extends StatelessWidget {
                     child: Text(
                       l10n.language,
                       style: const TextStyle(
-                        color: AppColors.onSurface,
+                        color: AppColors.textPrimary,
                         fontSize: 20,
-                        fontWeight: FontWeight.w800,
+                        fontWeight: FontWeight.w700,
                       ),
                     ),
                   ),
@@ -338,7 +416,10 @@ class _LanguageSheet extends StatelessWidget {
                   contentPadding: const EdgeInsets.symmetric(horizontal: 4),
                   title: Text(option.$3),
                   trailing: selected?.languageCode == option.$1.languageCode
-                      ? const Icon(Icons.check_rounded, color: AppColors.blue)
+                      ? const Icon(
+                          Icons.check_rounded,
+                          color: AppColors.textPrimary,
+                        )
                       : null,
                   onTap: () => Navigator.pop(context, option.$1),
                 ),
@@ -373,7 +454,7 @@ class _MinePlaceholderPage extends StatelessWidget {
         child: Text(
           l10n.comingSoon,
           style: const TextStyle(
-            color: AppColors.muted,
+            color: AppColors.textSecondary,
             fontSize: AppDimens.body,
           ),
         ),
diff --git a/lib/pages/mine/widgets/mine_continue_watching.dart b/lib/pages/mine/widgets/mine_continue_watching.dart
new file mode 100644
index 0000000..1930979
--- /dev/null
+++ b/lib/pages/mine/widgets/mine_continue_watching.dart
@@ -0,0 +1,169 @@
+// Author: fruit.com.cn
+
+import 'package:flutter/material.dart';
+
+import '../../../core/data/models/watch_progress.dart';
+import '../../../core/theme/app_colors.dart';
+import '../../../core/theme/app_dimens.dart';
+import '../../../core/widgets/remote_image.dart';
+import '../../../l10n/app_localizations.dart';
+
+class MineContinueWatching extends StatelessWidget {
+  const MineContinueWatching({
+    super.key,
+    required this.records,
+    required this.onOpenAll,
+  });
+
+  final List<WatchProgress> records;
+  final VoidCallback onOpenAll;
+
+  @override
+  Widget build(BuildContext context) {
+    final l10n = AppLocalizations.of(context)!;
+    final visible = records.take(10).toList(growable: false);
+    if (visible.isEmpty) return const SizedBox.shrink();
+    return Column(
+      key: const Key('mine-continue-watching'),
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Padding(
+          padding: const EdgeInsets.symmetric(
+            horizontal: AppDimens.mineGridHorizontal,
+          ),
+          child: Row(
+            children: [
+              Expanded(
+                child: Text(
+                  l10n.continueWatching,
+                  style: const TextStyle(
+                    color: AppColors.textPrimary,
+                    fontSize: AppDimens.mineSectionTitleFont,
+                    fontWeight: FontWeight.w600,
+                  ),
+                ),
+              ),
+              InkWell(
+                key: const Key('mine-continue-all'),
+                onTap: onOpenAll,
+                child: Row(
+                  mainAxisSize: MainAxisSize.min,
+                  children: [
+                    Text(
+                      l10n.all,
+                      style: const TextStyle(
+                        color: AppColors.textTertiary,
+                        fontSize: AppDimens.mineSectionLinkFont,
+                      ),
+                    ),
+                    const Icon(
+                      Icons.chevron_right_rounded,
+                      color: AppColors.textTertiary,
+                      size: 16,
+                    ),
+                  ],
+                ),
+              ),
+            ],
+          ),
+        ),
+        const SizedBox(height: AppDimens.spaceSm),
+        SizedBox(
+          height: AppDimens.mineContinueRowHeight,
+          child: ListView.separated(
+            key: const Key('mine-continue-list'),
+            scrollDirection: Axis.horizontal,
+            physics: const BouncingScrollPhysics(),
+            padding: const EdgeInsets.symmetric(
+              horizontal: AppDimens.mineGridHorizontal,
+            ),
+            itemCount: visible.length,
+            separatorBuilder: (_, _) =>
+                const SizedBox(width: AppDimens.spaceMd),
+            itemBuilder: (_, index) {
+              final record = visible[index];
+              return _card(l10n, record);
+            },
+          ),
+        ),
+      ],
+    );
+  }
+
+  Widget _card(AppLocalizations l10n, WatchProgress record) {
+    final title = record.dramaTitle?.trim() ?? '';
+    final episode = record.episodeNumber;
+    final hasProgress = record.duration > Duration.zero;
+    return SizedBox(
+      width: AppDimens.mineContinueCardWidth,
+      child: InkWell(
+        key: Key('mine-continue-${record.dramaId}'),
+        borderRadius: BorderRadius.circular(AppDimens.homeCardRadius),
+        onTap: onOpenAll,
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            AspectRatio(
+              aspectRatio: AppDimens.cardCoverAspectRatio,
+              child: Stack(
+                clipBehavior: Clip.hardEdge,
+                children: [
+                  Positioned.fill(
+                    child: ClipRRect(
+                      borderRadius: BorderRadius.circular(
+                        AppDimens.homeCardRadius,
+                      ),
+                      child: RemoteImage(
+                        record.dramaCover ?? '',
+                        fit: BoxFit.cover,
+                        showFallbackIcon: true,
+                        fallbackColor: AppColors.contentSurface,
+                      ),
+                    ),
+                  ),
+                  if (hasProgress)
+                    Positioned(
+                      left: 0,
+                      right: 0,
+                      bottom: 0,
+                      child: LinearProgressIndicator(
+                        value: record.fraction,
+                        minHeight: AppDimens.followingProgressHeight,
+                        backgroundColor: AppColors.inactiveTrack,
+                        valueColor: const AlwaysStoppedAnimation<Color>(
+                          AppColors.primary,
+                        ),
+                      ),
+                    ),
+                ],
+              ),
+            ),
+            const SizedBox(height: AppDimens.cardCoverTitleGap),
+            Text(
+              title.isEmpty ? l10n.dataUnavailable : title,
+              maxLines: 1,
+              overflow: TextOverflow.ellipsis,
+              style: const TextStyle(
+                color: AppColors.textPrimary,
+                fontSize: AppDimens.mineContinueTitleFont,
+                fontWeight: FontWeight.w500,
+              ),
+            ),
+            const SizedBox(height: 2),
+            Text(
+              episode == null || episode <= 0
+                  ? l10n.dataUnavailable
+                  : l10n.episodeLabel(episode),
+              maxLines: 1,
+              overflow: TextOverflow.ellipsis,
+              style: const TextStyle(
+                color: AppColors.textTertiary,
+                fontSize: AppDimens.mineContinueMetaFont,
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
diff --git a/lib/pages/mine/widgets/mine_header.dart b/lib/pages/mine/widgets/mine_header.dart
index cce6ebc..a73dde6 100644
--- a/lib/pages/mine/widgets/mine_header.dart
+++ b/lib/pages/mine/widgets/mine_header.dart
@@ -1,20 +1,27 @@
 // Author: fruit.com.cn
 
+import 'dart:async';
+
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 import 'package:provider/provider.dart';
 
 import '../../../core/data/services/auth_controller.dart';
 import '../../../core/theme/app_colors.dart';
 import '../../../core/theme/app_dimens.dart';
-import '../../../core/theme/app_theme.dart';
+import '../../../core/widgets/centered_toast.dart';
 import '../../../core/widgets/remote_image.dart';
 import '../../../l10n/app_localizations.dart';
 
-/// 「我的」页顶部身份卡。
-class MineHeader extends StatelessWidget {
-  const MineHeader({super.key, required this.onTap});
+const double _buttonHeight = 34;
+const double _buttonRadius = 20;
 
-  final VoidCallback onTap;
+/// 「我的」页用户区。
+class MineHeader extends StatelessWidget {
+  const MineHeader({super.key, required this.onLogin, required this.onEdit});
+
+  final VoidCallback onLogin;
+  final VoidCallback onEdit;
 
   @override
   Widget build(BuildContext context) {
@@ -22,41 +29,89 @@ class MineHeader extends StatelessWidget {
     final auth = context.watch<AuthController>();
     final user = auth.user;
     final signedIn = auth.isSignedIn;
-    final name = signedIn && (user?.nickname.isNotEmpty ?? false)
-        ? user!.nickname
-        : l10n.localViewer;
-    final subtitle = signedIn && (user?.uid.isNotEmpty ?? false)
-        ? 'ID: ${user!.uid}'
-        : l10n.logInHint;
-    return Container(
+    final nickname = signedIn && (user?.nickname.trim().isNotEmpty ?? false)
+        ? user!.nickname.trim()
+        : l10n.visitor;
+    final uid = signedIn ? user?.uid.trim() ?? '' : '';
+    return Padding(
       key: const Key('mine-user-row'),
-      decoration: BoxDecoration(
-        color: AppColors.card,
-        borderRadius: BorderRadius.circular(AppDimens.cardRadius),
-        boxShadow: const [AppTheme.cardShadow],
-      ),
-      child: Material(
-        color: Colors.transparent,
-        borderRadius: BorderRadius.circular(AppDimens.cardRadius),
-        clipBehavior: Clip.antiAlias,
-        child: InkWell(
-          onTap: onTap,
-          child: Padding(
-            padding: const EdgeInsets.all(AppDimens.cardPadding),
-            child: Row(
+      padding: const EdgeInsets.symmetric(vertical: AppDimens.spaceMd),
+      child: Row(
+        crossAxisAlignment: CrossAxisAlignment.center,
+        children: [
+          _avatar(user?.avatarUrl ?? ''),
+          const SizedBox(width: AppDimens.spaceMd),
+          Expanded(
+            child: Column(
+              mainAxisSize: MainAxisSize.min,
+              crossAxisAlignment: CrossAxisAlignment.start,
               children: [
-                _avatar(user?.avatarUrl ?? ''),
-                const SizedBox(width: AppDimens.spaceMd),
-                Expanded(child: _labels(name, subtitle)),
-                const Icon(
-                  Icons.chevron_right_rounded,
-                  color: AppColors.subtle,
-                  size: 20,
+                Text(
+                  nickname,
+                  key: const Key('mine-nickname'),
+                  maxLines: 1,
+                  overflow: TextOverflow.ellipsis,
+                  style: const TextStyle(
+                    fontFamily: 'Outfit',
+                    color: AppColors.textPrimary,
+                    fontSize: AppDimens.mineUserName,
+                    fontWeight: FontWeight.w700,
+                    height: AppDimens.mineUserNameLineHeight,
+                  ),
+                ),
+                const SizedBox(height: AppDimens.mineUserNameUidGap),
+                SizedBox(
+                  key: const Key('mine-uid'),
+                  height: AppDimens.mineUidRowHeight,
+                  child: Row(
+                    mainAxisSize: MainAxisSize.min,
+                    crossAxisAlignment: CrossAxisAlignment.center,
+                    children: [
+                      Flexible(
+                        child: Text(
+                          '${l10n.accountUid}: ${uid.isEmpty ? '--' : uid}',
+                          maxLines: 1,
+                          overflow: TextOverflow.ellipsis,
+                          style: const TextStyle(
+                            color: AppColors.textTertiary,
+                            fontSize: AppDimens.mineUid,
+                          ),
+                        ),
+                      ),
+                      Semantics(
+                        button: true,
+                        label: l10n.copyUid,
+                        child: GestureDetector(
+                          key: const Key('mine-uid-copy'),
+                          behavior: HitTestBehavior.opaque,
+                          onTap: uid.isEmpty
+                              ? null
+                              : () => unawaited(
+                                  _copyUid(context, uid, l10n.uidCopied),
+                                ),
+                          child: const Padding(
+                            padding: EdgeInsets.symmetric(horizontal: 4),
+                            child: Icon(
+                              Icons.copy_rounded,
+                              color: AppColors.textTertiary,
+                              size: AppDimens.mineCopyIcon,
+                            ),
+                          ),
+                        ),
+                      ),
+                    ],
+                  ),
                 ),
               ],
             ),
           ),
-        ),
+          const SizedBox(width: AppDimens.spaceSm),
+          _accountButton(
+            key: signedIn ? const Key('mine-edit') : const Key('mine-login'),
+            label: signedIn ? l10n.edit : l10n.logIn,
+            onTap: signedIn ? onEdit : onLogin,
+          ),
+        ],
       ),
     );
   }
@@ -64,49 +119,61 @@ class MineHeader extends StatelessWidget {
   Widget _avatar(String path) {
     return Container(
       key: const Key('mine-avatar'),
-      width: 64,
-      height: 64,
+      width: AppDimens.mineAvatar,
+      height: AppDimens.mineAvatar,
       decoration: const BoxDecoration(
-        color: AppColors.badgePink,
+        color: AppColors.contentSurface,
         shape: BoxShape.circle,
       ),
       clipBehavior: Clip.antiAlias,
       child: path.isEmpty
           ? const Icon(
               Icons.person_rounded,
-              color: AppColors.badgePinkText,
-              size: 30,
+              color: AppColors.textPrimary,
+              size: 28,
             )
           : RemoteImage(path, fit: BoxFit.cover),
     );
   }
 
-  Widget _labels(String name, String subtitle) {
-    return Column(
-      crossAxisAlignment: CrossAxisAlignment.start,
-      children: [
-        Text(
-          name,
-          maxLines: 1,
-          overflow: TextOverflow.ellipsis,
-          style: const TextStyle(
-            fontFamily: 'Outfit',
-            color: AppColors.onSurface,
-            fontSize: 18,
-            fontWeight: FontWeight.w800,
-          ),
+  Widget _accountButton({
+    required Key key,
+    required String label,
+    required VoidCallback onTap,
+  }) {
+    return OutlinedButton(
+      key: key,
+      onPressed: onTap,
+      style: OutlinedButton.styleFrom(
+        minimumSize: const Size(0, _buttonHeight),
+        padding: const EdgeInsets.symmetric(horizontal: AppDimens.spaceMd),
+        foregroundColor: AppColors.textPrimary,
+        side: const BorderSide(color: AppColors.mineOutline),
+        shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.circular(_buttonRadius),
         ),
-        const SizedBox(height: AppDimens.spaceXs),
-        Text(
-          subtitle,
-          maxLines: 1,
-          overflow: TextOverflow.ellipsis,
-          style: const TextStyle(
-            color: AppColors.muted,
-            fontSize: AppDimens.caption,
-          ),
+        textStyle: const TextStyle(
+          fontSize: AppDimens.body,
+          fontWeight: FontWeight.w500,
         ),
-      ],
+      ),
+      child: Row(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          Text(label),
+          const SizedBox(width: 2),
+          const Icon(Icons.chevron_right_rounded, size: 17),
+        ],
+      ),
     );
   }
+
+  Future<void> _copyUid(
+    BuildContext context,
+    String uid,
+    String message,
+  ) async {
+    await Clipboard.setData(ClipboardData(text: uid));
+    if (context.mounted) showCenteredToast(context, message);
+  }
 }
diff --git a/lib/pages/mine/widgets/mine_menu.dart b/lib/pages/mine/widgets/mine_menu.dart
index 8fc6270..a146200 100644
--- a/lib/pages/mine/widgets/mine_menu.dart
+++ b/lib/pages/mine/widgets/mine_menu.dart
@@ -4,186 +4,16 @@ import 'package:flutter/material.dart';
 
 import '../../../core/theme/app_colors.dart';
 import '../../../core/theme/app_dimens.dart';
-import '../../../core/theme/app_theme.dart';
 import '../../../l10n/app_localizations.dart';
 import '../mine_types.dart';
 
-/// 我的页三宫格快捷入口。
-class MineShortcutGrid extends StatelessWidget {
-  const MineShortcutGrid({super.key, required this.onOpen});
+const double _vipRadius = 12;
+const double _vipBadgeSize = 36;
+const double _vipButtonHeight = 34;
 
-  final ValueChanged<MineDestination> onOpen;
-
-  @override
-  Widget build(BuildContext context) {
-    final l10n = AppLocalizations.of(context)!;
-    return Row(
-      children: [
-        Expanded(
-          child: _ShortcutTile(
-            key: const Key('mine-watchlist'),
-            icon: Icons.bookmark_rounded,
-            label: l10n.watchlist,
-            onTap: () => onOpen(MineDestination.watchlist),
-          ),
-        ),
-        const SizedBox(width: 10),
-        Expanded(
-          child: _ShortcutTile(
-            key: const Key('mine-history'),
-            icon: Icons.history_rounded,
-            label: l10n.watchHistory,
-            onTap: () => onOpen(MineDestination.history),
-          ),
-        ),
-        const SizedBox(width: 10),
-        Expanded(
-          child: _ShortcutTile(
-            key: const Key('mine-downloads'),
-            icon: Icons.download_rounded,
-            label: l10n.downloads,
-            onTap: () => onOpen(MineDestination.downloads),
-          ),
-        ),
-      ],
-    );
-  }
-}
-
-class _ShortcutTile extends StatelessWidget {
-  const _ShortcutTile({
-    super.key,
-    required this.icon,
-    required this.label,
-    required this.onTap,
-  });
-
-  final IconData icon;
-  final String label;
-  final VoidCallback onTap;
-
-  @override
-  Widget build(BuildContext context) {
-    return Container(
-      decoration: BoxDecoration(
-        color: AppColors.card,
-        borderRadius: BorderRadius.circular(AppDimens.cardRadius),
-        boxShadow: const [AppTheme.cardShadow],
-      ),
-      child: Material(
-        color: Colors.transparent,
-        borderRadius: BorderRadius.circular(AppDimens.cardRadius),
-        clipBehavior: Clip.antiAlias,
-        child: InkWell(
-          onTap: onTap,
-          child: SizedBox(
-            height: 88,
-            child: Column(
-              mainAxisAlignment: MainAxisAlignment.center,
-              children: [
-                Icon(icon, color: AppColors.blue, size: 24),
-                const SizedBox(height: AppDimens.spaceSm),
-                Text(
-                  label,
-                  maxLines: 1,
-                  overflow: TextOverflow.ellipsis,
-                  style: const TextStyle(
-                    color: AppColors.onSurface,
-                    fontSize: AppDimens.caption,
-                    fontWeight: FontWeight.w600,
-                  ),
-                ),
-              ],
-            ),
-          ),
-        ),
-      ),
-    );
-  }
-}
-
-/// 金币余额卡。
-class MineWalletCard extends StatelessWidget {
-  const MineWalletCard({
-    super.key,
-    required this.balance,
-    required this.onOpen,
-    required this.onRecharge,
-  });
-
-  final String balance;
-  final VoidCallback onOpen;
-  final VoidCallback onRecharge;
-
-  @override
-  Widget build(BuildContext context) {
-    final l10n = AppLocalizations.of(context)!;
-    return Container(
-      key: const Key('mine-wallet'),
-      padding: const EdgeInsets.all(AppDimens.cardPadding),
-      decoration: BoxDecoration(
-        gradient: const LinearGradient(
-          begin: Alignment.topLeft,
-          end: Alignment.bottomRight,
-          colors: [AppColors.goldCard, AppColors.card],
-        ),
-        borderRadius: BorderRadius.circular(AppDimens.cardRadius),
-        boxShadow: const [AppTheme.cardShadow],
-      ),
-      child: Row(
-        children: [
-          const Icon(
-            Icons.monetization_on_rounded,
-            color: AppColors.gold,
-            size: 30,
-          ),
-          const SizedBox(width: AppDimens.spaceMd),
-          Expanded(
-            child: InkWell(
-              onTap: onOpen,
-              child: Column(
-                crossAxisAlignment: CrossAxisAlignment.start,
-                children: [
-                  Text(
-                    l10n.coinBalance,
-                    style: const TextStyle(
-                      color: AppColors.muted,
-                      fontSize: AppDimens.caption,
-                    ),
-                  ),
-                  const SizedBox(height: 3),
-                  Text(
-                    balance,
-                    style: const TextStyle(
-                      color: AppColors.onSurface,
-                      fontSize: AppDimens.pageTitle,
-                      fontWeight: FontWeight.w800,
-                    ),
-                  ),
-                ],
-              ),
-            ),
-          ),
-          TextButton(
-            key: const Key('mine-wallet-recharge'),
-            onPressed: onRecharge,
-            style: TextButton.styleFrom(
-              backgroundColor: AppColors.blue,
-              foregroundColor: AppColors.onPrimary,
-              minimumSize: const Size(64, AppDimens.buttonCompact),
-              shape: const StadiumBorder(),
-            ),
-            child: Text(l10n.topUpWallet),
-          ),
-        ],
-      ),
-    );
-  }
-}
-
-/// 会员权益卡。
-class MineVipCard extends StatelessWidget {
-  const MineVipCard({super.key, required this.onOpen});
+/// 金色会员横幅。
+class MineVipBanner extends StatelessWidget {
+  const MineVipBanner({super.key, required this.onOpen});
 
   final VoidCallback onOpen;
 
@@ -193,30 +23,34 @@ class MineVipCard extends StatelessWidget {
     return Container(
       key: const Key('mine-vip'),
       decoration: BoxDecoration(
-        color: AppColors.card,
-        borderRadius: BorderRadius.circular(AppDimens.cardRadius),
-        boxShadow: const [AppTheme.cardShadow],
+        gradient: const LinearGradient(
+          colors: [AppColors.vipGoldStart, AppColors.vipGoldEnd],
+        ),
+        borderRadius: BorderRadius.circular(_vipRadius),
       ),
       child: Material(
-        color: Colors.transparent,
-        borderRadius: BorderRadius.circular(AppDimens.cardRadius),
+        color: AppColors.transparent,
+        borderRadius: BorderRadius.circular(_vipRadius),
         clipBehavior: Clip.antiAlias,
         child: InkWell(
           onTap: onOpen,
           child: Padding(
-            padding: const EdgeInsets.all(AppDimens.cardPadding),
+            padding: const EdgeInsets.symmetric(
+              horizontal: AppDimens.cardPadding,
+              vertical: AppDimens.spaceMd,
+            ),
             child: Row(
               children: [
                 Container(
-                  width: AppDimens.buttonLarge,
-                  height: AppDimens.buttonLarge,
+                  width: _vipBadgeSize,
+                  height: _vipBadgeSize,
                   decoration: const BoxDecoration(
-                    color: AppColors.badgePink,
+                    color: AppColors.vipBadgeSurface,
                     shape: BoxShape.circle,
                   ),
                   child: const Icon(
                     Icons.workspace_premium_rounded,
-                    color: AppColors.badgePinkText,
+                    color: AppColors.onGold,
                     size: 22,
                   ),
                 ),
@@ -226,33 +60,44 @@ class MineVipCard extends StatelessWidget {
                     crossAxisAlignment: CrossAxisAlignment.start,
                     children: [
                       Text(
-                        l10n.vipMembership,
-                        style: const TextStyle(
-                          color: AppColors.onSurface,
-                          fontSize: AppDimens.listTitle,
-                          fontWeight: FontWeight.w700,
-                        ),
-                      ),
-                      const SizedBox(height: 3),
-                      Text(
-                        l10n.vipUnlockMessage,
+                        l10n.vipBrandName,
                         maxLines: 1,
                         overflow: TextOverflow.ellipsis,
                         style: const TextStyle(
-                          color: AppColors.muted,
+                          color: AppColors.onGold,
+                          fontSize: AppDimens.sectionTitle,
+                          fontWeight: FontWeight.w700,
+                        ),
+                      ),
+                      const SizedBox(height: 2),
+                      Text(
+                        l10n.mineVipSubtitle,
+                        maxLines: 1,
+                        overflow: TextOverflow.ellipsis,
+                        style: const TextStyle(
+                          color: AppColors.onGold,
                           fontSize: AppDimens.caption,
                         ),
                       ),
                     ],
                   ),
                 ),
-                Text(
-                  l10n.joinVip,
-                  style: const TextStyle(
-                    color: AppColors.blue,
-                    fontSize: AppDimens.caption,
-                    fontWeight: FontWeight.w700,
+                const SizedBox(width: AppDimens.spaceSm),
+                TextButton(
+                  key: const Key('mine-vip-open'),
+                  onPressed: onOpen,
+                  style: TextButton.styleFrom(
+                    minimumSize: const Size(0, _vipButtonHeight),
+                    padding: const EdgeInsets.symmetric(
+                      horizontal: AppDimens.spaceMd,
+                    ),
+                    backgroundColor: AppColors.onGold,
+                    foregroundColor: AppColors.textPrimary,
+                    shape: RoundedRectangleBorder(
+                      borderRadius: BorderRadius.circular(_vipButtonHeight),
+                    ),
                   ),
+                  child: Text(l10n.joinVip),
                 ),
               ],
             ),
@@ -263,18 +108,16 @@ class MineVipCard extends StatelessWidget {
   }
 }
 
-/// 我的页功能菜单。
+/// 「我的」页 4 列功能入口。
 class MineMenuList extends StatelessWidget {
   const MineMenuList({
     super.key,
     required this.onOpen,
     required this.onLanguage,
-    required this.languageLabel,
   });
 
   final ValueChanged<MineDestination> onOpen;
   final VoidCallback onLanguage;
-  final String languageLabel;
 
   @override
   Widget build(BuildContext context) {
@@ -282,51 +125,92 @@ class MineMenuList extends StatelessWidget {
     return Container(
       key: const Key('mine-menu'),
       decoration: BoxDecoration(
-        color: AppColors.card,
-        borderRadius: BorderRadius.circular(AppDimens.cardRadius),
-        boxShadow: const [AppTheme.cardShadow],
+        color: AppColors.mineGridSurface,
+        borderRadius: BorderRadius.circular(AppDimens.mineGridRadius),
       ),
       child: Material(
-        color: Colors.transparent,
-        borderRadius: BorderRadius.circular(AppDimens.cardRadius),
+        color: AppColors.transparent,
+        borderRadius: BorderRadius.circular(AppDimens.mineGridRadius),
         clipBehavior: Clip.antiAlias,
-        child: Column(
+        child: Table(
+          key: const Key('mine-menu-grid'),
+          defaultColumnWidth: const FlexColumnWidth(),
+          defaultVerticalAlignment: TableCellVerticalAlignment.middle,
+          border: const TableBorder(
+            horizontalInside: BorderSide(
+              color: AppColors.mineGridDivider,
+              width: AppDimens.mineGridDividerWidth,
+            ),
+            verticalInside: BorderSide(
+              color: AppColors.mineGridDivider,
+              width: AppDimens.mineGridDividerWidth,
+            ),
+          ),
           children: [
-            _row(
-              key: const Key('mine-works'),
-              icon: Icons.video_collection_outlined,
-              title: l10n.myWorks,
-              destination: MineDestination.works,
+            TableRow(
+              children: [
+                _cell(
+                  index: 0,
+                  actionKey: const Key('mine-wallet'),
+                  icon: Icons.account_balance_wallet_outlined,
+                  iconColor: AppColors.mineIconWallet,
+                  label: l10n.wallet,
+                  onTap: () => onOpen(MineDestination.wallet),
+                ),
+                _cell(
+                  index: 1,
+                  actionKey: const Key('mine-downloads'),
+                  icon: Icons.download_outlined,
+                  iconColor: AppColors.mineIconDownloads,
+                  label: l10n.offlineDownloads,
+                  onTap: () => onOpen(MineDestination.downloads),
+                ),
+                _cell(
+                  index: 2,
+                  actionKey: const Key('mine-history'),
+                  icon: Icons.history_rounded,
+                  iconColor: AppColors.mineIconHistory,
+                  label: l10n.watchHistory,
+                  onTap: () => onOpen(MineDestination.history),
+                ),
+                _cell(
+                  index: 3,
+                  actionKey: const Key('mine-watch-preferences'),
+                  icon: Icons.tune_rounded,
+                  iconColor: AppColors.mineIconPreferences,
+                  label: l10n.watchPreferences,
+                  onTap: () => onOpen(MineDestination.preferences),
+                ),
+              ],
             ),
-            _divider(),
-            _row(
-              key: const Key('mine-creator-center'),
-              icon: Icons.auto_awesome_rounded,
-              title: l10n.creatorCenter,
-              destination: MineDestination.creatorCenter,
-            ),
-            _divider(),
-            _row(
-              key: const Key('mine-notices'),
-              icon: Icons.notifications_none_rounded,
-              title: l10n.notices,
-              destination: MineDestination.notices,
-            ),
-            _divider(),
-            _row(
-              key: const Key('mine-settings'),
-              icon: Icons.settings_outlined,
-              title: l10n.settings,
-              destination: MineDestination.settings,
-            ),
-            _divider(),
-            _languageRow(context),
-            _divider(),
-            _row(
-              key: const Key('mine-help'),
-              icon: Icons.help_outline_rounded,
-              title: l10n.helpFeedback,
-              destination: MineDestination.help,
+            TableRow(
+              children: [
+                _cell(
+                  index: 4,
+                  actionKey: const Key('mine-help'),
+                  icon: Icons.support_agent_rounded,
+                  iconColor: AppColors.mineIconSupport,
+                  label: l10n.contactSupport,
+                  onTap: () => onOpen(MineDestination.help),
+                ),
+                _cell(
+                  index: 5,
+                  actionKey: const Key('mine-language'),
+                  icon: Icons.language_rounded,
+                  iconColor: AppColors.mineIconLanguage,
+                  label: l10n.language,
+                  onTap: onLanguage,
+                ),
+                _cell(
+                  index: 6,
+                  actionKey: const Key('mine-settings'),
+                  icon: Icons.settings_outlined,
+                  iconColor: AppColors.mineIconSettings,
+                  label: l10n.settings,
+                  onTap: () => onOpen(MineDestination.settings),
+                ),
+                _cell(index: 7),
+              ],
             ),
           ],
         ),
@@ -334,71 +218,65 @@ class MineMenuList extends StatelessWidget {
     );
   }
 
-  Widget _languageRow(BuildContext context) {
-    final l10n = AppLocalizations.of(context)!;
-    return ListTile(
-      key: const Key('mine-language'),
-      minTileHeight: 48,
-      contentPadding: const EdgeInsets.symmetric(horizontal: 14),
-      leading: const Icon(
-        Icons.language_rounded,
-        color: AppColors.blue,
-        size: 20,
-      ),
-      title: Text(
-        l10n.language,
-        style: const TextStyle(
-          color: AppColors.onSurface,
-          fontSize: AppDimens.body,
-        ),
-      ),
-      trailing: Row(
-        mainAxisSize: MainAxisSize.min,
-        children: [
-          Text(
-            languageLabel,
-            style: const TextStyle(color: AppColors.muted, fontSize: 11),
-          ),
-          const SizedBox(width: 4),
-          const Icon(
-            Icons.chevron_right_rounded,
-            color: AppColors.subtle,
-            size: 18,
-          ),
-        ],
-      ),
-      onTap: onLanguage,
-    );
-  }
-
-  Widget _row({
-    required Key key,
-    required IconData icon,
-    required String title,
-    required MineDestination destination,
+  Widget _cell({
+    required int index,
+    Key? actionKey,
+    IconData? icon,
+    Color? iconColor,
+    String? label,
+    VoidCallback? onTap,
   }) {
-    return ListTile(
-      key: key,
-      minTileHeight: 48,
-      contentPadding: const EdgeInsets.symmetric(horizontal: 14),
-      leading: Icon(icon, color: AppColors.blue, size: 20),
-      title: Text(
-        title,
-        style: const TextStyle(
-          color: AppColors.onSurface,
-          fontSize: AppDimens.body,
-        ),
-      ),
-      trailing: const Icon(
-        Icons.chevron_right_rounded,
-        color: AppColors.subtle,
-        size: 18,
-      ),
-      onTap: () => onOpen(destination),
+    return SizedBox(
+      key: Key('mine-menu-cell-$index'),
+      height: AppDimens.mineGridCellHeight,
+      child: actionKey == null
+          ? const SizedBox.shrink()
+          : InkWell(
+              key: actionKey,
+              onTap: onTap,
+              child: Center(
+                child: Column(
+                  mainAxisSize: MainAxisSize.min,
+                  children: [
+                    Container(
+                      width: AppDimens.mineGridIconSurface,
+                      height: AppDimens.mineGridIconSurface,
+                      decoration: const BoxDecoration(
+                        color: AppColors.mineGridIconSurface,
+                        shape: BoxShape.circle,
+                      ),
+                      child: DecoratedBox(
+                        decoration: BoxDecoration(
+                          color: iconColor?.withValues(alpha: 0.08),
+                          shape: BoxShape.circle,
+                        ),
+                        child: Icon(
+                          icon,
+                          color: iconColor,
+                          size: AppDimens.mineGridIcon,
+                        ),
+                      ),
+                    ),
+                    const SizedBox(height: AppDimens.spaceXs + 2),
+                    Padding(
+                      padding: const EdgeInsets.symmetric(horizontal: 4),
+                      child: Text(
+                        label ?? '',
+                        maxLines: 1,
+                        overflow: TextOverflow.ellipsis,
+                        textAlign: TextAlign.center,
+                        style: const TextStyle(
+                          color: AppColors.mineGridLabel,
+                          fontSize: AppDimens.mineGridLabel,
+                          fontWeight: FontWeight.w500,
+                          height: 1.2,
+                        ),
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+            ),
     );
   }
-
-  Widget _divider() {
-    return const Divider(height: 1, indent: 14, endIndent: 14);
-  }
 }
diff --git a/lib/pages/mine/widgets/mine_more_services.dart b/lib/pages/mine/widgets/mine_more_services.dart
new file mode 100644
index 0000000..2cd0130
--- /dev/null
+++ b/lib/pages/mine/widgets/mine_more_services.dart
@@ -0,0 +1,93 @@
+// Author: fruit.com.cn
+
+import 'package:flutter/material.dart';
+
+import '../../../core/theme/app_colors.dart';
+import '../../../core/theme/app_dimens.dart';
+import '../../../l10n/app_localizations.dart';
+
+class MineMoreServices extends StatelessWidget {
+  const MineMoreServices({
+    super.key,
+    required this.onCommonQuestions,
+    required this.onAbout,
+  });
+
+  final VoidCallback onCommonQuestions;
+  final VoidCallback onAbout;
+
+  @override
+  Widget build(BuildContext context) {
+    final l10n = AppLocalizations.of(context)!;
+    return Container(
+      key: const Key('mine-more-services'),
+      decoration: BoxDecoration(
+        color: AppColors.minePanelSurface,
+        borderRadius: BorderRadius.circular(AppDimens.mineGridRadius),
+      ),
+      clipBehavior: Clip.antiAlias,
+      child: Column(
+        children: [
+          _row(
+            key: const Key('mine-common-questions'),
+            label: l10n.commonQuestions,
+            onTap: onCommonQuestions,
+          ),
+          const Divider(
+            height: AppDimens.mineGridDividerWidth,
+            thickness: AppDimens.mineGridDividerWidth,
+            color: AppColors.mineMoreDivider,
+          ),
+          _row(
+            key: const Key('mine-about'),
+            label: l10n.aboutUs,
+            onTap: onAbout,
+          ),
+        ],
+      ),
+    );
+  }
+
+  Widget _row({
+    required Key key,
+    required String label,
+    required VoidCallback onTap,
+  }) {
+    return Material(
+      color: AppColors.transparent,
+      child: InkWell(
+        key: key,
+        onTap: onTap,
+        child: SizedBox(
+          height: AppDimens.mineMoreRowHeight,
+          child: Padding(
+            padding: const EdgeInsets.symmetric(
+              horizontal: AppDimens.minePanelPadding,
+            ),
+            child: Row(
+              children: [
+                Expanded(
+                  child: Text(
+                    label,
+                    maxLines: 1,
+                    overflow: TextOverflow.ellipsis,
+                    style: const TextStyle(
+                      color: AppColors.textPrimary,
+                      fontSize: AppDimens.mineMoreFont,
+                      fontWeight: FontWeight.w400,
+                    ),
+                  ),
+                ),
+                const Icon(
+                  Icons.chevron_right_rounded,
+                  color: AppColors.textSecondary,
+                  size: 18,
+                ),
+              ],
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
diff --git a/lib/pages/mine/widgets/mine_stats_panel.dart b/lib/pages/mine/widgets/mine_stats_panel.dart
new file mode 100644
index 0000000..7c2b344
--- /dev/null
+++ b/lib/pages/mine/widgets/mine_stats_panel.dart
@@ -0,0 +1,91 @@
+// Author: fruit.com.cn
+
+import 'package:flutter/material.dart';
+
+import '../../../core/theme/app_colors.dart';
+import '../../../core/theme/app_dimens.dart';
+import '../../../l10n/app_localizations.dart';
+
+class MineStatsPanel extends StatelessWidget {
+  const MineStatsPanel({
+    super.key,
+    required this.followingCount,
+    required this.watchRecordCount,
+    required this.coinBalance,
+  });
+
+  final int? followingCount;
+  final int? watchRecordCount;
+  final int? coinBalance;
+
+  @override
+  Widget build(BuildContext context) {
+    final l10n = AppLocalizations.of(context)!;
+    return Container(
+      key: const Key('mine-stats'),
+      padding: const EdgeInsets.all(AppDimens.minePanelPadding),
+      decoration: BoxDecoration(
+        color: AppColors.minePanelSurface,
+        borderRadius: BorderRadius.circular(AppDimens.mineGridRadius),
+      ),
+      child: Row(
+        children: [
+          _stat(
+            key: const Key('mine-stat-following'),
+            value: followingCount,
+            label: l10n.followingCountLabel,
+            l10n: l10n,
+          ),
+          _stat(
+            key: const Key('mine-stat-watch-records'),
+            value: watchRecordCount,
+            label: l10n.watchRecordsCountLabel,
+            l10n: l10n,
+          ),
+          _stat(
+            key: const Key('mine-stat-coins'),
+            value: coinBalance,
+            label: l10n.coinBalance,
+            l10n: l10n,
+          ),
+        ],
+      ),
+    );
+  }
+
+  Widget _stat({
+    required Key key,
+    required int? value,
+    required String label,
+    required AppLocalizations l10n,
+  }) {
+    return Expanded(
+      child: Column(
+        key: key,
+        children: [
+          Text(
+            value?.toString() ?? l10n.dataUnavailable,
+            maxLines: 1,
+            overflow: TextOverflow.ellipsis,
+            style: const TextStyle(
+              color: AppColors.textPrimary,
+              fontSize: AppDimens.mineStatsValueFont,
+              fontWeight: FontWeight.w700,
+            ),
+          ),
+          const SizedBox(height: AppDimens.spaceXs),
+          Text(
+            label,
+            maxLines: 1,
+            overflow: TextOverflow.ellipsis,
+            textAlign: TextAlign.center,
+            style: const TextStyle(
+              color: AppColors.textTertiary,
+              fontSize: AppDimens.mineStatsLabelFont,
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
diff --git a/lib/pages/new_releases/new_releases_page.dart b/lib/pages/new_releases/new_releases_page.dart
index 3076aab..86eb30c 100644
--- a/lib/pages/new_releases/new_releases_page.dart
+++ b/lib/pages/new_releases/new_releases_page.dart
@@ -10,6 +10,7 @@ import '../../core/data/models/drama.dart';
 import '../../core/data/services/catalog_controller.dart';
 import '../../core/formatting/count_format.dart';
 import '../../core/theme/app_colors.dart';
+import '../../core/theme/app_theme.dart';
 import '../../core/widgets/app_pull_to_refresh.dart';
 import '../../core/widgets/paged_local_list.dart';
 import '../../core/widgets/remote_image.dart';
@@ -102,18 +103,12 @@ class _NewReleasesPageState extends State<NewReleasesPage> {
     final hero = visible.isEmpty ? null : visible.first;
     final more = pager.items.skip(1).take(_moreLimit).toList();
     return AnnotatedRegion<SystemUiOverlayStyle>(
-      value: SystemUiOverlayStyle.dark,
+      value: SystemUiOverlayStyle.light,
       child: Scaffold(
         key: const Key('new-releases-page'),
         backgroundColor: AppColors.ink,
         body: DecoratedBox(
-          decoration: const BoxDecoration(
-            gradient: LinearGradient(
-              begin: Alignment.topCenter,
-              end: Alignment.bottomCenter,
-              colors: [AppColors.surfaceTop, AppColors.ink],
-            ),
-          ),
+          decoration: const BoxDecoration(gradient: AppTheme.pageGradient),
           child: SafeArea(
             child: Column(
               crossAxisAlignment: CrossAxisAlignment.start,
@@ -197,13 +192,9 @@ class _NewReleasesPageState extends State<NewReleasesPage> {
                                 ),
                                 PagedLoadFooter(
                                   loading: pager.loading,
-                                  hasMore: pager.hasMore,
-                                  hasItems: pager.items.isNotEmpty,
                                   loadMoreKey: const Key(
                                     'new-releases-load-more',
                                   ),
-                                  noMoreKey: const Key('new-releases-no-more'),
-                                  noMoreLabel: l10n.noMore,
                                 ),
                               ],
                       ),
@@ -259,7 +250,10 @@ class _NewReleasesPageState extends State<NewReleasesPage> {
                   gradient: LinearGradient(
                     begin: Alignment.topCenter,
                     end: Alignment.bottomCenter,
-                    colors: [Color(0x00000000), Color(0xB3000000)],
+                    colors: [
+                      AppColors.transparent,
+                      AppColors.playerOverlayPill,
+                    ],
                   ),
                 ),
               ),
@@ -282,7 +276,7 @@ class _NewReleasesPageState extends State<NewReleasesPage> {
                     Text(
                       l10n.premiereToday,
                       style: const TextStyle(
-                        color: Colors.white70,
+                        color: AppColors.muted,
                         fontSize: 10,
                         fontWeight: FontWeight.w600,
                       ),
@@ -293,7 +287,7 @@ class _NewReleasesPageState extends State<NewReleasesPage> {
                       maxLines: 2,
                       overflow: TextOverflow.ellipsis,
                       style: const TextStyle(
-                        color: Colors.white,
+                        color: AppColors.onPrimary,
                         fontSize: 20,
                         fontWeight: FontWeight.w800,
                       ),
@@ -315,7 +309,7 @@ class _NewReleasesPageState extends State<NewReleasesPage> {
                             maxLines: 1,
                             overflow: TextOverflow.ellipsis,
                             style: const TextStyle(
-                              color: Colors.white70,
+                              color: AppColors.muted,
                               fontSize: 11,
                             ),
                           ),
@@ -338,7 +332,7 @@ class _NewReleasesPageState extends State<NewReleasesPage> {
                   ),
                   child: const Icon(
                     Icons.play_arrow_rounded,
-                    color: Colors.white,
+                    color: AppColors.onPrimary,
                     size: 22,
                   ),
                 ),
@@ -404,13 +398,7 @@ class _NewReleasesPageState extends State<NewReleasesPage> {
         decoration: BoxDecoration(
           color: AppColors.card,
           borderRadius: BorderRadius.circular(_cardRadius),
-          boxShadow: const [
-            BoxShadow(
-              color: AppColors.cardShadow,
-              blurRadius: 12,
-              offset: Offset(0, 4),
-            ),
-          ],
+          border: Border.all(color: AppColors.border),
         ),
         child: Column(
           crossAxisAlignment: CrossAxisAlignment.start,
@@ -490,7 +478,7 @@ class _NewReleasesPageState extends State<NewReleasesPage> {
       child: Text(
         l10n.newBadge,
         style: TextStyle(
-          color: Colors.white,
+          color: AppColors.onPrimary,
           fontSize: compact ? 9 : 10,
           fontWeight: FontWeight.w800,
         ),
diff --git a/lib/pages/notices/notices_page.dart b/lib/pages/notices/notices_page.dart
index ef59a4d..5ac2715 100644
--- a/lib/pages/notices/notices_page.dart
+++ b/lib/pages/notices/notices_page.dart
@@ -18,6 +18,8 @@ import '../../core/widgets/empty_state.dart';
 import '../../core/widgets/plain_page_scaffold.dart';
 import '../../l10n/app_localizations.dart';
 
+const double _loadMoreThreshold = 240;
+
 /// Anonymous system notice list with pagination and detail dialog.
 class NoticesPage extends StatefulWidget {
   const NoticesPage({super.key});
@@ -46,7 +48,7 @@ class _NoticesPageState extends State<NoticesPage> {
   Widget build(BuildContext context) {
     final l10n = AppLocalizations.of(context)!;
     return Theme(
-      data: AppTheme.light(),
+      data: AppTheme.dark(),
       child: PlainPageScaffold(
         pageKey: const Key('notices-page'),
         backKey: const Key('notices-back'),
@@ -111,29 +113,55 @@ class _NoticesPageState extends State<NoticesPage> {
     }
     return AppPullToRefresh(
       onRefresh: _controller.refresh,
-      child: ListView.separated(
-        key: const Key('notices-list'),
-        physics: AppPullToRefresh.physics,
-        padding: const EdgeInsets.fromLTRB(16, 12, 16, 28),
-        itemCount: _controller.notices.length + 1,
-        separatorBuilder: (_, _) => const SizedBox(height: 10),
-        itemBuilder: (context, index) {
-          if (index == _controller.notices.length) return _footer(l10n);
-          final notice = _controller.notices[index];
-          return _NoticeTile(
-            notice: notice,
-            onTap: () => _showDetails(notice, l10n),
-          );
-        },
+      child: NotificationListener<ScrollNotification>(
+        onNotification: _onScroll,
+        child: ListView.separated(
+          key: const Key('notices-list'),
+          physics: AppPullToRefresh.physics,
+          padding: const EdgeInsets.fromLTRB(16, 12, 16, 28),
+          itemCount: _controller.notices.length + 1,
+          separatorBuilder: (_, _) => const SizedBox(height: 10),
+          itemBuilder: (context, index) {
+            if (index == _controller.notices.length) return _footer(l10n);
+            final notice = _controller.notices[index];
+            return _NoticeTile(
+              notice: notice,
+              onTap: () => _showDetails(notice, l10n),
+            );
+          },
+        ),
       ),
     );
   }
 
+  bool _onScroll(ScrollNotification notification) {
+    if (notification.depth != 0 ||
+        !_controller.hasMore ||
+        _controller.loadingMore) {
+      return false;
+    }
+    if (notification.metrics.extentAfter > _loadMoreThreshold) return false;
+    if (notification is ScrollUpdateNotification ||
+        notification is ScrollEndNotification ||
+        notification is OverscrollNotification) {
+      unawaited(_controller.loadMore());
+    }
+    return false;
+  }
+
   Widget _footer(AppLocalizations l10n) {
     if (_controller.loadingMore) {
-      return const Padding(
-        padding: EdgeInsets.symmetric(vertical: 12),
-        child: Center(child: CircularProgressIndicator()),
+      return const SizedBox(
+        height: AppDimens.loadMoreIndicatorHeight,
+        child: Center(
+          child: SizedBox.square(
+            dimension: AppDimens.refreshSpinnerSize,
+            child: CircularProgressIndicator(
+              strokeWidth: AppDimens.refreshSpinnerStroke,
+              color: AppColors.textPrimary,
+            ),
+          ),
+        ),
       );
     }
     if (_controller.loadMoreError != null) {
@@ -143,14 +171,7 @@ class _NoticesPageState extends State<NoticesPage> {
         label: Text(l10n.retry),
       );
     }
-    if (_controller.hasMore) {
-      return TextButton(
-        key: const Key('notices-load-more'),
-        onPressed: _controller.loadMore,
-        child: Text(l10n.loadMore),
-      );
-    }
-    return const SizedBox(height: 8);
+    return const SizedBox.shrink();
   }
 
   Future<void> _showDetails(AppNotice notice, AppLocalizations l10n) {
@@ -213,7 +234,10 @@ class _NoticeTile extends StatelessWidget {
     return Material(
       key: ValueKey('notice-item-${notice.id}'),
       color: AppColors.card,
-      borderRadius: BorderRadius.circular(AppDimens.innerRadius),
+      shape: RoundedRectangleBorder(
+        borderRadius: BorderRadius.circular(AppDimens.cardRadius),
+        side: const BorderSide(color: AppColors.border),
+      ),
       clipBehavior: Clip.antiAlias,
       child: InkWell(
         onTap: onTap,
diff --git a/lib/pages/player/player_binding.dart b/lib/pages/player/player_binding.dart
index 088245a..21ae3bc 100644
--- a/lib/pages/player/player_binding.dart
+++ b/lib/pages/player/player_binding.dart
@@ -4,6 +4,7 @@ import '../../core/data/repositories/watch_history_repository.dart';
 import '../../core/data/repositories/playback_repository.dart';
 import '../../core/data/services/android_picture_in_picture.dart';
 import '../../core/data/services/download_controller.dart';
+import '../../core/data/services/playback_position_cache.dart';
 import '../../core/data/services/wallet_controller.dart';
 import 'player_logic.dart';
 
@@ -11,11 +12,13 @@ class PlayerBinding {
   PlayerLogic create({
     required WatchHistoryRepository history,
     required PlaybackRepository playback,
+    required PlaybackPositionCache positionCache,
     WalletController? wallet,
     DownloadController? downloads,
   }) => PlayerLogic(
     history: history,
     playback: playback,
+    positionCache: positionCache,
     pictureInPicture: AndroidPictureInPicture(),
     wallet: wallet,
     downloads: downloads,
diff --git a/lib/pages/player/player_logic.dart b/lib/pages/player/player_logic.dart
index 288023f..8cc6877 100644
--- a/lib/pages/player/player_logic.dart
+++ b/lib/pages/player/player_logic.dart
@@ -17,15 +17,16 @@ import '../../core/data/services/android_picture_in_picture.dart';
 import '../../core/data/services/catalog_controller.dart';
 import '../../core/data/services/download_controller.dart';
 import '../../core/data/services/platform_share_service.dart';
+import '../../core/data/services/playback_position_cache.dart';
 import '../../core/data/services/playback_queue.dart';
 import '../../core/data/services/playback_session.dart';
 import '../../core/data/services/video_player_port.dart';
 import '../../core/data/services/wallet_controller.dart';
 import '../../core/formatting/localized_content.dart';
+import '../../core/theme/app_colors.dart';
 import '../../core/navigation/fade_page_route.dart';
 import '../../l10n/app_localizations.dart';
-import '../discover/discover_types.dart';
-import '../discover/discover_view.dart';
+import '../discover/search_page.dart';
 import '../drama_detail/drama_detail_view.dart';
 import '../mine/mine_types.dart';
 import '../mine/mine_view.dart';
@@ -33,6 +34,12 @@ import 'player_view.dart';
 import 'widgets/drama_comments_sheet.dart';
 import 'widgets/episode_picker_sheet.dart';
 
+typedef _PlaybackSnapshot = ({
+  Duration position,
+  Duration duration,
+  bool completed,
+});
+
 class PlayerLogic extends ChangeNotifier {
   PlayerLogic({
     required this.history,
@@ -40,8 +47,10 @@ class PlayerLogic extends ChangeNotifier {
     required this.pictureInPicture,
     this.wallet,
     this.downloads,
+    PlaybackPositionCache? positionCache,
     Future<void> Function()? waitForFrame,
-  }) : _waitForFrame =
+  }) : positionCache = positionCache ?? PlaybackPositionCache(),
+       _waitForFrame =
            waitForFrame ?? (() => WidgetsBinding.instance.endOfFrame);
 
   final WatchHistoryRepository history;
@@ -49,6 +58,7 @@ class PlayerLogic extends ChangeNotifier {
   final AndroidPictureInPicture pictureInPicture;
   final WalletController? wallet;
   final DownloadController? downloads;
+  final PlaybackPositionCache positionCache;
   final Future<void> Function() _waitForFrame;
 
   late PageController pages;
@@ -58,6 +68,9 @@ class PlayerLogic extends ChangeNotifier {
   VideoPlayerPort? trackedPlayer;
   Episode? trackedEpisode;
   Drama? trackedDrama;
+  int? _trackedPlayerIndex;
+  bool _completionHandled = false;
+  bool _completionProgressSaved = false;
   DateTime lastProgressWrite = DateTime.fromMillisecondsSinceEpoch(0);
 
   /// 进度上报节流：契约建议每 10 秒一次
@@ -115,6 +128,7 @@ class PlayerLogic extends ChangeNotifier {
   bool _deferredFeedNotifyScheduled = false;
   int _feedJumpSerial = 0;
   Future<void> _feedUpdateFuture = Future<void>.value();
+  Future<void>? _pendingSeek;
 
   /// [start] 是否已经跑过：没跑过时 session/pages 还是 late 未初始化，
   /// dispose 不能直接碰它们（例如页面构建失败或纯逻辑测试）。
@@ -138,6 +152,7 @@ class PlayerLogic extends ChangeNotifier {
   Episode displayEpisode(Drama drama, Episode fallback) {
     final number = pickedEpisode[drama.id];
     if (number == null) return fallback;
+    if (fallback.number == number) return fallback;
     for (final episode in drama.episodes) {
       if (episode.number == number) return episode;
     }
@@ -304,6 +319,7 @@ class PlayerLogic extends ChangeNotifier {
     unawaited(saveCurrentProgress());
     final previous = session;
     sessionEpisodes = List<Episode>.of(nextEpisodes);
+    _detachTrackedPlayerListener();
     trackedPlayer = null;
     trackedEpisode = null;
     trackedDrama = null;
@@ -351,9 +367,22 @@ class PlayerLogic extends ChangeNotifier {
 
   /// 服务端续看位置：进播放页时取一次，用于"定位到上次那一集的那一秒"。
   Future<void> loadResumePoint() async {
-    final dramaId = queue.entryAt(initialIndex).drama.id;
+    final entry = queue.entryAt(initialIndex);
+    final cached = positionCache.read(
+      entry.episode.id,
+      dramaId: entry.drama.id,
+    );
+    if (cached != null) {
+      resumePoint = ResumePoint(
+        episodeId: cached.episodeId,
+        position: cached.position,
+      );
+      resumeLoaded = true;
+      if (isMounted()) notify();
+      return;
+    }
     try {
-      resumePoint = await history.resumePointFor(dramaId);
+      resumePoint = await history.resumePointFor(entry.drama.id);
     } catch (_) {
       // 拿不到续看位置不影响播放：从当前集开头看
       resumePoint = null;
@@ -414,6 +443,7 @@ class PlayerLogic extends ChangeNotifier {
           ticket.playUrl,
           likeCount: ticket.likeCount,
           commentCount: ticket.commentCount,
+          thumbnailsUrl: ticket.thumbnailsUrl,
         );
         return true;
       }
@@ -512,6 +542,7 @@ class PlayerLogic extends ChangeNotifier {
   void onLifecycle(AppLifecycleState state) {
     if (state != AppLifecycleState.resumed) unawaited(saveCurrentProgress());
     if (state == AppLifecycleState.resumed) {
+      final wasInPip = pip || pipPreparing;
       // 部分机型退出画中画不会回调 onPipChanged(false)：回前台先兜底复位，
       // 否则 chromeHidden 恒为 true，播放浮层与首页底栏都会消失。
       if (pip || pipPreparing) {
@@ -523,8 +554,17 @@ class PlayerLogic extends ChangeNotifier {
       // 签名地址有有效期：回前台时若票据已过期，重新取一张再起播，
       // 否则会撞上 403（契约 §1.4）
       final episode = trackedEpisode;
+      final shouldAutoResume = !wasInPip && _canAutoResume(episode);
       if (episode != null && !playback.isFresh(episode.id)) {
-        unawaited(selectEpisode(session.currentIndex));
+        unawaited(
+          _refreshTicketThenResume(
+            episode,
+            session.currentIndex,
+            shouldAutoResume,
+          ),
+        );
+      } else if (shouldAutoResume) {
+        session.setUserWantsPlay(true);
       }
     }
     session.setAppResumed(
@@ -533,12 +573,38 @@ class PlayerLogic extends ChangeNotifier {
     if (state != AppLifecycleState.resumed) cancelScrub();
   }
 
+  Future<void> _refreshTicketThenResume(
+    Episode episode,
+    int index,
+    bool shouldResume,
+  ) async {
+    await selectEpisode(index);
+    if (!shouldResume ||
+        !isMounted() ||
+        trackedEpisode?.id != episode.id ||
+        !_canAutoResume(episode)) {
+      return;
+    }
+    session.setUserWantsPlay(true);
+  }
+
+  bool _canAutoResume(Episode? episode) {
+    return episode != null &&
+        ticketError == null &&
+        blockedEpisodeId != episode.id &&
+        unlockingEpisodeId == null &&
+        !session.isLocked &&
+        session.error == null &&
+        session.canResumeAfterBackground;
+  }
+
   @override
   void dispose() {
     if (_disposed) return;
     _disposed = true;
     pictureInPicture.setStateListener(null);
     unawaited(saveCurrentProgress());
+    _detachTrackedPlayerListener();
     if (_started) {
       session.setRouteVisible(false);
       cancelScrub();
@@ -604,9 +670,21 @@ class PlayerLogic extends ChangeNotifier {
       await pendingWrite;
       // 服务端每剧只记一条：只有"记录里的那一集"才定位，其它集从头播
       if (resumePoint == null) await loadResumePoint();
+      if (resumePositionFor(episode.id) == null) {
+        final dramaId = _dramaIdForEpisode(episode.id);
+        final cached = dramaId == null
+            ? null
+            : positionCache.read(episode.id, dramaId: dramaId);
+        if (cached != null) {
+          resumePoint = ResumePoint(
+            episodeId: cached.episodeId,
+            position: cached.position,
+          );
+        }
+      }
       final saved = resumePositionFor(episode.id);
       if (saved != null) {
-        await player.controller.seekTo(
+        await player.seekTo(
           clampResumePosition(saved, player.controller.value.duration),
         );
       }
@@ -622,40 +700,66 @@ class PlayerLogic extends ChangeNotifier {
     await player.controller.setVolume(muted ? 0 : 1);
     await player.controller.setPlaybackSpeed(playbackSpeed);
     if (session.active != player) return;
+    _detachTrackedPlayerListener();
     trackedPlayer = player;
     trackedEpisode = episode;
     trackedDrama = drama;
+    _trackedPlayerIndex = index;
+    _completionHandled = false;
+    _completionProgressSaved = false;
     lastProgressWrite = DateTime.now();
-    var completionHandled = false;
-    var completionProgressSaved = false;
-    player.controller.addListener(() {
-      if (session.active != player || !player.controller.value.isInitialized) {
-        return;
-      }
-      if (player.controller.value.isCompleted && !completionProgressSaved) {
-        completionProgressSaved = true;
-        unawaited(
-          queueProgress(
-            drama,
-            episode,
-            player.controller.value.duration,
-            duration: player.controller.value.duration,
-            finished: true,
-          ),
-        );
-      }
-      if (!completionHandled &&
-          player.controller.value.isCompleted &&
-          session.canAutoAdvance &&
-          session.currentIndex == index) {
-        completionHandled = true;
-        unawaited(advanceAfterEnd(player, index));
-      }
-      if (!shouldReportProgress(DateTime.now())) return;
+    player.controller.addListener(_handleTrackedPlayerChanged);
+  }
+
+  void _detachTrackedPlayerListener() {
+    trackedPlayer?.controller.removeListener(_handleTrackedPlayerChanged);
+    _trackedPlayerIndex = null;
+  }
+
+  void _handleTrackedPlayerChanged() {
+    if (_disposed) return;
+    final player = trackedPlayer;
+    final episode = trackedEpisode;
+    final drama = trackedDrama;
+    final index = _trackedPlayerIndex;
+    if (player == null ||
+        episode == null ||
+        drama == null ||
+        index == null ||
+        session.active != player) {
+      return;
+    }
+    final snapshot = _readPlaybackSnapshot(player);
+    if (snapshot == null) return;
+    _cachePlaybackPosition(drama, episode, snapshot);
+    if (snapshot.completed && !_completionProgressSaved) {
+      _completionProgressSaved = true;
       unawaited(
-        queueProgress(drama, episode, player.controller.value.position),
+        queueProgress(
+          drama,
+          episode,
+          snapshot.duration,
+          duration: snapshot.duration,
+          finished: true,
+        ),
       );
-    });
+    }
+    if (!_completionHandled &&
+        snapshot.completed &&
+        session.canAutoAdvance &&
+        session.currentIndex == index) {
+      _completionHandled = true;
+      unawaited(advanceAfterEnd(player, index));
+    }
+    if (!shouldReportProgress(DateTime.now())) return;
+    unawaited(
+      queueProgress(
+        drama,
+        episode,
+        snapshot.position,
+        duration: snapshot.duration,
+      ),
+    );
   }
 
   Future<void> advanceAfterEnd(VideoPlayerPort player, int index) async {
@@ -705,21 +809,63 @@ class PlayerLogic extends ChangeNotifier {
     return pendingWrite;
   }
 
-  Future<void> saveCurrentProgress() {
+  Future<void> saveCurrentProgress() async {
+    final pendingSeek = _pendingSeek;
+    if (pendingSeek != null) await pendingSeek;
+    await _saveCurrentProgressNow();
+  }
+
+  Future<void> _saveCurrentProgressNow() {
     final player = trackedPlayer;
     final episode = trackedEpisode;
     final drama = trackedDrama;
-    if (player == null ||
-        episode == null ||
-        drama == null ||
-        !player.controller.value.isInitialized) {
-      return pendingWrite;
+    if (player == null || episode == null || drama == null) return pendingWrite;
+    final snapshot = _readPlaybackSnapshot(player);
+    if (snapshot == null) return pendingWrite;
+    return _persistPlaybackSnapshot(drama, episode, snapshot);
+  }
+
+  _PlaybackSnapshot? _readPlaybackSnapshot(VideoPlayerPort player) {
+    final value = player.controller.value;
+    if (!value.isInitialized || value.duration <= Duration.zero) return null;
+    return (
+      position: clampPlaybackPosition(value.position, value.duration),
+      duration: value.duration,
+      completed: value.isCompleted,
+    );
+  }
+
+  void _cachePlaybackPosition(
+    Drama drama,
+    Episode episode,
+    _PlaybackSnapshot snapshot,
+  ) {
+    if (session.isLocked ||
+        ticketError != null ||
+        blockedEpisodeId == episode.id) {
+      return;
     }
+    positionCache.save(
+      episodeId: episode.id,
+      dramaId: drama.id,
+      position: snapshot.position,
+      duration: snapshot.duration,
+    );
+  }
+
+  Future<void> _persistPlaybackSnapshot(
+    Drama drama,
+    Episode episode,
+    _PlaybackSnapshot snapshot, {
+    bool finished = false,
+  }) {
+    _cachePlaybackPosition(drama, episode, snapshot);
     return queueProgress(
       drama,
       episode,
-      player.controller.value.position,
-      duration: player.controller.value.duration,
+      snapshot.position,
+      duration: snapshot.duration,
+      finished: finished,
     );
   }
 
@@ -767,30 +913,56 @@ class PlayerLogic extends ChangeNotifier {
   void beginScrub(VideoPlayerPort player) {
     if (session.active != player) return;
     scrubbingPlayer = player;
-    session.setOverlayOpen(true);
   }
 
   void cancelScrub() {
     if (scrubbingPlayer == null) return;
     scrubbingPlayer = null;
-    session.setOverlayOpen(false);
   }
 
+  Future<void> endScrub(
+    BuildContext context,
+    VideoPlayerPort player,
+    Duration position,
+  ) => seekTo(context, player, position);
+
   Future<void> seekTo(
     BuildContext context,
     VideoPlayerPort player,
     Duration position,
+  ) {
+    final operation = _performSeek(context, player, position);
+    _pendingSeek = operation;
+    return operation.whenComplete(() {
+      if (identical(_pendingSeek, operation)) _pendingSeek = null;
+    });
+  }
+
+  Future<void> _performSeek(
+    BuildContext context,
+    VideoPlayerPort player,
+    Duration position,
   ) async {
     if (scrubbingPlayer != player || session.active != player) return;
     try {
       await session.playbackSettled;
       if (scrubbingPlayer != player || session.active != player) return;
-      await player.controller.seekTo(position);
-      if (session.active == player) {
-        // 暂停时拖动进度后直接恢复播放，避免画面停在旧位置。
-        resumeAfterSeek();
-        await saveCurrentProgress();
-      }
+      final duration = player.controller.value.duration;
+      final target = clampPlaybackPosition(position, duration);
+      if (target <= Duration.zero) return;
+      await player.seekTo(target);
+      if (session.active != player) return;
+      final snapshot = _readPlaybackSnapshot(player);
+      if (snapshot == null) return;
+      final entry = queue.entryAt(session.currentIndex);
+      final save = _persistPlaybackSnapshot(
+        entry.drama,
+        entry.episode,
+        snapshot,
+      );
+      // 暂停时拖动进度后直接恢复播放，避免画面停在旧位置。
+      resumeAfterSeek();
+      await save;
     } catch (_) {
       if (context.mounted && session.active == player) {
         final l10n = AppLocalizations.of(context)!;
@@ -816,6 +988,7 @@ class PlayerLogic extends ChangeNotifier {
 
   Future<void> openDetail(BuildContext context) async {
     session.setOverlayOpen(true);
+    await saveCurrentProgress();
     try {
       if (!context.mounted) return;
       await Navigator.of(context).push(
@@ -830,6 +1003,13 @@ class PlayerLogic extends ChangeNotifier {
     await saveCurrentProgress();
   }
 
+  String? _dramaIdForEpisode(String episodeId) {
+    for (final entry in queue.entries) {
+      if (entry.episode.id == episodeId) return entry.drama.id;
+    }
+    return null;
+  }
+
   Future<void> openSeriesAt(
     BuildContext context,
     Drama drama,
@@ -867,7 +1047,7 @@ class PlayerLogic extends ChangeNotifier {
     try {
       await showModalBottomSheet<void>(
         context: context,
-        backgroundColor: Colors.transparent,
+        backgroundColor: AppColors.transparent,
         isScrollControlled: true,
         builder: (_) => EpisodePickerSheet(
           drama: drama,
@@ -933,7 +1113,7 @@ class PlayerLogic extends ChangeNotifier {
       context,
     ).push<MyPageAction>(MaterialPageRoute(builder: (_) => const MyPage()));
     if (!context.mounted) return;
-    if (action == MyPageAction.discover) {
+    if (action == MyPageAction.recommend) {
       await showDiscover(context);
     } else {
       session.setRouteVisible(true);
@@ -946,13 +1126,10 @@ class PlayerLogic extends ChangeNotifier {
       onSearch?.call();
       return;
     }
-    await showDiscover(context, focusSearch: true);
+    await showDiscover(context);
   }
 
-  Future<void> showDiscover(
-    BuildContext context, {
-    bool focusSearch = false,
-  }) async {
+  Future<void> showDiscover(BuildContext context) async {
     if (embedded) {
       onDiscover?.call();
       return;
@@ -961,13 +1138,10 @@ class PlayerLogic extends ChangeNotifier {
     await session.playbackSettled;
     await saveCurrentProgress();
     if (!context.mounted) return;
-    final action = await Navigator.of(context).push<DiscoverPageAction>(
-      MaterialPageRoute(builder: (_) => DiscoverPage(focusSearch: focusSearch)),
-    );
-    if (!context.mounted) return;
-    if (action == DiscoverPageAction.my) {
-      await showMy(context);
-    } else {
+    await Navigator.of(
+      context,
+    ).push<void>(MaterialPageRoute(builder: (_) => const SearchPage()));
+    if (context.mounted) {
       session.setRouteVisible(true);
     }
   }
@@ -1005,7 +1179,7 @@ class PlayerLogic extends ChangeNotifier {
       await showModalBottomSheet<void>(
         context: context,
         isScrollControlled: true,
-        backgroundColor: Colors.transparent,
+        backgroundColor: AppColors.transparent,
         showDragHandle: false,
         isDismissible: false,
         enableDrag: false,
diff --git a/lib/pages/player/player_view.dart b/lib/pages/player/player_view.dart
index 9f23d17..e1e231e 100644
--- a/lib/pages/player/player_view.dart
+++ b/lib/pages/player/player_view.dart
@@ -6,12 +6,16 @@ import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:provider/provider.dart';
 
+import '../../core/config/app_config.dart';
 import '../../core/data/models/drama.dart';
 import '../../core/data/repositories/comment_repository.dart';
 import '../../core/data/services/favorite_controller.dart';
 import '../../core/data/services/download_controller.dart';
 import '../../core/data/services/interaction_controller.dart';
+import '../../core/data/services/playback_position_cache.dart';
 import '../../core/data/services/playback_session.dart';
+import '../../core/data/services/sprite_thumbnail_axis.dart';
+import '../../core/data/services/playback_thumbnail_service.dart';
 import '../../core/data/services/video_player_port.dart';
 import '../../core/data/services/wallet_controller.dart';
 import '../../core/formatting/error_text.dart';
@@ -20,6 +24,7 @@ import '../../core/platform/haptics.dart';
 import '../../core/theme/app_colors.dart';
 import '../../core/theme/app_theme.dart';
 import '../../core/widgets/auth_gate.dart';
+import '../../core/widgets/centered_toast.dart';
 import '../../core/widgets/download_action.dart';
 import '../../l10n/app_localizations.dart';
 import '../home/home_feed_channel.dart';
@@ -29,6 +34,7 @@ import 'player_logic.dart';
 import 'widgets/home_feed_header.dart';
 import 'widgets/home_feed_overlay.dart';
 import 'widgets/exit_clear_screen_button.dart';
+import 'widgets/feed_pull_refresh.dart';
 import 'widgets/player_center_toggle.dart';
 import 'widgets/player_more_sheet.dart';
 import 'widgets/player_overlay.dart';
@@ -42,6 +48,9 @@ import '../../core/data/repositories/playback_repository.dart';
 part 'player_view_actions.dart';
 
 const double _boostPlaybackSpeed = 2.0;
+const double _playerLoadingSize = 24;
+const double _playerLoadingStrokeWidth = 2;
+const double _feedRefreshTopGap = 56;
 
 class PlayerPage extends StatefulWidget {
   const PlayerPage({
@@ -53,6 +62,7 @@ class PlayerPage extends StatefulWidget {
     this.active = true,
     this.resumeRequest = 0,
     this.backRequest = 0,
+    this.scrubCancelRequest = 0,
     this.onDiscover,
     this.onMy,
     this.onSearch,
@@ -60,6 +70,7 @@ class PlayerPage extends StatefulWidget {
     this.feedDramas,
     this.feedChannel,
     this.headerChannel,
+    this.showHomeFeedHeader = true,
     this.onDramaChanged,
     this.onImmersiveChanged,
     this.onOpenFullPlayer,
@@ -77,6 +88,7 @@ class PlayerPage extends StatefulWidget {
   final bool active;
   final int resumeRequest;
   final int backRequest;
+  final int scrubCancelRequest;
   final VoidCallback? onDiscover;
   final VoidCallback? onMy;
   final VoidCallback? onSearch;
@@ -84,6 +96,7 @@ class PlayerPage extends StatefulWidget {
   final List<Drama>? feedDramas;
   final HomeFeedChannel? feedChannel;
   final HomeFeedChannel? headerChannel;
+  final bool showHomeFeedHeader;
   final ValueChanged<Drama>? onDramaChanged;
   final ValueChanged<bool>? onImmersiveChanged;
   final Future<void> Function(Drama drama, Episode episode)? onOpenFullPlayer;
@@ -100,12 +113,16 @@ class PlayerPage extends StatefulWidget {
 class _PlayerPageState extends State<PlayerPage>
     with WidgetsBindingObserver, RouteAware {
   late final PlayerLogic logic;
+  late final PlaybackThumbnailService _thumbnailService;
+  late final SpriteThumbnailAxisService _spriteAxisService;
   PageRoute<dynamic>? _subscribedRoute;
   bool _chromeVisible = true;
   double _playbackSpeed = 1.0;
   bool _boosting = false;
+  bool _scrubbing = false;
   double? _speedBeforeBoost;
   bool? _chromeBeforeBoost;
+  DateTime? _lastDoubleTapAt;
 
   /// 收藏切换后的本地增量：基准是详情快照，切换成功按服务端状态 ±1。
   final Map<String, int> _favoriteDelta = {};
@@ -117,10 +134,15 @@ class _PlayerPageState extends State<PlayerPage>
     logic = PlayerBinding().create(
       history: context.read<WatchHistoryRepository>(),
       playback: context.read<PlaybackRepository>(),
+      positionCache: context.read<PlaybackPositionCache>(),
       wallet: widget.wallet,
       downloads: widget.downloads,
     );
     logic.attach(widget, isMounted: () => mounted);
+    _thumbnailService = PlaybackThumbnailService(
+      sourceResolver: _resolveThumbnailSource,
+    );
+    _spriteAxisService = SpriteThumbnailAxisService();
     WidgetsBinding.instance.addObserver(this);
     logic.start(
       factory: context.read<PlayerFactory>(),
@@ -132,6 +154,9 @@ class _PlayerPageState extends State<PlayerPage>
   void didUpdateWidget(covariant PlayerPage oldWidget) {
     super.didUpdateWidget(oldWidget);
     logic.attach(widget, isMounted: () => mounted);
+    if (oldWidget.scrubCancelRequest != widget.scrubCancelRequest) {
+      _cancelFeedScrub();
+    }
     final channelChanged = oldWidget.feedChannel != widget.feedChannel;
     final feedChanged =
         _feedSignature(oldWidget.feedDramas) !=
@@ -157,6 +182,57 @@ class _PlayerPageState extends State<PlayerPage>
   String _feedSignature(List<Drama>? dramas) =>
       dramas == null ? '' : dramas.map((drama) => drama.id).join('|');
 
+  PlaybackThumbnailSource? _resolveThumbnailSource(String episodeId) {
+    final localPath = widget.downloads?.localPathFor(episodeId);
+    Episode? episode;
+    for (final item in logic.sessionEpisodes) {
+      if (item.id == episodeId) {
+        episode = item;
+        break;
+      }
+    }
+    if (localPath != null && localPath.isNotEmpty) {
+      return PlaybackThumbnailSource(localPath: localPath);
+    }
+    final rawUrl = episode?.videoUrl ?? '';
+    final active = logic.session.active;
+    final activeSource = active is VideoPlayerPort
+        ? active.controller.dataSource
+        : '';
+    final currentEpisodeId = logic.sessionEpisodes.isEmpty
+        ? null
+        : logic.session.currentEpisode.id;
+    final activeMatches =
+        currentEpisodeId == episodeId && activeSource.isNotEmpty;
+    if (activeMatches && activeSource.startsWith('file:')) {
+      try {
+        return PlaybackThumbnailSource(
+          localPath: Uri.parse(activeSource).toFilePath(),
+        );
+      } catch (_) {
+        return null;
+      }
+    }
+    if (rawUrl.startsWith('file:')) {
+      try {
+        return PlaybackThumbnailSource(
+          localPath: Uri.parse(rawUrl).toFilePath(),
+        );
+      } catch (_) {
+        return null;
+      }
+    }
+    final remoteUrl = AppConfig.mediaUrl(
+      rawUrl.isNotEmpty
+          ? rawUrl
+          : activeMatches
+          ? activeSource
+          : '',
+    );
+    if (remoteUrl.isEmpty) return null;
+    return PlaybackThumbnailSource(remoteUrl: remoteUrl);
+  }
+
   @override
   void didChangeDependencies() {
     super.didChangeDependencies();
@@ -186,6 +262,8 @@ class _PlayerPageState extends State<PlayerPage>
   void dispose() {
     WidgetsBinding.instance.removeObserver(this);
     appRouteObserver.unsubscribe(this);
+    _spriteAxisService.dispose();
+    _thumbnailService.dispose();
     logic.dispose();
     super.dispose();
   }
@@ -195,6 +273,7 @@ class _PlayerPageState extends State<PlayerPage>
   }
 
   void _hideChrome() {
+    if (!_chromeVisible) return;
     setState(() => _chromeVisible = false);
   }
 
@@ -228,6 +307,74 @@ class _PlayerPageState extends State<PlayerPage>
     unawaited(logic.setPlaybackSpeed(speed));
   }
 
+  Future<void> _refreshHomeFeed() async {
+    final refresh = widget.onRefreshFeed;
+    if (refresh == null) return;
+    final ok = await refresh();
+    if (!mounted || ok) return;
+    ScaffoldMessenger.of(context).showSnackBar(
+      SnackBar(content: Text(AppLocalizations.of(context)!.catalogError)),
+    );
+  }
+
+  void _setScrubbing(bool value) {
+    if (!mounted) return;
+    if (_scrubbing == value) return;
+    setState(() => _scrubbing = value);
+  }
+
+  void _finishFeedScrub(bool wasVisible) {
+    if (!mounted) return;
+    setState(() {
+      _scrubbing = false;
+      _chromeVisible = wasVisible;
+    });
+  }
+
+  void _cancelFeedScrub() {
+    logic.cancelScrub();
+    _scrubbing = false;
+    _chromeVisible = true;
+  }
+
+  void _restoreFeedChrome() {
+    if (!mounted) return;
+    setState(() {
+      _scrubbing = false;
+      _chromeVisible = true;
+    });
+  }
+
+  void _handleFeedSurfaceTap() {
+    if (_scrubbing || _doubleTapGuardActive) return;
+    if (!_chromeVisible) {
+      _restoreFeedChrome();
+      return;
+    }
+    logic.session.setUserWantsPlay(!logic.session.userWantsPlay);
+  }
+
+  void _togglePlayback() {
+    if (_doubleTapGuardActive) return;
+    logic.session.setUserWantsPlay(!logic.session.userWantsPlay);
+  }
+
+  bool get _doubleTapGuardActive {
+    final lastDoubleTapAt = _lastDoubleTapAt;
+    return lastDoubleTapAt != null &&
+        DateTime.now().difference(lastDoubleTapAt) <
+            const Duration(milliseconds: 350);
+  }
+
+  void _handleDoubleTapLike(
+    BuildContext context,
+    InteractionController interactions,
+    Episode episode,
+  ) {
+    _lastDoubleTapAt = DateTime.now();
+    unawaited(_toggleLike(context, interactions, episode, likeOnly: true));
+  }
+
   /// 收藏状态确认后同步右侧计数（总数没有独立计数接口，按 ±1 跟随）。
   void _applyFavoriteDelta(String dramaId, {required bool nowSaved}) {
     setState(() {
@@ -269,32 +416,49 @@ class _PlayerPageState extends State<PlayerPage>
     final interactions = context.watch<InteractionController>();
     final l10n = AppLocalizations.of(context)!;
     final indices = logic.visibleIndices;
-    final pages = logic.pages;
     final content = AnimatedBuilder(
       animation: logic.session,
-      builder: (context, _) => PageView.builder(
-        controller: pages,
-        scrollDirection: Axis.vertical,
-        allowImplicitScrolling: true,
-        itemCount: indices.length,
-        onPageChanged: (position) {
-          final index = indices[position];
-          widget.onDramaChanged?.call(logic.queue.entryAt(index).drama);
-          unawaited(logic.selectEpisode(index));
-          if (position >= indices.length - 3) {
-            final loadMore = widget.onLoadMore;
-            if (loadMore != null) unawaited(loadMore());
-          }
-        },
-        itemBuilder: (context, position) =>
-            _buildEpisode(context, indices[position], interactions),
-      ),
+      builder: (context, _) {
+        final pages = PageView.builder(
+          controller: logic.pages,
+          scrollDirection: Axis.vertical,
+          allowImplicitScrolling: true,
+          physics: widget.onRefreshFeed == null
+              ? null
+              : const FeedRefreshPhysics(),
+          itemCount: indices.length,
+          onPageChanged: (position) {
+            final index = indices[position];
+            widget.onDramaChanged?.call(logic.queue.entryAt(index).drama);
+            unawaited(logic.selectEpisode(index));
+            if (position >= indices.length - 3) {
+              final loadMore = widget.onLoadMore;
+              if (loadMore != null) unawaited(loadMore());
+            }
+          },
+          itemBuilder: (context, position) =>
+              _buildEpisode(context, indices[position], interactions),
+        );
+        if (widget.onRefreshFeed == null) return pages;
+        return FeedPullRefresh(
+          pageController: logic.pages,
+          topInset: MediaQuery.paddingOf(context).top + _feedRefreshTopGap,
+          onRefresh: _refreshHomeFeed,
+          child: pages,
+        );
+      },
     );
     final body = Stack(
       fit: StackFit.expand,
       children: [
         content,
-        if (widget.homeMode && !_boosting && !logic.pip && !logic.pipPreparing)
+        if (widget.homeMode &&
+            widget.showHomeFeedHeader &&
+            !_scrubbing &&
+            _chromeVisible &&
+            !_boosting &&
+            !logic.pip &&
+            !logic.pipPreparing)
           Positioned(
             top: 0,
             left: 0,
@@ -327,19 +491,19 @@ class _PlayerPageState extends State<PlayerPage>
     return AnnotatedRegion<SystemUiOverlayStyle>(
       key: const Key('player-system-overlay'),
       value: SystemUiOverlayStyle.light.copyWith(
-        statusBarColor: Colors.transparent,
-        systemNavigationBarColor: Colors.black,
-        systemNavigationBarDividerColor: Colors.transparent,
+        statusBarColor: AppColors.transparent,
+        systemNavigationBarColor: AppColors.mediaBlack,
+        systemNavigationBarDividerColor: AppColors.transparent,
         systemNavigationBarIconBrightness: Brightness.light,
         systemNavigationBarContrastEnforced: false,
       ),
       child: Theme(
-        data: AppTheme.light(),
+        data: AppTheme.dark(),
         child: widget.embedded
             ? body
             : Scaffold(
                 key: const Key('player-scaffold'),
-                backgroundColor: Colors.transparent,
+                backgroundColor: AppColors.transparent,
                 resizeToAvoidBottomInset: false,
                 body: body,
               ),
@@ -360,9 +524,20 @@ class _PlayerPageState extends State<PlayerPage>
     final l10n = AppLocalizations.of(context)!;
     final entry = logic.queue.entryAt(index);
     final drama = entry.drama;
-    final episode = widget.homeMode
-        ? logic.displayEpisode(drama, entry.episode)
+    final sessionEpisode = index >= 0 && index < logic.sessionEpisodes.length
+        ? logic.sessionEpisodes[index]
         : entry.episode;
+    final displayed = widget.homeMode
+        ? logic.displayEpisode(drama, sessionEpisode)
+        : sessionEpisode;
+    final episode =
+        (displayed.thumbnailsUrl == null || displayed.thumbnailsUrl!.isEmpty) &&
+            sessionEpisode.thumbnailsUrl != null
+        ? displayed.withVideoUrl(
+            displayed.videoUrl,
+            thumbnailsUrl: sessionEpisode.thumbnailsUrl,
+          )
+        : displayed;
     final selected = index == logic.session.currentIndex;
     // Selection changes before the prepared slot is promoted. Use its controller
     // throughout the handoff instead of briefly falling back to a placeholder.
@@ -372,6 +547,15 @@ class _PlayerPageState extends State<PlayerPage>
     final videoPort = port is VideoPlayerPort ? port : null;
     final ready = videoPort?.controller.value.isInitialized ?? false;
     final theater = logic.pip || logic.pipPreparing;
+    final locked = logic.session.isLocked || episode.locked;
+    if (selected && ready) {
+      unawaited(
+        _spriteAxisService.prepareAt(
+          episode.thumbnailsUrl,
+          videoPort!.controller.value.position,
+        ),
+      );
+    }
 
     return Stack(
       fit: StackFit.expand,
@@ -379,30 +563,23 @@ class _PlayerPageState extends State<PlayerPage>
         if (widget.homeMode)
           const ColoredBox(
             key: Key('home-feed-black-background'),
-            color: Colors.black,
+            color: AppColors.mediaBlack,
           ),
         PlayerVideoSurface(
           controller: videoPort?.controller,
           videoUrl: videoPort?.controller.dataSource ?? episode.videoUrl,
           theater: theater,
-          onTap: () =>
-              logic.session.setUserWantsPlay(!logic.session.userWantsPlay),
         ),
-        if (widget.homeMode && _chromeVisible && !logic.chromeHidden)
-          Positioned.fill(
-            child: GestureDetector(
-              key: const Key('home-feed-video-toggle'),
-              behavior: HitTestBehavior.opaque,
-              onTap: () =>
-                  logic.session.setUserWantsPlay(!logic.session.userWantsPlay),
-            ),
-          ),
         // 票据三态之一：起播前正在向后端要签名地址
         if (selected && logic.ticketLoading)
           const Center(
-            child: CircularProgressIndicator(
-              key: Key('player-ticket-loading'),
-              color: AppColors.blue,
+            child: SizedBox.square(
+              dimension: _playerLoadingSize,
+              child: CircularProgressIndicator(
+                key: Key('player-ticket-loading'),
+                color: AppColors.blue,
+                strokeWidth: _playerLoadingStrokeWidth,
+              ),
             ),
           ),
         // 票据三态之二：拿票失败（断网/服务异常）→ 可重试，不假装在加载
@@ -415,14 +592,14 @@ class _PlayerPageState extends State<PlayerPage>
                 children: [
                   const Icon(
                     Icons.wifi_off_rounded,
-                    color: Colors.white70,
+                    color: AppColors.muted,
                     size: 36,
                   ),
                   const SizedBox(height: 12),
                   Text(
                     errorText(l10n, logic.ticketError, l10n.playbackError),
                     textAlign: TextAlign.center,
-                    style: const TextStyle(color: Colors.white70),
+                    style: const TextStyle(color: AppColors.muted),
                   ),
                   const SizedBox(height: 12),
                   FilledButton(
@@ -433,13 +610,6 @@ class _PlayerPageState extends State<PlayerPage>
               ),
             ),
           ),
-        if (selected && logic.session.loading)
-          const Center(
-            child: CircularProgressIndicator(
-              key: Key('player-session-loading'),
-              color: AppColors.blue,
-            ),
-          ),
         if (selected && !ready && logic.session.error != null)
           Center(
             child: Padding(
@@ -449,14 +619,14 @@ class _PlayerPageState extends State<PlayerPage>
                 children: [
                   const Icon(
                     Icons.error_outline_rounded,
-                    color: Colors.white70,
+                    color: AppColors.muted,
                     size: 36,
                   ),
                   const SizedBox(height: 12),
                   Text(
                     l10n.playbackError,
                     textAlign: TextAlign.center,
-                    style: const TextStyle(color: Colors.white70),
+                    style: const TextStyle(color: AppColors.muted),
                   ),
                 ],
               ),
@@ -476,7 +646,7 @@ class _PlayerPageState extends State<PlayerPage>
                 children: [
                   const Icon(
                     Icons.movie_filter_outlined,
-                    color: Colors.white70,
+                    color: AppColors.muted,
                     size: 36,
                   ),
                   const SizedBox(height: 12),
@@ -485,7 +655,7 @@ class _PlayerPageState extends State<PlayerPage>
                         ? l10n.lockedTitle(episode.number)
                         : l10n.noMediaNotice,
                     textAlign: TextAlign.center,
-                    style: const TextStyle(color: Colors.white70),
+                    style: const TextStyle(color: AppColors.muted),
                   ),
                 ],
               ),
@@ -499,12 +669,12 @@ class _PlayerPageState extends State<PlayerPage>
             drama: drama,
             episode: episode,
             controller: ready ? videoPort!.controller : null,
+            locked: locked,
             visible: _chromeVisible,
             boosting: _boosting,
             onBoostStart: _startBoost,
             onBoostEnd: _endBoost,
-            onTogglePlay: () =>
-                logic.session.setUserWantsPlay(!logic.session.userWantsPlay),
+            onTogglePlay: _handleFeedSurfaceTap,
             liked: interactions.isEpisodeLiked(episode.id),
             likeCount:
                 interactions.episodeLikeCount(episode.id) ?? episode.likeCount,
@@ -514,22 +684,10 @@ class _PlayerPageState extends State<PlayerPage>
             commentCount: _commentCounts[episode.id] ?? episode.commentCount,
             saved: context.watch<FavoriteController>().isSaved(drama.id),
             onLike: () async {
-              if (await ensureSignedIn(context)) {
-                if (!context.mounted) return;
-                unawaited(context.read<Haptics>().lightImpact());
-                final result = await interactions.toggleEpisodeLike(episode.id);
-                if (!result.isSuccess && context.mounted) {
-                  ScaffoldMessenger.of(context).showSnackBar(
-                    SnackBar(
-                      content: Text(
-                        result.errorMessage ??
-                            AppLocalizations.of(context)!.likeFailed,
-                      ),
-                    ),
-                  );
-                }
-              }
+              await _toggleLike(context, interactions, episode);
             },
+            onDoubleTapLike: (_) =>
+                _handleDoubleTapLike(context, interactions, episode),
             onSave: () => unawaited(_toggleSave(context, drama)),
             onComments: () => unawaited(_openComments(context, drama, episode)),
             onShare: () => logic.shareDrama(context, drama),
@@ -539,11 +697,17 @@ class _PlayerPageState extends State<PlayerPage>
               if (!mounted || !widget.active) return;
               logic.session.setUserWantsPlay(true);
             },
+            onEpisodes: () => logic.showEpisodes(context),
             onMore: _openCurrentMore,
             onScrubStart: ready ? () => logic.beginScrub(videoPort!) : null,
+            onScrubEnd: _finishFeedScrub,
+            onScrubVisibilityChanged: _setScrubbing,
+            cancelScrubRequest: widget.scrubCancelRequest,
             onSeek: ready
-                ? (position) => logic.seekTo(context, videoPort!, position)
+                ? (position) => logic.endScrub(context, videoPort!, position)
                 : null,
+            thumbnailService: _thumbnailService,
+            spriteAxisService: _spriteAxisService,
           )
         else
           PlayerPlaybackOverlay(
@@ -552,6 +716,7 @@ class _PlayerPageState extends State<PlayerPage>
               drama: drama,
               episode: episode,
               controller: ready ? videoPort!.controller : null,
+              locked: locked,
               liked: interactions.isEpisodeLiked(episode.id),
               likeCount:
                   interactions.episodeLikeCount(episode.id) ??
@@ -565,13 +730,15 @@ class _PlayerPageState extends State<PlayerPage>
               playbackSpeed: _playbackSpeed,
               totalEpisodes: logic.visibleIndices.length,
               boosting: _boosting,
+              thumbnailService: _thumbnailService,
+              spriteAxisService: _spriteAxisService,
             ),
+            scrubbing: _scrubbing,
             actions: PlayerOverlayActions(
               onBack: widget.embedded
                   ? null
                   : () => unawaited(logic.leave(context)),
-              onTogglePlay: () =>
-                  logic.session.setUserWantsPlay(!logic.session.userWantsPlay),
+              onTogglePlay: _togglePlayback,
               onClear: () => setState(() => _chromeVisible = false),
               onExitClear: () => setState(() => _chromeVisible = true),
               onDetail: () => unawaited(logic.openDetail(context)),
@@ -584,7 +751,13 @@ class _PlayerPageState extends State<PlayerPage>
               onSave: () => unawaited(_toggleSave(context, drama)),
               onShare: () => logic.shareDrama(context, drama),
               onMore: () => _openMore(context, episode),
-              onScrubStart: ready ? () => logic.beginScrub(videoPort!) : null,
+              onScrubStart: ready
+                  ? () {
+                      _setScrubbing(true);
+                      logic.beginScrub(videoPort!);
+                    }
+                  : null,
+              onScrubEnd: () => _setScrubbing(false),
               onSeek: ready
                   ? (position) => logic.seekTo(context, videoPort!, position)
                   : null,
@@ -607,17 +780,19 @@ class _PlayerPageState extends State<PlayerPage>
                 ? null
                 : () => _openUnlockSheet(context, index, episode),
           ),
-        if (widget.homeMode && !_chromeVisible && !_boosting)
+        if (widget.homeMode && !_chromeVisible && !_boosting && !_scrubbing)
           Positioned(
             right: 12,
             bottom: 56,
             child: ExitClearScreenButton(
               key: const Key('home-feed-exit-clear-screen'),
               tooltip: l10n.exitClearScreen,
-              onPressed: () => setState(() => _chromeVisible = true),
+              onPressed: _restoreFeedChrome,
             ),
           ),
         if (widget.homeMode &&
+            !_scrubbing &&
+            _chromeVisible &&
             !logic.chromeHidden &&
             selected &&
             !logic.session.userWantsPlay)
@@ -625,8 +800,7 @@ class _PlayerPageState extends State<PlayerPage>
             child: PlayerCenterToggle(
               key: const Key('home-feed-center-play'),
               playing: false,
-              onTap: () =>
-                  logic.session.setUserWantsPlay(!logic.session.userWantsPlay),
+              onTap: _togglePlayback,
             ),
           ),
       ],
diff --git a/lib/pages/player/player_view_actions.dart b/lib/pages/player/player_view_actions.dart
index ead3fe0..171047a 100644
--- a/lib/pages/player/player_view_actions.dart
+++ b/lib/pages/player/player_view_actions.dart
@@ -6,7 +6,7 @@ extension _PlayerViewActions on _PlayerPageState {
   Future<void> _openSpeedSheet(BuildContext context) async {
     final selected = await showModalBottomSheet<double>(
       context: context,
-      backgroundColor: Colors.transparent,
+      backgroundColor: AppColors.transparent,
       showDragHandle: false,
       builder: (_) => PlayerSpeedSheet(selected: _playbackSpeed),
     );
@@ -19,7 +19,7 @@ extension _PlayerViewActions on _PlayerPageState {
     final l10n = AppLocalizations.of(context)!;
     await showModalBottomSheet<void>(
       context: context,
-      backgroundColor: Colors.transparent,
+      backgroundColor: AppColors.transparent,
       showDragHandle: false,
       isScrollControlled: true,
       builder: (_) => PlayerMoreSheet(
@@ -52,7 +52,7 @@ extension _PlayerViewActions on _PlayerPageState {
     if (wallet == null) return;
     await showModalBottomSheet<bool>(
       context: context,
-      backgroundColor: Colors.transparent,
+      backgroundColor: AppColors.transparent,
       showDragHandle: false,
       isScrollControlled: true,
       builder: (_) => PlayerUnlockSheet(
@@ -81,18 +81,24 @@ extension _PlayerViewActions on _PlayerPageState {
   Future<void> _toggleLike(
     BuildContext context,
     InteractionController interactions,
-    Episode episode,
-  ) async {
-    if (!await ensureSignedIn(context) || !context.mounted) return;
+    Episode episode, {
+    bool likeOnly = false,
+  }) async {
     unawaited(context.read<Haptics>().lightImpact());
+    if (interactions.isEpisodeBusy(episode.id) ||
+        (likeOnly && interactions.isEpisodeLiked(episode.id))) {
+      return;
+    }
+    if (!await ensureSignedIn(context) || !context.mounted) return;
+    if (interactions.isEpisodeBusy(episode.id) ||
+        (likeOnly && interactions.isEpisodeLiked(episode.id))) {
+      return;
+    }
     final result = await interactions.toggleEpisodeLike(episode.id);
     if (result.isSuccess || !context.mounted) return;
-    ScaffoldMessenger.of(context).showSnackBar(
-      SnackBar(
-        content: Text(
-          result.errorMessage ?? AppLocalizations.of(context)!.likeFailed,
-        ),
-      ),
+    showCenteredToast(
+      context,
+      result.errorMessage ?? AppLocalizations.of(context)!.likeFailed,
     );
   }
 
diff --git a/lib/pages/player/widgets/comment_composer_sheet.dart b/lib/pages/player/widgets/comment_composer_sheet.dart
index 8e7ea04..9f9ce82 100644
--- a/lib/pages/player/widgets/comment_composer_sheet.dart
+++ b/lib/pages/player/widgets/comment_composer_sheet.dart
@@ -79,6 +79,15 @@ class _CommentComposerSheetState extends State<CommentComposerSheet> {
     _trackKeyboardInset(_keyboardHeight(context));
   }
 
+  @override
+  void didUpdateWidget(covariant CommentComposerSheet oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    if (oldWidget.controller != widget.controller) {
+      oldWidget.controller.removeListener(_onControllerChanged);
+      widget.controller.addListener(_onControllerChanged);
+    }
+  }
+
   Future<void> _prepareInput() async {
     if (_isAndroid) {
       await _keyboardInset.start();
diff --git a/lib/pages/player/widgets/drama_comments_sheet.dart b/lib/pages/player/widgets/drama_comments_sheet.dart
index 794a7fe..5f000f7 100644
--- a/lib/pages/player/widgets/drama_comments_sheet.dart
+++ b/lib/pages/player/widgets/drama_comments_sheet.dart
@@ -413,13 +413,16 @@ class _CommentPostSuccessOverlay extends StatelessWidget {
                   vertical: 10,
                 ),
                 decoration: BoxDecoration(
-                  color: Colors.black.withValues(alpha: 0.82),
+                  color: AppColors.mediaBlack.withValues(alpha: 0.82),
                   borderRadius: BorderRadius.circular(8),
                 ),
                 child: Text(
                   message,
                   textAlign: TextAlign.center,
-                  style: const TextStyle(color: Colors.white, fontSize: 14),
+                  style: const TextStyle(
+                    color: AppColors.onPrimary,
+                    fontSize: 14,
+                  ),
                 ),
               ),
             ),
diff --git a/lib/pages/player/widgets/episode_picker_sheet.dart b/lib/pages/player/widgets/episode_picker_sheet.dart
index a59d148..df4b9b6 100644
--- a/lib/pages/player/widgets/episode_picker_sheet.dart
+++ b/lib/pages/player/widgets/episode_picker_sheet.dart
@@ -40,11 +40,11 @@ class EpisodePickerSheet extends StatelessWidget {
     final episodes = drama.episodes;
     return AnnotatedRegion<SystemUiOverlayStyle>(
       key: const Key('player-episodes-system-overlay'),
-      value: SystemUiOverlayStyle.dark.copyWith(
-        statusBarColor: Colors.transparent,
+      value: SystemUiOverlayStyle.light.copyWith(
+        statusBarColor: AppColors.transparent,
         systemNavigationBarColor: AppColors.card,
-        systemNavigationBarDividerColor: Colors.transparent,
-        systemNavigationBarIconBrightness: Brightness.dark,
+        systemNavigationBarDividerColor: AppColors.transparent,
+        systemNavigationBarIconBrightness: Brightness.light,
         systemNavigationBarContrastEnforced: false,
       ),
       child: Container(
diff --git a/lib/pages/player/widgets/exit_clear_screen_button.dart b/lib/pages/player/widgets/exit_clear_screen_button.dart
index a2b1c51..a514aaa 100644
--- a/lib/pages/player/widgets/exit_clear_screen_button.dart
+++ b/lib/pages/player/widgets/exit_clear_screen_button.dart
@@ -2,6 +2,8 @@
 
 import 'package:flutter/material.dart';
 
+import '../../../core/theme/app_colors.dart';
+
 /// Shared floating action used to leave clear-screen mode.
 class ExitClearScreenButton extends StatelessWidget {
   const ExitClearScreenButton({
@@ -23,8 +25,8 @@ class ExitClearScreenButton extends StatelessWidget {
         onPressed: onPressed,
         padding: EdgeInsets.zero,
         style: IconButton.styleFrom(
-          backgroundColor: const Color(0x80000000),
-          foregroundColor: Colors.white,
+          backgroundColor: AppColors.controlScrim,
+          foregroundColor: AppColors.onPrimary,
           shape: const CircleBorder(),
         ),
         icon: const Icon(Icons.fullscreen_exit_rounded, size: 18),
diff --git a/lib/pages/player/widgets/feed_pull_refresh.dart b/lib/pages/player/widgets/feed_pull_refresh.dart
new file mode 100644
index 0000000..d9e566a
--- /dev/null
+++ b/lib/pages/player/widgets/feed_pull_refresh.dart
@@ -0,0 +1,180 @@
+// Author: fruit.com.cn
+
+import 'package:flutter/material.dart';
+
+import '../../../core/theme/app_colors.dart';
+import '../../../core/theme/app_dimens.dart';
+
+const double _maxPull = 96;
+const double _refreshThreshold = 56;
+const double _firstPageEpsilon = 0.01;
+
+/// 第一条已经到顶时，向下的拖动不再翻页。
+class FeedRefreshPhysics extends PageScrollPhysics {
+  const FeedRefreshPhysics({super.parent});
+
+  @override
+  FeedRefreshPhysics applyTo(ScrollPhysics? ancestor) {
+    return FeedRefreshPhysics(parent: buildParent(ancestor));
+  }
+
+  @override
+  double applyPhysicsToUserOffset(ScrollMetrics position, double offset) {
+    if (position.pixels <= position.minScrollExtent && offset > 0) {
+      return 0;
+    }
+    return super.applyPhysicsToUserOffset(position, offset);
+  }
+
+  @override
+  Simulation? createBallisticSimulation(
+    ScrollMetrics position,
+    double velocity,
+  ) {
+    if (position.pixels <= position.minScrollExtent && velocity < 0) {
+      return super.createBallisticSimulation(position, 0);
+    }
+    return super.createBallisticSimulation(position, velocity);
+  }
+}
+
+/// 竖滑到第一条后继续下拉时刷新，其它页仍交给翻页。
+class FeedPullRefresh extends StatefulWidget {
+  const FeedPullRefresh({
+    super.key,
+    required this.pageController,
+    required this.onRefresh,
+    required this.child,
+    this.topInset = 0,
+  });
+
+  final PageController pageController;
+  final Future<void> Function() onRefresh;
+  final Widget child;
+  final double topInset;
+
+  @override
+  State<FeedPullRefresh> createState() => _FeedPullRefreshState();
+}
+
+class _FeedPullRefreshState extends State<FeedPullRefresh> {
+  Offset? _origin;
+  double _pull = 0;
+  bool _tracking = false;
+  bool _refreshing = false;
+
+  bool _atFirstPage() {
+    final controller = widget.pageController;
+    if (!controller.hasClients) return false;
+    return (controller.page ?? 0) <= _firstPageEpsilon;
+  }
+
+  void _setPull(double value) {
+    final next = value.clamp(0.0, _maxPull);
+    if (next == _pull) return;
+    setState(() => _pull = next);
+  }
+
+  void _onPointerDown(PointerDownEvent event) {
+    if (_refreshing || !_atFirstPage()) {
+      _tracking = false;
+      return;
+    }
+    _origin = event.position;
+    _tracking = true;
+  }
+
+  void _onPointerMove(PointerMoveEvent event) {
+    final origin = _origin;
+    if (!_tracking || origin == null || _refreshing) return;
+    final delta = event.position - origin;
+    if (delta.dx.abs() > delta.dy.abs() && delta.dy < _refreshThreshold) {
+      _tracking = false;
+      _setPull(0);
+      return;
+    }
+    if (delta.dy > 0) _holdFirstPage();
+    _setPull(delta.dy);
+  }
+
+  void _holdFirstPage() {
+    final controller = widget.pageController;
+    if (!controller.hasClients) return;
+    final position = controller.position;
+    if (position.pixels <= position.minScrollExtent) return;
+    controller.jumpTo(position.minScrollExtent);
+  }
+
+  void _onPointerEnd() {
+    final shouldRefresh = _tracking && _pull >= _refreshThreshold;
+    _origin = null;
+    _tracking = false;
+    if (shouldRefresh) {
+      _refresh();
+      return;
+    }
+    _setPull(0);
+  }
+
+  Future<void> _refresh() async {
+    if (_refreshing) return;
+    _refreshing = true;
+    _setPull(_refreshThreshold);
+    try {
+      await widget.onRefresh();
+    } finally {
+      _refreshing = false;
+      if (mounted) _setPull(0);
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Listener(
+      onPointerDown: _onPointerDown,
+      onPointerMove: _onPointerMove,
+      onPointerUp: (_) => _onPointerEnd(),
+      onPointerCancel: (_) => _onPointerEnd(),
+      child: Stack(
+        fit: StackFit.expand,
+        children: [
+          widget.child,
+          if (_pull > 0)
+            Positioned(
+              top: widget.topInset,
+              left: 0,
+              right: 0,
+              child: IgnorePointer(
+                child: Align(
+                  alignment: Alignment.topCenter,
+                  child: Container(
+                    key: const Key('pull-refresh-indicator'),
+                    width: AppDimens.refreshIndicatorSize,
+                    height: AppDimens.refreshIndicatorSize,
+                    padding: const EdgeInsets.all(
+                      (AppDimens.refreshIndicatorSize -
+                              AppDimens.refreshSpinnerSize) /
+                          2,
+                    ),
+                    decoration: BoxDecoration(
+                      color: AppColors.refreshIndicatorSurface,
+                      borderRadius: BorderRadius.circular(
+                        AppDimens.refreshIndicatorRadius,
+                      ),
+                    ),
+                    child: const SizedBox.square(
+                      dimension: AppDimens.refreshSpinnerSize,
+                      child: CircularProgressIndicator(
+                        strokeWidth: AppDimens.refreshSpinnerStroke,
+                        color: AppColors.textPrimary,
+                      ),
+                    ),
+                  ),
+                ),
+              ),
+            ),
+        ],
+      ),
+    );
+  }
+}
diff --git a/lib/pages/player/widgets/home_feed_header.dart b/lib/pages/player/widgets/home_feed_header.dart
index 1723d5d..fb192f5 100644
--- a/lib/pages/player/widgets/home_feed_header.dart
+++ b/lib/pages/player/widgets/home_feed_header.dart
@@ -2,6 +2,8 @@
 
 import 'package:flutter/material.dart';
 
+import '../../../core/theme/app_colors.dart';
+
 import '../../home/home_feed_channel.dart';
 import '../../../l10n/app_localizations.dart';
 
@@ -140,8 +142,8 @@ class _TopIconButton extends StatelessWidget {
         icon: Icon(
           icon,
           size: glyphSize,
-          color: Colors.white,
-          shadows: const [Shadow(blurRadius: 6, color: Colors.black)],
+          color: AppColors.onPrimary,
+          shadows: const [Shadow(blurRadius: 6, color: AppColors.mediaBlack)],
         ),
       ),
     );
@@ -184,15 +186,17 @@ class _RefreshButton extends StatelessWidget {
                     child: CircularProgressIndicator(
                       key: Key('home-feed-refreshing'),
                       strokeWidth: 2,
-                      color: Colors.white,
+                      color: AppColors.onPrimary,
                     ),
                   ),
                 )
               : Icon(
                   Icons.refresh_rounded,
                   size: glyphSize,
-                  color: Colors.white,
-                  shadows: const [Shadow(blurRadius: 6, color: Colors.black)],
+                  color: AppColors.onPrimary,
+                  shadows: const [
+                    Shadow(blurRadius: 6, color: AppColors.mediaBlack),
+                  ],
                 ),
         ),
       ),
@@ -232,10 +236,12 @@ class _FeedTabItem extends StatelessWidget {
             label,
             maxLines: 1,
             style: TextStyle(
-              color: selected ? Colors.white : Colors.white70,
+              color: selected ? AppColors.onPrimary : AppColors.muted,
               fontSize: fontSize,
               fontWeight: selected ? FontWeight.w800 : FontWeight.w600,
-              shadows: const [Shadow(blurRadius: 6, color: Colors.black)],
+              shadows: const [
+                Shadow(blurRadius: 6, color: AppColors.mediaBlack),
+              ],
             ),
           ),
           const SizedBox(height: 4),
@@ -243,7 +249,7 @@ class _FeedTabItem extends StatelessWidget {
             width: underlineWidth,
             height: underlineHeight,
             decoration: BoxDecoration(
-              color: selected ? Colors.white : Colors.transparent,
+              color: selected ? AppColors.onPrimary : AppColors.transparent,
               borderRadius: BorderRadius.circular(1),
             ),
           ),
diff --git a/lib/pages/player/widgets/home_feed_overlay.dart b/lib/pages/player/widgets/home_feed_overlay.dart
index d841bce..f1f8eed 100644
--- a/lib/pages/player/widgets/home_feed_overlay.dart
+++ b/lib/pages/player/widgets/home_feed_overlay.dart
@@ -3,32 +3,34 @@
 import 'dart:async';
 
 import 'package:flutter/foundation.dart';
+import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart';
 import 'package:video_player/video_player.dart';
 
 import '../../../core/data/models/drama.dart';
-import '../../../core/formatting/count_format.dart';
-import '../../../core/formatting/localized_content.dart';
+import '../../../core/data/services/playback_thumbnail_service.dart';
+import '../../../core/data/services/sprite_thumbnail_axis.dart';
 import '../../../core/theme/app_colors.dart';
 import '../../../l10n/app_localizations.dart';
-import 'interaction_rail.dart';
+import 'home_feed_recommend_panel.dart';
 import 'loading_progress_track.dart';
+import 'player_double_tap_hearts.dart';
+import 'seek_progress_bar.dart';
+import 'scrub_preview_card.dart';
 
 part 'home_feed_overlay_parts.dart';
 
-const Color _overlayPill = Color(0x66000000);
-const Color _fullBarBackground = Color(0x4D000000);
-const double _titleFontSize = 17;
-const double _metaFontSize = 12;
-const double _tagFontSize = 11;
-const double _fullBarHeight = 44;
 const double _progressHeight = 2;
-const double _progressHitHeight = 24;
+const double _progressHitHeight = 32;
+const double _pageHorizontal = 14;
+const double _railRight = 8;
+const double _railGap = 12;
+const double _bottomInfoInset = 32;
+const double _railBottomOffset = 60;
+const Duration _overlayFadeDuration = Duration(milliseconds: 120);
 const List<Shadow> _boostTextShadows = [
-  Shadow(color: Colors.black54, blurRadius: 5, offset: Offset(0, 1)),
+  Shadow(color: AppColors.shadow, blurRadius: 5, offset: Offset(0, 1)),
 ];
-const int _maxTags = 4;
-final RegExp _tagSplitter = RegExp(r'[,/、·]');
 
 /// 首页沉浸式 feed 浮层：手势层、右侧互动栏、底部信息与整集进度条。
 class HomeFeedOverlay extends StatefulWidget {
@@ -38,6 +40,7 @@ class HomeFeedOverlay extends StatefulWidget {
     required this.drama,
     required this.episode,
     required this.controller,
+    required this.locked,
     required this.liked,
     required this.saved,
     required this.visible,
@@ -48,22 +51,31 @@ class HomeFeedOverlay extends StatefulWidget {
     required this.onShare,
     required this.onDetail,
     required this.onOpenFullPlayer,
+    this.onEpisodes,
     required this.onTogglePlay,
     required this.onBoostStart,
     required this.onBoostEnd,
     required this.onMore,
+    this.onDoubleTapLike,
+    this.now,
     this.likeCount,
     this.favoriteCount,
     this.commentCount,
     this.authorNote = '',
     this.onScrubStart,
+    this.onScrubEnd,
+    this.onScrubVisibilityChanged,
     this.onSeek,
+    this.cancelScrubRequest = 0,
+    this.thumbnailService,
+    this.spriteAxisService,
   });
 
   final AppLocalizations l10n;
   final Drama drama;
   final Episode episode;
   final ValueListenable<VideoPlayerValue>? controller;
+  final bool locked;
   final bool liked;
   final int? likeCount;
   final int? favoriteCount;
@@ -78,18 +90,51 @@ class HomeFeedOverlay extends StatefulWidget {
   final VoidCallback onShare;
   final VoidCallback onDetail;
   final VoidCallback onOpenFullPlayer;
+  final VoidCallback? onEpisodes;
   final VoidCallback onTogglePlay;
   final VoidCallback onBoostStart;
   final VoidCallback onBoostEnd;
   final VoidCallback onMore;
+  final ValueChanged<Offset>? onDoubleTapLike;
+  final DateTime Function()? now;
   final VoidCallback? onScrubStart;
+  final ValueChanged<bool>? onScrubEnd;
+  final ValueChanged<bool>? onScrubVisibilityChanged;
   final ValueChanged<Duration>? onSeek;
+  final int cancelScrubRequest;
+  final PlaybackThumbnailService? thumbnailService;
+  final SpriteThumbnailAxisService? spriteAxisService;
 
   @override
   State<HomeFeedOverlay> createState() => _HomeFeedOverlayState();
 }
 
 class _HomeFeedOverlayState extends State<HomeFeedOverlay> {
+  static const Duration _singleTapDelay = Duration(milliseconds: 320);
+
+  bool _scrubbing = false;
+  bool _wasVisibleBeforeScrub = true;
+  Timer? _singleTapTimer;
+  DateTime? _lastTapAt;
+  int _tapSeq = 0;
+  int _nextHeartBurstId = 0;
+  final List<({int id, Offset position})> _heartBursts = [];
+
+  @override
+  void didUpdateWidget(covariant HomeFeedOverlay oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    if (oldWidget.cancelScrubRequest != widget.cancelScrubRequest) {
+      _scrubbing = false;
+    }
+  }
+
+  @override
+  void dispose() {
+    _tapSeq++;
+    _singleTapTimer?.cancel();
+    super.dispose();
+  }
+
   @override
   Widget build(BuildContext context) {
     return SafeArea(
@@ -104,7 +149,7 @@ class _HomeFeedOverlayState extends State<HomeFeedOverlay> {
                 child: GestureDetector(
                   key: const Key('home-feed-gesture'),
                   behavior: HitTestBehavior.opaque,
-                  onTap: widget.onTogglePlay,
+                  onTapUp: _handleTapUp,
                   onLongPressStart: (details) =>
                       _handleLongPressStart(details, constraints.maxWidth),
                   onLongPressEnd: (_) => widget.onBoostEnd(),
@@ -113,24 +158,154 @@ class _HomeFeedOverlayState extends State<HomeFeedOverlay> {
               ),
             ),
           ),
-          if (widget.boosting)
-            Column(children: [const Spacer(), _boostHint(), _fullSeriesBar()])
-          else
-            Column(
-              children: [
-                const Spacer(),
-                if (widget.visible) _bottomInfo(),
-                _fullSeriesBar(),
-              ],
+          Positioned(
+            left: _pageHorizontal,
+            right: _railRight,
+            bottom: _bottomInfoInset,
+            child: AnimatedOpacity(
+              key: const Key('home-feed-content-opacity'),
+              duration: _overlayFadeDuration,
+              opacity: widget.visible && !_scrubbing && !widget.boosting
+                  ? 1
+                  : 0,
+              child: IgnorePointer(
+                key: const Key('home-feed-content-ignore'),
+                ignoring: !widget.visible || _scrubbing || widget.boosting,
+                child: Row(
+                  crossAxisAlignment: CrossAxisAlignment.end,
+                  children: [
+                    Expanded(child: _bottomInfo()),
+                    const SizedBox(width: _railGap),
+                    Padding(
+                      padding: const EdgeInsets.only(bottom: _railBottomOffset),
+                      child: _rail(),
+                    ),
+                  ],
+                ),
+              ),
+            ),
+          ),
+          Positioned(
+            left: 0,
+            right: 0,
+            bottom: 20,
+            child: AnimatedOpacity(
+              duration: _overlayFadeDuration,
+              opacity: widget.boosting ? 1 : 0,
+              child: IgnorePointer(
+                ignoring: !widget.boosting,
+                child: _boostHint(),
+              ),
+            ),
+          ),
+          Positioned(
+            left: 0,
+            right: 0,
+            bottom: 0,
+            child: _FeedProgressBar(
+              controller: widget.controller,
+              locked: widget.locked,
+              height: _progressHeight,
+              hitHeight: _progressHitHeight,
+              cancelScrubRequest: widget.cancelScrubRequest,
+              thumbnailService: widget.thumbnailService,
+              spriteAxisService: widget.spriteAxisService,
+              thumbnailsUrl: widget.episode.thumbnailsUrl,
+              episodeId: widget.episode.id,
+              posterUrl: widget.drama.posterUrl,
+              onScrubStart: _startScrub,
+              onScrubEnd: _endScrub,
+              onSeek: widget.onSeek,
+            ),
+          ),
+          if (_heartBursts.isNotEmpty)
+            Positioned.fill(
+              child: IgnorePointer(
+                child: Stack(
+                  clipBehavior: Clip.none,
+                  children: [
+                    for (final burst in _heartBursts)
+                      Positioned(
+                        left: burst.position.dx,
+                        top: burst.position.dy - 10,
+                        child: PlayerDoubleTapHeartBurst(
+                          key: ValueKey(burst.id),
+                          onCompleted: () => _removeHeartBurst(burst.id),
+                        ),
+                      ),
+                  ],
+                ),
+              ),
             ),
-          if (widget.visible && !widget.boosting)
-            Positioned(right: 10, bottom: 56, child: _rail()),
         ],
       ),
     );
   }
 
+  void _startScrub() {
+    if (!mounted) return;
+    _wasVisibleBeforeScrub = widget.visible;
+    if (!_scrubbing) setState(() => _scrubbing = true);
+    widget.onScrubVisibilityChanged?.call(true);
+    widget.onScrubStart?.call();
+  }
+
+  void _endScrub() {
+    if (!mounted) return;
+    final wasVisible = _wasVisibleBeforeScrub;
+    if (_scrubbing) setState(() => _scrubbing = false);
+    widget.onScrubVisibilityChanged?.call(false);
+    widget.onScrubEnd?.call(wasVisible);
+  }
+
+  void _handleTapUp(TapUpDetails details) {
+    final tapSeq = ++_tapSeq;
+    final now = widget.now?.call() ?? DateTime.now();
+    final lastTap = _lastTapAt;
+    if (lastTap != null && now.difference(lastTap) <= _singleTapDelay) {
+      _tapSeq++;
+      _singleTapTimer?.cancel();
+      _singleTapTimer = null;
+      _lastTapAt = null;
+      _showHearts(details.localPosition);
+      return;
+    }
+    _lastTapAt = now;
+    _singleTapTimer?.cancel();
+    late final Timer pending;
+    pending = Timer(_singleTapDelay, () {
+      if (identical(_singleTapTimer, pending)) {
+        _singleTapTimer = null;
+      }
+      if (tapSeq != _tapSeq) return;
+      final latestTap = _lastTapAt;
+      if (latestTap != null &&
+          (widget.now?.call() ?? DateTime.now()).difference(latestTap) <
+              _singleTapDelay) {
+        return;
+      }
+      _lastTapAt = null;
+      if (mounted) widget.onTogglePlay();
+    });
+    _singleTapTimer = pending;
+  }
+
+  void _showHearts(Offset position) {
+    final id = _nextHeartBurstId++;
+    setState(() => _heartBursts.add((id: id, position: position)));
+    widget.onDoubleTapLike?.call(position);
+  }
+
+  void _removeHeartBurst(int id) {
+    if (!mounted) return;
+    setState(() => _heartBursts.removeWhere((burst) => burst.id == id));
+  }
+
   void _handleLongPressStart(LongPressStartDetails details, double width) {
+    _tapSeq++;
+    _singleTapTimer?.cancel();
+    _singleTapTimer = null;
+    _lastTapAt = null;
     final third = width / 3;
     final dx = details.localPosition.dx;
     if (dx < third || dx > width - third) {
@@ -169,233 +344,24 @@ class _HomeFeedOverlayState extends State<HomeFeedOverlay> {
   }
 
   Widget _rail() {
-    return InteractionRail(
-      items: [
-        InteractionRailItem(
-          key: const Key('rail-save'),
-          asset: 'assets/icon/rail/rail_save.png',
-          label: widget.l10n.favorite,
-          count: widget.favoriteCount,
-          countKey: const Key('rail-save-count'),
-          selected: widget.saved,
-          onTap: widget.onSave,
-        ),
-        InteractionRailItem(
-          key: const Key('rail-comments'),
-          asset: 'assets/icon/rail/rail_comment.png',
-          label: widget.l10n.comments,
-          count: widget.commentCount,
-          countKey: const Key('rail-comments-count'),
-          onTap: widget.onComments,
-        ),
-        InteractionRailItem(
-          key: const Key('rail-like'),
-          asset: 'assets/icon/rail/rail_like.png',
-          label: widget.l10n.like,
-          count: widget.likeCount,
-          countKey: const Key('rail-like-count'),
-          selected: widget.liked,
-          onTap: widget.onLike,
-        ),
-        InteractionRailItem(
-          key: const Key('rail-share'),
-          asset: 'assets/icon/rail/rail_share.png',
-          label: widget.l10n.share,
-          onTap: widget.onShare,
-        ),
-      ],
+    return HomeFeedActionRail(
+      key: const Key('home-feed-action-rail'),
+      saved: widget.saved,
+      liked: widget.liked,
+      favoriteCount: widget.favoriteCount,
+      likeCount: widget.likeCount,
+      onSave: widget.onSave,
+      onLike: widget.onLike,
+      onEpisodes: widget.onEpisodes ?? widget.onOpenFullPlayer,
     );
   }
 
   Widget _bottomInfo() {
-    return Padding(
-      padding: const EdgeInsets.fromLTRB(14, 0, 56, 8),
-      child: Column(
-        crossAxisAlignment: CrossAxisAlignment.start,
-        mainAxisSize: MainAxisSize.min,
-        children: [
-          _seriesMetaRow(),
-          const SizedBox(height: 2),
-          _titleRow(),
-          const SizedBox(height: 6),
-          _tagsRow(),
-          if (widget.authorNote.isNotEmpty) ...[
-            const SizedBox(height: 6),
-            Text(
-              '${widget.l10n.authorNoteLabel}: ${widget.authorNote}',
-              key: const Key('home-feed-author-note'),
-              maxLines: 2,
-              overflow: TextOverflow.ellipsis,
-              style: const TextStyle(color: Colors.white70, fontSize: 11),
-            ),
-          ],
-        ],
-      ),
-    );
-  }
-
-  Widget _seriesMetaRow() {
-    return GestureDetector(
-      key: const Key('home-feed-series-meta'),
-      onTap: widget.onDetail,
-      child: Row(
-        mainAxisSize: MainAxisSize.min,
-        children: [
-          Flexible(
-            child: Text(
-              widget.l10n.seriesMeta(
-                '${widget.drama.episodeCount}',
-                formatInteractionCount(widget.drama.viewCount),
-              ),
-              maxLines: 1,
-              overflow: TextOverflow.ellipsis,
-              style: const TextStyle(
-                color: Colors.white70,
-                fontSize: _metaFontSize,
-              ),
-            ),
-          ),
-          const Icon(
-            Icons.chevron_right_rounded,
-            color: Colors.white70,
-            size: 16,
-          ),
-        ],
-      ),
-    );
-  }
-
-  Widget _titleRow() {
-    return GestureDetector(
-      onTap: widget.onDetail,
-      child: Row(
-        children: [
-          Flexible(
-            child: Text(
-              localizedDramaTitle(widget.l10n, widget.drama),
-              key: const Key('home-feed-title'),
-              maxLines: 2,
-              overflow: TextOverflow.ellipsis,
-              style: const TextStyle(
-                fontFamily: 'Outfit',
-                color: Colors.white,
-                fontSize: _titleFontSize,
-                fontWeight: FontWeight.w800,
-                shadows: [Shadow(blurRadius: 8, color: Colors.black)],
-              ),
-            ),
-          ),
-          const Icon(Icons.chevron_right_rounded, color: Colors.white, size: 20),
-        ],
-      ),
-    );
-  }
-
-  Widget _tagsRow() {
-    final tags = [
-      widget.l10n.episodeLabel(widget.episode.number),
-      ..._tagValues(),
-    ].take(_maxTags).toList();
-    return Wrap(
-      key: const Key('home-feed-tags'),
-      spacing: 6,
-      runSpacing: 4,
-      children: [
-        for (final tag in tags)
-          Container(
-            padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
-            decoration: BoxDecoration(
-              color: _overlayPill,
-              borderRadius: BorderRadius.circular(6),
-            ),
-            child: Text(
-              tag,
-              maxLines: 1,
-              style: const TextStyle(
-                color: Colors.white,
-                fontSize: _tagFontSize,
-              ),
-            ),
-          ),
-      ],
-    );
-  }
-
-  List<String> _tagValues() {
-    final result = <String>[];
-    for (final value in [widget.drama.genre, widget.drama.category]) {
-      for (final part in value.split(_tagSplitter)) {
-        final tag = part.trim();
-        if (tag.isEmpty || result.contains(tag)) continue;
-        result.add(tag);
-      }
-    }
-    return result;
-  }
-
-  Widget _fullSeriesBar() {
-    return GestureDetector(
-      key: const Key('home-feed-full-series'),
-      onTap: widget.onOpenFullPlayer,
-      child: SizedBox(
-        height: _fullBarHeight,
-        child: Stack(
-          children: [
-            Positioned.fill(
-              child: Container(
-                key: const Key('home-feed-full-series-bg'),
-                color: _fullBarBackground,
-              ),
-            ),
-            Positioned.fill(
-              child: Padding(
-                padding: const EdgeInsets.symmetric(horizontal: 14),
-                child: Row(
-                  children: [
-                    const Icon(
-                      Icons.play_arrow_rounded,
-                      color: Colors.white,
-                      size: 14,
-                    ),
-                    const SizedBox(width: 6),
-                    Expanded(
-                      child: Text(
-                        widget.l10n.watchFullSeries(
-                          '${widget.drama.episodeCount}',
-                        ),
-                        maxLines: 1,
-                        overflow: TextOverflow.ellipsis,
-                        style: const TextStyle(
-                          color: Colors.white,
-                          fontSize: 13,
-                          fontWeight: FontWeight.w600,
-                        ),
-                      ),
-                    ),
-                    const Icon(
-                      Icons.chevron_right_rounded,
-                      color: Colors.white,
-                      size: 18,
-                    ),
-                  ],
-                ),
-              ),
-            ),
-            Positioned(
-              left: 0,
-              right: 0,
-              bottom: 0,
-              child: _FeedProgressBar(
-                controller: widget.controller,
-                height: _progressHeight,
-                hitHeight: _progressHitHeight,
-                onScrubStart: widget.onScrubStart,
-                onSeek: widget.onSeek,
-              ),
-            ),
-          ],
-        ),
-      ),
+    return HomeFeedInfoPanel(
+      drama: widget.drama,
+      episode: widget.episode,
+      onDetail: widget.onDetail,
+      onOpenFullPlayer: widget.onOpenFullPlayer,
     );
   }
 }
diff --git a/lib/pages/player/widgets/home_feed_overlay_parts.dart b/lib/pages/player/widgets/home_feed_overlay_parts.dart
index 690876b..33e8cb4 100644
--- a/lib/pages/player/widgets/home_feed_overlay_parts.dart
+++ b/lib/pages/player/widgets/home_feed_overlay_parts.dart
@@ -6,21 +6,41 @@ const double _thumbSize = 6;
 const double _thumbActiveSize = 14;
 const double _trackActiveHeight = 6;
 const double _lineCenterFromBottom = 8;
+const Duration _trackResizeDuration = Duration(milliseconds: 120);
+const double _timeBubbleWidth = 96;
+const double _timeBubbleMargin = 12;
+const Key _inactiveTrackKey = Key('home-feed-progress-inactive');
 
 /// 整集条底部的进度线：20px 手势区内可点按/拖动 seek。
 class _FeedProgressBar extends StatefulWidget {
   const _FeedProgressBar({
     required this.controller,
+    required this.locked,
     required this.height,
     required this.hitHeight,
+    this.cancelScrubRequest = 0,
+    this.thumbnailService,
+    this.spriteAxisService,
+    this.thumbnailsUrl,
+    this.episodeId,
+    this.posterUrl = '',
     this.onScrubStart,
+    this.onScrubEnd,
     this.onSeek,
   });
 
   final ValueListenable<VideoPlayerValue>? controller;
+  final bool locked;
   final double height;
   final double hitHeight;
+  final int cancelScrubRequest;
+  final PlaybackThumbnailService? thumbnailService;
+  final SpriteThumbnailAxisSource? spriteAxisService;
+  final String? thumbnailsUrl;
+  final String? episodeId;
+  final String posterUrl;
   final VoidCallback? onScrubStart;
+  final VoidCallback? onScrubEnd;
   final ValueChanged<Duration>? onSeek;
 
   @override
@@ -33,6 +53,7 @@ class _FeedProgressBarState extends State<_FeedProgressBar> {
   double? _preview;
   Timer? _bufferTimer;
   bool _buffering = false;
+  bool _dragging = false;
 
   @override
   void initState() {
@@ -50,6 +71,21 @@ class _FeedProgressBarState extends State<_FeedProgressBar> {
       _buffering = false;
       _attachSource();
     }
+    if (oldWidget.cancelScrubRequest != widget.cancelScrubRequest) {
+      _dragging = false;
+      _preview = null;
+    }
+    if (oldWidget.locked != widget.locked) {
+      _bufferTimer?.cancel();
+      _bufferTimer = null;
+      _buffering = false;
+      if (widget.locked) {
+        _dragging = false;
+        _preview = null;
+      } else {
+        _syncBufferState(notify: false);
+      }
+    }
   }
 
   @override
@@ -65,16 +101,17 @@ class _FeedProgressBarState extends State<_FeedProgressBar> {
       builder: (context, constraints) {
         final width = constraints.maxWidth;
         final source = widget.controller;
-        final scrubbing = _preview != null;
-        final loading =
-            source == null ||
-            (!scrubbing && (!source.value.isInitialized || _buffering));
-        final track = source == null
-            ? _loadingTrack()
+        final scrubbing = _dragging;
+        final loading = !widget.locked && !scrubbing && _buffering;
+        final track = widget.locked
+            ? _inactiveTrack()
+            : source == null
+            ? _inactiveTrack()
             : ValueListenableBuilder<VideoPlayerValue>(
                 valueListenable: source,
                 builder: (context, value, _) {
-                  if (!scrubbing && (!value.isInitialized || _buffering)) {
+                  if (!value.isInitialized) return _inactiveTrack();
+                  if (!scrubbing && _buffering) {
                     return _loadingTrack();
                   }
                   final total = value.duration.inMilliseconds;
@@ -86,23 +123,67 @@ class _FeedProgressBarState extends State<_FeedProgressBar> {
                   return _track(_preview ?? played, width);
                 },
               );
-        return GestureDetector(
-          key: const Key('home-feed-progress'),
+        final interactive =
+            !widget.locked &&
+            !loading &&
+            (source?.value.isInitialized ?? false);
+        final video = source?.value;
+        final previewPosition = !_dragging || _preview == null || video == null
+            ? null
+            : seekPositionForFraction(_preview!, video.duration);
+        final showPreview = previewPosition != null;
+        return Listener(
           behavior: HitTestBehavior.opaque,
-          onHorizontalDragStart: loading
-              ? null
-              : (details) {
-                  widget.onScrubStart?.call();
-                  _update(details.localPosition.dx / width);
-                },
-          onHorizontalDragUpdate: loading
-              ? null
-              : (details) => _update(details.localPosition.dx / width),
-          onHorizontalDragEnd: loading ? null : (_) => _commit(_preview),
-          onHorizontalDragCancel: loading
-              ? null
-              : () => setState(() => _preview = null),
-          child: track,
+          onPointerUp: (_) => _finishScrub(),
+          onPointerCancel: (_) => _finishScrub(),
+          child: GestureDetector(
+            key: const Key('home-feed-progress'),
+            behavior: HitTestBehavior.opaque,
+            dragStartBehavior: DragStartBehavior.down,
+            onHorizontalDragStart: interactive
+                ? (details) => _startScrub(details.localPosition.dx / width)
+                : null,
+            onHorizontalDragUpdate: interactive
+                ? (details) => _update(details.localPosition.dx / width)
+                : null,
+            onHorizontalDragEnd: interactive ? (_) => _finishScrub() : null,
+            onHorizontalDragCancel: interactive ? _finishScrub : null,
+            child: Stack(
+              clipBehavior: Clip.none,
+              children: [
+                track,
+                if (showPreview &&
+                    widget.thumbnailService != null &&
+                    widget.episodeId != null)
+                  Positioned(
+                    left: scrubPreviewLeft(
+                      trackWidth: width,
+                      fraction: _preview!,
+                    ),
+                    bottom: _lineCenterFromBottom + 16,
+                    child: ScrubPreviewCard(
+                      service: widget.thumbnailService!,
+                      spriteAxisService: widget.spriteAxisService,
+                      thumbnailsUrl: widget.thumbnailsUrl,
+                      episodeId: widget.episodeId!,
+                      posterUrl: widget.posterUrl,
+                      position: previewPosition,
+                      duration: video!.duration,
+                    ),
+                  )
+                else if (showPreview)
+                  Positioned(
+                    left: _timeBubbleLeft(width, _preview!),
+                    bottom: _lineCenterFromBottom + 16,
+                    child: _ScrubTimeBubble(
+                      key: const Key('scrub-preview-time-bubble'),
+                      position: previewPosition,
+                      duration: video!.duration,
+                    ),
+                  ),
+              ],
+            ),
+          ),
         );
       },
     );
@@ -121,7 +202,7 @@ class _FeedProgressBarState extends State<_FeedProgressBar> {
 
   void _syncBufferState({bool notify = true}) {
     final source = widget.controller;
-    if (source == null) {
+    if (widget.locked || source == null) {
       _bufferTimer?.cancel();
       _bufferTimer = null;
       _setBuffering(false, notify: notify);
@@ -131,7 +212,7 @@ class _FeedProgressBarState extends State<_FeedProgressBar> {
     if (!value.isInitialized) {
       _bufferTimer?.cancel();
       _bufferTimer = null;
-      _setBuffering(true, notify: notify);
+      _setBuffering(false, notify: notify);
       return;
     }
     if (!value.isBuffering) {
@@ -180,30 +261,66 @@ class _FeedProgressBarState extends State<_FeedProgressBar> {
     );
   }
 
+  Widget _inactiveTrack() {
+    final bottom = _lineCenterFromBottom - widget.height / 2;
+    return SizedBox(
+      height: widget.hitHeight,
+      child: Stack(
+        children: [
+          Positioned(
+            left: 0,
+            right: 0,
+            bottom: bottom,
+            child: SizedBox(
+              height: widget.height,
+              child: ColoredBox(
+                key: _inactiveTrackKey,
+                color: AppColors.border,
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  void _startScrub(double fraction) {
+    if (!mounted || _dragging) return;
+    setState(() {
+      _dragging = true;
+      _preview = fraction.clamp(0.0, 1.0).toDouble();
+    });
+    widget.onScrubStart?.call();
+  }
+
   void _update(double fraction) {
+    if (!mounted || !_dragging) return;
     setState(() => _preview = fraction.clamp(0.0, 1.0).toDouble());
   }
 
-  void _commit(double? fraction) {
-    if (fraction == null) return;
+  void _finishScrub() {
+    if (!mounted || !_dragging) return;
+    final fraction = _preview;
+    setState(() {
+      _dragging = false;
+      _preview = null;
+    });
+    widget.onScrubEnd?.call();
+    if (widget.locked || fraction == null) return;
     final total = widget.controller?.value.duration.inMilliseconds ?? 0;
-    if (total > 0) {
-      widget.onSeek?.call(
-        Duration(milliseconds: (total * fraction.clamp(0.0, 1.0)).round()),
-      );
-    }
-    setState(() => _preview = null);
+    if (total <= 0) return;
+    widget.onSeek?.call(Duration(milliseconds: (total * fraction).round()));
   }
 
   Widget _track(double fraction, double width) {
     final dragging = _preview != null;
     final trackHeight = dragging ? _trackActiveHeight : widget.height;
     final size = dragging ? _thumbActiveSize : _thumbSize;
-    final left = (width * fraction - size / 2)
-        .clamp(0.0, width - size)
+    final thumbSlotLeft = (width * fraction - _thumbActiveSize / 2)
+        .clamp(0.0, width - _thumbActiveSize)
         .toDouble();
-    final lineBottom = _lineCenterFromBottom - trackHeight / 2;
-    final thumbBottom = _lineCenterFromBottom - size / 2;
+    final trackSlotBottom = _lineCenterFromBottom - _trackActiveHeight / 2;
+    final thumbSlotBottom = _lineCenterFromBottom - _thumbActiveSize / 2;
     return SizedBox(
       height: widget.hitHeight,
       child: Stack(
@@ -212,32 +329,53 @@ class _FeedProgressBarState extends State<_FeedProgressBar> {
           Positioned(
             left: 0,
             right: 0,
-            bottom: lineBottom,
-            child: Container(
-              key: const Key('home-feed-progress-track'),
-              height: trackHeight,
-              color: Colors.white24,
+            bottom: trackSlotBottom,
+            child: SizedBox(
+              height: _trackActiveHeight,
+              child: Stack(
+                children: [
+                  Align(
+                    alignment: Alignment.centerLeft,
+                    child: AnimatedContainer(
+                      key: const Key('home-feed-progress-track'),
+                      duration: _trackResizeDuration,
+                      curve: Curves.easeOut,
+                      width: width,
+                      height: trackHeight,
+                      color: AppColors.border,
+                    ),
+                  ),
+                  Align(
+                    alignment: Alignment.centerLeft,
+                    child: AnimatedContainer(
+                      duration: _trackResizeDuration,
+                      curve: Curves.easeOut,
+                      width: width * fraction,
+                      height: trackHeight,
+                      color: AppColors.blue,
+                    ),
+                  ),
+                ],
+              ),
             ),
           ),
           Positioned(
-            left: 0,
-            bottom: lineBottom,
-            child: Container(
-              width: width * fraction,
-              height: trackHeight,
-              color: AppColors.blue,
-            ),
-          ),
-          Positioned(
-            left: left,
-            bottom: thumbBottom,
-            child: Container(
-              key: const Key('home-feed-progress-thumb'),
-              width: size,
-              height: size,
-              decoration: const BoxDecoration(
-                color: Colors.white,
-                shape: BoxShape.circle,
+            left: thumbSlotLeft,
+            bottom: thumbSlotBottom,
+            child: SizedBox.square(
+              dimension: _thumbActiveSize,
+              child: Center(
+                child: AnimatedContainer(
+                  key: const Key('home-feed-progress-thumb'),
+                  duration: _trackResizeDuration,
+                  curve: Curves.easeOut,
+                  width: size,
+                  height: size,
+                  decoration: const BoxDecoration(
+                    color: AppColors.onPrimary,
+                    shape: BoxShape.circle,
+                  ),
+                ),
               ),
             ),
           ),
@@ -245,4 +383,56 @@ class _FeedProgressBarState extends State<_FeedProgressBar> {
       ),
     );
   }
+
+  double _timeBubbleLeft(double width, double fraction) {
+    final maxLeft = width - _timeBubbleWidth - _timeBubbleMargin;
+    if (maxLeft < _timeBubbleMargin) {
+      return ((width - _timeBubbleWidth) / 2)
+          .clamp(0.0, width - _timeBubbleWidth)
+          .toDouble();
+    }
+    return (width * fraction - _timeBubbleWidth / 2)
+        .clamp(_timeBubbleMargin, maxLeft)
+        .toDouble();
+  }
+}
+
+class _ScrubTimeBubble extends StatelessWidget {
+  const _ScrubTimeBubble({
+    super.key,
+    required this.position,
+    required this.duration,
+  });
+
+  final Duration position;
+  final Duration duration;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: _timeBubbleWidth,
+      padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 3),
+      decoration: BoxDecoration(
+        color: AppColors.timeBubbleScrim,
+        borderRadius: BorderRadius.circular(6),
+      ),
+      child: Text(
+        '${_formatTime(position)} / ${_formatTime(duration)}',
+        key: const Key('scrub-preview-time'),
+        textAlign: TextAlign.center,
+        maxLines: 1,
+        style: const TextStyle(
+          color: AppColors.textPrimary,
+          fontSize: 12,
+          fontWeight: FontWeight.w600,
+        ),
+      ),
+    );
+  }
+
+  String _formatTime(Duration value) {
+    final minutes = value.inMinutes.remainder(60).toString().padLeft(2, '0');
+    final seconds = value.inSeconds.remainder(60).toString().padLeft(2, '0');
+    return '$minutes:$seconds';
+  }
 }
diff --git a/lib/pages/player/widgets/home_feed_recommend_panel.dart b/lib/pages/player/widgets/home_feed_recommend_panel.dart
new file mode 100644
index 0000000..2c42f55
--- /dev/null
+++ b/lib/pages/player/widgets/home_feed_recommend_panel.dart
@@ -0,0 +1,414 @@
+// Author: fruit.com.cn
+
+import 'dart:math' as math;
+
+import 'package:flutter/material.dart';
+
+import '../../../core/data/models/drama.dart';
+import '../../../core/formatting/count_format.dart';
+import '../../../core/formatting/localized_content.dart';
+import '../../../core/theme/app_colors.dart';
+import '../../../l10n/app_localizations.dart';
+import '../../home/widgets/home_drama_classification.dart';
+
+const double _seriesFont = 19;
+const double _tagFont = 13;
+const double _synopsisFont = 13;
+const double _watchAllHeight = 44;
+const double _actionGap = 28;
+const double _actionIcon = 32;
+const double _actionWidth = 64;
+const List<Shadow> _textShadows = [
+  Shadow(color: AppColors.shadow, blurRadius: 6, offset: Offset(0, 1)),
+];
+final RegExp _tagSplitter = RegExp(r'[,/、·]');
+
+class HomeFeedInfoPanel extends StatefulWidget {
+  const HomeFeedInfoPanel({
+    super.key,
+    required this.drama,
+    required this.episode,
+    required this.onDetail,
+    required this.onOpenFullPlayer,
+  });
+
+  final Drama drama;
+  final Episode episode;
+  final VoidCallback onDetail;
+  final VoidCallback onOpenFullPlayer;
+
+  @override
+  State<HomeFeedInfoPanel> createState() => _HomeFeedInfoPanelState();
+}
+
+class _HomeFeedInfoPanelState extends State<HomeFeedInfoPanel> {
+  bool _synopsisExpanded = false;
+
+  @override
+  Widget build(BuildContext context) {
+    final l10n = AppLocalizations.of(context)!;
+    final dramaTitle = localizedDramaTitle(l10n, widget.drama);
+    final synopsis = localizedDramaSynopsis(l10n, widget.drama).trim();
+    final genres = _genreValues();
+    return Column(
+      mainAxisSize: MainAxisSize.min,
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        GestureDetector(
+          key: const Key('home-feed-series-name'),
+          behavior: HitTestBehavior.opaque,
+          onTap: widget.onOpenFullPlayer,
+          child: Row(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              Flexible(
+                child: Text(
+                  dramaTitle,
+                  key: const Key('home-feed-series-title'),
+                  maxLines: 1,
+                  overflow: TextOverflow.ellipsis,
+                  style: const TextStyle(
+                    color: AppColors.textPrimary,
+                    fontSize: _seriesFont,
+                    fontWeight: FontWeight.w600,
+                    shadows: _textShadows,
+                  ),
+                ),
+              ),
+              const SizedBox(width: 4),
+              const Icon(
+                Icons.chevron_right_rounded,
+                size: 20,
+                color: AppColors.textPrimary,
+              ),
+            ],
+          ),
+        ),
+        const SizedBox(height: 8),
+        _tagMetaRow(l10n, genres),
+        if (synopsis.isNotEmpty) ...[
+          const SizedBox(height: 8),
+          _synopsis(l10n, synopsis),
+        ],
+        const SizedBox(height: 12),
+        _watchAll(context, l10n),
+      ],
+    );
+  }
+
+  Widget _tagMetaRow(AppLocalizations l10n, List<String> genres) {
+    return Row(
+      key: const Key('home-feed-tags'),
+      children: [
+        if (isHotDrama(widget.drama)) ...[
+          Container(
+            key: const Key('home-feed-hot-badge'),
+            padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
+            decoration: BoxDecoration(
+              color: AppColors.error,
+              borderRadius: BorderRadius.circular(3),
+            ),
+            child: Text(
+              l10n.homeBadgeHot,
+              style: const TextStyle(
+                color: AppColors.textPrimary,
+                fontSize: 10,
+                fontWeight: FontWeight.w600,
+              ),
+            ),
+          ),
+          const SizedBox(width: 8),
+        ],
+        Flexible(
+          fit: FlexFit.loose,
+          child: Text(
+            genres.join(' '),
+            maxLines: 1,
+            overflow: TextOverflow.ellipsis,
+            style: const TextStyle(
+              color: AppColors.overlayLabel,
+              fontSize: _tagFont,
+            ),
+          ),
+        ),
+        const SizedBox(width: 8),
+        Text(
+          l10n.favoriteEpisodeProgress(
+            widget.episode.number,
+            widget.drama.episodeCount,
+          ),
+          key: const Key('home-feed-episode-progress'),
+          maxLines: 1,
+          softWrap: false,
+          style: const TextStyle(
+            color: AppColors.overlayLabel,
+            fontSize: _tagFont,
+          ),
+        ),
+      ],
+    );
+  }
+
+  Widget _synopsis(AppLocalizations l10n, String synopsis) {
+    const style = TextStyle(
+      color: AppColors.overlaySecondary,
+      fontSize: _synopsisFont,
+      height: 1.35,
+      shadows: _textShadows,
+    );
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        final painter = TextPainter(
+          text: TextSpan(text: synopsis, style: style),
+          maxLines: 2,
+          textDirection: Directionality.of(context),
+          textScaler: MediaQuery.textScalerOf(context),
+        )..layout(maxWidth: constraints.maxWidth);
+        final overflows = painter.didExceedMaxLines;
+        if (!overflows) {
+          return Text(
+            synopsis,
+            key: const Key('home-feed-synopsis'),
+            style: style,
+          );
+        }
+        if (_synopsisExpanded) {
+          return _expandedSynopsis(constraints.maxWidth, synopsis, style, l10n);
+        }
+        return Stack(
+          children: [
+            Padding(
+              padding: const EdgeInsets.only(right: 40),
+              child: Text(
+                synopsis,
+                key: const Key('home-feed-synopsis'),
+                maxLines: 2,
+                overflow: TextOverflow.ellipsis,
+                style: style,
+              ),
+            ),
+            Positioned(
+              right: 0,
+              bottom: 0,
+              child: _synopsisToggle(
+                key: const Key('home-feed-synopsis-more'),
+                label: l10n.expandSynopsis,
+              ),
+            ),
+          ],
+        );
+      },
+    );
+  }
+
+  Widget _expandedSynopsis(
+    double maxWidth,
+    String synopsis,
+    TextStyle style,
+    AppLocalizations l10n,
+  ) {
+    return SizedBox(
+      width: maxWidth,
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.stretch,
+        children: [
+          Text(synopsis, key: const Key('home-feed-synopsis'), style: style),
+          Align(
+            alignment: Alignment.centerRight,
+            child: _synopsisToggle(
+              key: const Key('home-feed-synopsis-more'),
+              label: l10n.showLess,
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  Widget _synopsisToggle({required Key key, required String label}) {
+    return GestureDetector(
+      key: key,
+      onTap: () => setState(() => _synopsisExpanded = !_synopsisExpanded),
+      child: Text(
+        label,
+        style: const TextStyle(
+          color: AppColors.textPrimary,
+          fontSize: _synopsisFont,
+          fontWeight: FontWeight.w600,
+        ),
+      ),
+    );
+  }
+
+  Widget _watchAll(BuildContext context, AppLocalizations l10n) {
+    final screenWidth = MediaQuery.sizeOf(context).width;
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        final buttonWidth = math.min(screenWidth * 0.7, constraints.maxWidth);
+        return Align(
+          alignment: Alignment.centerLeft,
+          child: SizedBox(
+            width: buttonWidth,
+            height: _watchAllHeight,
+            child: DecoratedBox(
+              key: const Key('home-feed-full-series-bg'),
+              decoration: BoxDecoration(
+                gradient: const LinearGradient(
+                  colors: [AppColors.actionRed, AppColors.blue],
+                ),
+                borderRadius: BorderRadius.circular(8),
+              ),
+              child: Material(
+                color: AppColors.transparent,
+                child: InkWell(
+                  key: const Key('home-feed-full-series'),
+                  onTap: widget.onOpenFullPlayer,
+                  borderRadius: BorderRadius.circular(8),
+                  child: Center(
+                    child: Text(
+                      l10n.homeWatchAll,
+                      style: const TextStyle(
+                        color: AppColors.textPrimary,
+                        fontSize: 15,
+                        fontWeight: FontWeight.w600,
+                      ),
+                    ),
+                  ),
+                ),
+              ),
+            ),
+          ),
+        );
+      },
+    );
+  }
+
+  List<String> _genreValues() {
+    final result = <String>[];
+    for (final value in [widget.drama.genre, widget.drama.category]) {
+      for (final part in value.split(_tagSplitter)) {
+        final tag = part.trim();
+        if (tag.isEmpty || result.contains(tag)) continue;
+        result.add(tag);
+      }
+    }
+    return result.take(3).toList(growable: false);
+  }
+}
+
+class HomeFeedActionRail extends StatelessWidget {
+  const HomeFeedActionRail({
+    super.key,
+    required this.saved,
+    required this.liked,
+    required this.onSave,
+    required this.onLike,
+    required this.onEpisodes,
+    this.favoriteCount,
+    this.likeCount,
+  });
+
+  final bool saved;
+  final bool liked;
+  final int? favoriteCount;
+  final int? likeCount;
+  final VoidCallback onSave;
+  final VoidCallback onLike;
+  final VoidCallback onEpisodes;
+
+  @override
+  Widget build(BuildContext context) {
+    final l10n = AppLocalizations.of(context)!;
+    return SizedBox(
+      width: _actionWidth,
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          _action(
+            key: const Key('rail-save'),
+            icon: saved
+                ? Icons.bookmark_rounded
+                : Icons.bookmark_border_rounded,
+            label: favoriteCount == null
+                ? l10n.favorite
+                : formatInteractionCount(favoriteCount!),
+            labelKey: const Key('rail-save-count'),
+            onTap: onSave,
+          ),
+          const SizedBox(height: _actionGap),
+          _action(
+            key: const Key('rail-like'),
+            icon: liked
+                ? Icons.favorite_rounded
+                : Icons.favorite_border_rounded,
+            iconColor: liked
+                ? AppColors.doubleTapHeartRed
+                : AppColors.textPrimary,
+            label: likeCount == null
+                ? l10n.like
+                : formatInteractionCount(likeCount!),
+            labelKey: const Key('rail-like-count'),
+            onTap: onLike,
+          ),
+          const SizedBox(height: _actionGap),
+          _action(
+            key: const Key('rail-episodes'),
+            icon: Icons.layers_rounded,
+            label: l10n.episodes,
+            labelKey: const Key('rail-episodes-label'),
+            labelFontSize: 11,
+            onTap: onEpisodes,
+          ),
+        ],
+      ),
+    );
+  }
+
+  Widget _action({
+    required Key key,
+    required IconData icon,
+    required String label,
+    required Key labelKey,
+    required VoidCallback onTap,
+    Color iconColor = AppColors.textPrimary,
+    double labelFontSize = 12,
+  }) {
+    return GestureDetector(
+      key: key,
+      behavior: HitTestBehavior.opaque,
+      onTap: onTap,
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          Icon(
+            icon,
+            size: _actionIcon,
+            color: iconColor,
+            shadows: const [
+              Shadow(
+                color: AppColors.shadowSoft,
+                blurRadius: 4,
+                offset: Offset(0, 1),
+              ),
+            ],
+          ),
+          const SizedBox(height: 2),
+          Text(
+            label,
+            key: labelKey,
+            maxLines: 1,
+            overflow: TextOverflow.ellipsis,
+            textAlign: TextAlign.center,
+            style: TextStyle(
+              color: AppColors.textPrimary,
+              fontSize: labelFontSize,
+              fontWeight: FontWeight.w500,
+              height: 1,
+              shadows: _textShadows,
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
diff --git a/lib/pages/player/widgets/interaction_rail.dart b/lib/pages/player/widgets/interaction_rail.dart
index f3ff832..48f0c98 100644
--- a/lib/pages/player/widgets/interaction_rail.dart
+++ b/lib/pages/player/widgets/interaction_rail.dart
@@ -19,6 +19,7 @@ class InteractionRailItem {
     this.count,
     this.countKey,
     this.selected = false,
+    this.selectedColor = AppColors.blue,
   });
 
   final Key key;
@@ -28,6 +29,7 @@ class InteractionRailItem {
   final int? count;
   final Key? countKey;
   final bool selected;
+  final Color selectedColor;
 }
 
 /// 播放页与首页 feed 共用的右侧互动栏：收藏/评论/喜欢/分享。
@@ -71,7 +73,7 @@ class _RailButton extends StatelessWidget {
               width: _iconSize,
               height: _iconSize,
               fit: BoxFit.contain,
-              color: item.selected ? AppColors.blue : Colors.white,
+              color: item.selected ? item.selectedColor : AppColors.onPrimary,
               colorBlendMode: BlendMode.srcIn,
             ),
           ),
@@ -83,11 +85,11 @@ class _RailButton extends StatelessWidget {
           maxLines: 1,
           overflow: TextOverflow.ellipsis,
           style: const TextStyle(
-            color: Colors.white,
+            color: AppColors.onPrimary,
             height: 1,
             fontSize: 12,
             fontWeight: FontWeight.w600,
-            shadows: [Shadow(blurRadius: 6, color: Colors.black)],
+            shadows: [Shadow(blurRadius: 6, color: AppColors.mediaBlack)],
           ),
         ),
       ],
diff --git a/lib/pages/player/widgets/loading_progress_track.dart b/lib/pages/player/widgets/loading_progress_track.dart
index 5d48d51..8b78abb 100644
--- a/lib/pages/player/widgets/loading_progress_track.dart
+++ b/lib/pages/player/widgets/loading_progress_track.dart
@@ -9,8 +9,8 @@ class LoadingProgressTrack extends StatefulWidget {
   const LoadingProgressTrack({
     super.key = const Key('progress-loading'),
     required this.height,
-    this.trackColor = Colors.white24,
-    this.highlightColor = AppColors.blue,
+    this.trackColor = AppColors.inactiveTrack,
+    this.highlightColor = AppColors.onPrimary,
   });
 
   final double height;
diff --git a/lib/pages/player/widgets/player_center_toggle.dart b/lib/pages/player/widgets/player_center_toggle.dart
index cfb03c9..78ba374 100644
--- a/lib/pages/player/widgets/player_center_toggle.dart
+++ b/lib/pages/player/widgets/player_center_toggle.dart
@@ -6,9 +6,9 @@ import '../../../core/theme/app_colors.dart';
 
 const double _toggleSize = 68;
 const double _iconSize = 36;
-const Color _toggleBackground = Colors.black26;
+const Color _toggleBackground = AppColors.controlSoftScrim;
 const List<Shadow> _iconShadows = [
-  Shadow(color: Colors.black54, blurRadius: 12),
+  Shadow(color: AppColors.shadow, blurRadius: 12),
 ];
 
 /// 首页沉浸流与全屏播放器共用的播放/暂停按钮。
diff --git a/lib/pages/player/widgets/player_double_tap_hearts.dart b/lib/pages/player/widgets/player_double_tap_hearts.dart
new file mode 100644
index 0000000..68de8b9
--- /dev/null
+++ b/lib/pages/player/widgets/player_double_tap_hearts.dart
@@ -0,0 +1,132 @@
+// Author: fruit.com.cn
+
+import 'dart:math';
+
+import 'package:flutter/material.dart';
+
+import '../../../core/theme/app_colors.dart';
+
+class PlayerDoubleTapHeartBurst extends StatefulWidget {
+  const PlayerDoubleTapHeartBurst({super.key, required this.onCompleted});
+
+  final VoidCallback onCompleted;
+
+  @override
+  State<PlayerDoubleTapHeartBurst> createState() =>
+      _PlayerDoubleTapHeartBurstState();
+}
+
+class _PlayerDoubleTapHeartBurstState extends State<PlayerDoubleTapHeartBurst>
+    with SingleTickerProviderStateMixin {
+  late final AnimationController _controller;
+  late final List<_HeartParticle> _particles;
+  bool _completed = false;
+
+  @override
+  void initState() {
+    super.initState();
+    final random = Random();
+    var delay = 0;
+    _particles = List.generate(3 + random.nextInt(2), (index) {
+      if (index > 0) delay += 40 + random.nextInt(21);
+      return _HeartParticle(
+        delay: delay,
+        duration: 600 + random.nextInt(101),
+        travel: 90 + random.nextInt(31),
+        drift: -18 + random.nextInt(37),
+        size: (20 + random.nextInt(7)).toDouble(),
+        color: random.nextBool()
+            ? AppColors.doubleTapHeartRed
+            : AppColors.doubleTapHeartPink,
+      );
+    });
+    final total = _particles
+        .map((particle) => particle.delay + particle.duration)
+        .reduce(max);
+    _controller = AnimationController(
+      vsync: this,
+      duration: Duration(milliseconds: total),
+    )..addStatusListener(_onStatus);
+    _controller.forward();
+  }
+
+  void _onStatus(AnimationStatus status) {
+    if (status != AnimationStatus.completed || _completed) return;
+    _completed = true;
+    widget.onCompleted();
+  }
+
+  @override
+  void dispose() {
+    _controller
+      ..removeStatusListener(_onStatus)
+      ..dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return IgnorePointer(
+      child: SizedBox.shrink(
+        child: AnimatedBuilder(
+          animation: _controller,
+          builder: (context, _) {
+            final elapsed =
+                _controller.value * _controller.duration!.inMilliseconds;
+            return Stack(
+              clipBehavior: Clip.none,
+              children: [
+                for (final particle in _particles) _particle(particle, elapsed),
+              ],
+            );
+          },
+        ),
+      ),
+    );
+  }
+
+  Widget _particle(_HeartParticle particle, double elapsed) {
+    final progress = ((elapsed - particle.delay) / particle.duration).clamp(
+      0.0,
+      1.0,
+    );
+    if (progress <= 0) return const SizedBox.shrink();
+    final move = Curves.easeOutCubic.transform(progress);
+    final scale = progress < 0.3
+        ? 0.55 + (1.15 - 0.55) * (progress / 0.3)
+        : 1.15 - (1.15 - 0.2) * ((progress - 0.3) / 0.7);
+    return Positioned(
+      left: particle.drift * move - particle.size / 2,
+      top: -particle.travel * move,
+      child: Opacity(
+        opacity: 1 - Curves.easeIn.transform(progress),
+        child: Transform.scale(
+          scale: scale,
+          child: Icon(
+            Icons.favorite_rounded,
+            color: particle.color,
+            size: particle.size,
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class _HeartParticle {
+  const _HeartParticle({
+    required this.delay,
+    required this.duration,
+    required this.travel,
+    required this.drift,
+    required this.size,
+    required this.color,
+  });
+
+  final int delay;
+  final int duration;
+  final int travel;
+  final int drift;
+  final double size;
+  final Color color;
+}
diff --git a/lib/pages/player/widgets/player_more_sheet.dart b/lib/pages/player/widgets/player_more_sheet.dart
index 18e9ad1..c59d828 100644
--- a/lib/pages/player/widgets/player_more_sheet.dart
+++ b/lib/pages/player/widgets/player_more_sheet.dart
@@ -271,7 +271,7 @@ class _PlayerMoreSheetState extends State<PlayerMoreSheet> {
   }) {
     return Material(
       key: key,
-      color: Colors.transparent,
+      color: AppColors.transparent,
       borderRadius: BorderRadius.circular(8),
       child: InkWell(
         borderRadius: BorderRadius.circular(8),
@@ -347,7 +347,7 @@ class _SegmentButton extends StatelessWidget {
         ? AppColors.muted
         : AppColors.subtle;
     return Material(
-      color: Colors.transparent,
+      color: AppColors.transparent,
       borderRadius: BorderRadius.circular(_segmentRadius),
       child: InkWell(
         onTap: onTap,
@@ -357,12 +357,12 @@ class _SegmentButton extends StatelessWidget {
           padding: const EdgeInsets.symmetric(horizontal: _segmentPadding),
           alignment: Alignment.center,
           decoration: BoxDecoration(
-            color: selected ? AppColors.card : Colors.transparent,
+            color: selected ? AppColors.card : AppColors.transparent,
             borderRadius: BorderRadius.circular(_segmentRadius),
             boxShadow: selected
                 ? const [
                     BoxShadow(
-                      color: Color(0x14000000),
+                      color: AppColors.shadowSubtle,
                       blurRadius: 4,
                       offset: Offset(0, 1),
                     ),
diff --git a/lib/pages/player/widgets/player_overlay.dart b/lib/pages/player/widgets/player_overlay.dart
index 9896595..be69559 100644
--- a/lib/pages/player/widgets/player_overlay.dart
+++ b/lib/pages/player/widgets/player_overlay.dart
@@ -1,6 +1,12 @@
 // Author: fruit.com.cn
 
+import 'dart:async';
+
 import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+
+import '../../../core/data/models/drama.dart';
+import '../../../core/data/services/catalog_controller.dart';
 import '../../../core/formatting/localized_content.dart';
 import '../../../core/theme/app_colors.dart';
 import '../../../core/theme/app_dimens.dart';
@@ -16,8 +22,9 @@ const double _topButtonSize = 36;
 const double _topBarHeight = 58;
 const double _boostHintIconSize = 16;
 const double _boostHintFontSize = 13;
+const double _synopsisRailInset = 54;
 const List<Shadow> _playerTextShadows = [
-  Shadow(color: Colors.black54, blurRadius: 5, offset: Offset(0, 1)),
+  Shadow(color: AppColors.shadow, blurRadius: 5, offset: Offset(0, 1)),
 ];
 
 /// K29 竖屏播放页浮层。
@@ -28,6 +35,7 @@ class PlayerPlaybackOverlay extends StatelessWidget {
     required this.data,
     required this.actions,
     required this.controlsVisible,
+    required this.scrubbing,
   });
 
   /// 展示数据。
@@ -39,6 +47,9 @@ class PlayerPlaybackOverlay extends StatelessWidget {
   /// 控制层是否可见。
   final bool controlsVisible;
 
+  /// 正在拖动进度条。拖动期间清屏，只留进度条。
+  final bool scrubbing;
+
   @override
   Widget build(BuildContext context) {
     return SafeArea(
@@ -60,7 +71,7 @@ class PlayerPlaybackOverlay extends StatelessWidget {
           _top(context),
           _bottom(context),
           if (controlsVisible) _rail(context),
-          if (!data.playing)
+          if (!data.playing && !scrubbing)
             Center(
               child: PlayerCenterToggle(
                 key: const Key('player-play-toggle'),
@@ -78,49 +89,55 @@ class PlayerPlaybackOverlay extends StatelessWidget {
       top: 0,
       left: 0,
       right: 0,
-      child: Container(
-        key: const Key('player-controls-top'),
-        height: _topBarHeight,
-        padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 8),
-        child: Row(
-          children: [
-            if (actions.onBack != null)
-              _TopButton(
-                key: const Key('player-back'),
-                tooltip: data.l10n.backToSeries,
-                icon: Icons.chevron_left_rounded,
-                onPressed: actions.onBack!,
-              )
-            else
-              const SizedBox(width: _topButtonSize),
-            const SizedBox(width: 8),
-            Expanded(
-              child: Text(
-                data.l10n.episodeLabel(data.episode.number),
-                key: const Key('player-episode-heading'),
-                maxLines: 1,
-                overflow: TextOverflow.ellipsis,
-                style: const TextStyle(
-                  color: AppColors.onPrimary,
-                  fontSize: 15,
-                  fontWeight: FontWeight.w700,
-                  shadows: _playerTextShadows,
+      child: IgnorePointer(
+        ignoring: scrubbing,
+        child: Opacity(
+          opacity: scrubbing ? 0 : 1,
+          child: Container(
+            key: const Key('player-controls-top'),
+            height: _topBarHeight,
+            padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 8),
+            child: Row(
+              children: [
+                if (actions.onBack != null)
+                  _TopButton(
+                    key: const Key('player-back'),
+                    tooltip: data.l10n.backToSeries,
+                    icon: Icons.chevron_left_rounded,
+                    onPressed: actions.onBack!,
+                  )
+                else
+                  const SizedBox(width: _topButtonSize),
+                const SizedBox(width: 8),
+                Expanded(
+                  child: Text(
+                    data.l10n.episodeLabel(data.episode.number),
+                    key: const Key('player-episode-heading'),
+                    maxLines: 1,
+                    overflow: TextOverflow.ellipsis,
+                    style: const TextStyle(
+                      color: AppColors.onPrimary,
+                      fontSize: 15,
+                      fontWeight: FontWeight.w700,
+                      shadows: _playerTextShadows,
+                    ),
+                  ),
                 ),
-              ),
+                _SpeedEntry(
+                  key: const Key('player-speed-entry'),
+                  speed: data.playbackSpeed,
+                  onTap: actions.onSpeed,
+                ),
+                const SizedBox(width: 8),
+                _TopButton(
+                  key: const Key('player-more'),
+                  tooltip: data.l10n.more,
+                  icon: Icons.more_vert_rounded,
+                  onPressed: actions.onMore,
+                ),
+              ],
             ),
-            _SpeedEntry(
-              key: const Key('player-speed-entry'),
-              speed: data.playbackSpeed,
-              onTap: actions.onSpeed,
-            ),
-            const SizedBox(width: 8),
-            _TopButton(
-              key: const Key('player-more'),
-              tooltip: data.l10n.more,
-              icon: Icons.more_vert_rounded,
-              onPressed: actions.onMore,
-            ),
-          ],
+          ),
         ),
       ),
     );
@@ -142,42 +159,49 @@ class PlayerPlaybackOverlay extends StatelessWidget {
     return Positioned(
       right: AppDimens.spaceMd,
       top: MediaQuery.sizeOf(context).height * (compact ? 0.30 : 0.43),
-      child: InteractionRail(
-        key: const Key('player-interaction-rail'),
-        items: [
-          InteractionRailItem(
-            key: const Key('player-rail-save'),
-            asset: 'assets/icon/rail/rail_save.png',
-            label: data.l10n.favorite,
-            count: data.favoriteCount,
-            countKey: const Key('player-rail-save-count'),
-            selected: data.saved,
-            onTap: actions.onSave,
+      child: IgnorePointer(
+        ignoring: scrubbing,
+        child: Opacity(
+          opacity: scrubbing ? 0 : 1,
+          child: InteractionRail(
+            key: const Key('player-interaction-rail'),
+            items: [
+              InteractionRailItem(
+                key: const Key('player-rail-save'),
+                asset: 'assets/icon/rail/rail_save.png',
+                label: data.l10n.favorite,
+                count: data.favoriteCount,
+                countKey: const Key('player-rail-save-count'),
+                selected: data.saved,
+                onTap: actions.onSave,
+              ),
+              InteractionRailItem(
+                key: const Key('player-rail-comments'),
+                asset: 'assets/icon/rail/rail_comment.png',
+                label: data.l10n.comments,
+                count: data.commentCount,
+                countKey: const Key('player-rail-comments-count'),
+                onTap: actions.onComments,
+              ),
+              InteractionRailItem(
+                key: const Key('player-rail-like'),
+                asset: 'assets/icon/rail/rail_like.png',
+                label: data.l10n.like,
+                count: data.likeCount,
+                countKey: const Key('player-rail-like-count'),
+                selected: data.liked,
+                selectedColor: AppColors.doubleTapHeartRed,
+                onTap: actions.onLike,
+              ),
+              InteractionRailItem(
+                key: const Key('player-rail-share'),
+                asset: 'assets/icon/rail/rail_share.png',
+                label: data.l10n.share,
+                onTap: actions.onShare,
+              ),
+            ],
           ),
-          InteractionRailItem(
-            key: const Key('player-rail-comments'),
-            asset: 'assets/icon/rail/rail_comment.png',
-            label: data.l10n.comments,
-            count: data.commentCount,
-            countKey: const Key('player-rail-comments-count'),
-            onTap: actions.onComments,
-          ),
-          InteractionRailItem(
-            key: const Key('player-rail-like'),
-            asset: 'assets/icon/rail/rail_like.png',
-            label: data.l10n.like,
-            count: data.likeCount,
-            countKey: const Key('player-rail-like-count'),
-            selected: data.liked,
-            onTap: actions.onLike,
-          ),
-          InteractionRailItem(
-            key: const Key('player-rail-share'),
-            asset: 'assets/icon/rail/rail_share.png',
-            label: data.l10n.share,
-            onTap: actions.onShare,
-          ),
-        ],
+        ),
       ),
     );
   }
@@ -190,11 +214,17 @@ class PlayerPlaybackOverlay extends StatelessWidget {
       child: Column(
         mainAxisSize: MainAxisSize.min,
         children: [
-          if (controlsVisible) _bottomInfo(context),
+          Offstage(
+            offstage: !controlsVisible || scrubbing,
+            child: _bottomInfo(context),
+          ),
           if (data.boosting) _boostHint(),
           _bottomProgress(),
-          // 加速态只保留进度条与提示，便于全屏快进时看清画面。
-          if (!data.boosting) _bottomActions(),
+          // 加速或拖动进度时只留进度条，避免挡住画面。
+          Offstage(
+            offstage: data.boosting || scrubbing,
+            child: _bottomActions(),
+          ),
         ],
       ),
     );
@@ -241,12 +271,16 @@ class PlayerPlaybackOverlay extends StatelessWidget {
         children: [
           _detailRow(series),
           const SizedBox(height: 4),
-          _EpisodeSynopsis(
-            key: const Key('player-episode-synopsis'),
-            l10n: data.l10n,
-            episodeNumber: data.episode.number,
-            synopsis: synopsis,
-            authorNote: data.authorNote,
+          Padding(
+            padding: const EdgeInsets.only(right: _synopsisRailInset),
+            child: _EpisodeSynopsis(
+              key: const Key('player-episode-synopsis'),
+              l10n: data.l10n,
+              drama: data.drama,
+              episodeNumber: data.episode.number,
+              synopsis: synopsis,
+              authorNote: data.authorNote,
+            ),
           ),
         ],
       ),
@@ -263,8 +297,15 @@ class PlayerPlaybackOverlay extends StatelessWidget {
         semanticsLabel: data.l10n.seekVideo,
         showTimes: true,
         compact: true,
-        inactiveTrackColor: Colors.white24,
+        locked: data.locked,
+        thumbnailService: data.thumbnailService,
+        spriteAxisService: data.spriteAxisService,
+        thumbnailsUrl: data.episode.thumbnailsUrl,
+        episodeId: data.episode.id,
+        posterUrl: data.drama.posterUrl,
+        inactiveTrackColor: AppColors.inactiveTrack,
         onScrubStart: actions.onScrubStart,
+        onScrubEnd: actions.onScrubEnd,
         onSeek: actions.onSeek,
       ),
     );
@@ -272,7 +313,7 @@ class PlayerPlaybackOverlay extends StatelessWidget {
 
   Widget _detailRow(String series) {
     return Material(
-      color: Colors.transparent,
+      color: AppColors.transparent,
       child: InkWell(
         key: const Key('player-open-detail'),
         onTap: actions.onDetail,
diff --git a/lib/pages/player/widgets/player_overlay_models.dart b/lib/pages/player/widgets/player_overlay_models.dart
index 0bdc23e..0e26878 100644
--- a/lib/pages/player/widgets/player_overlay_models.dart
+++ b/lib/pages/player/widgets/player_overlay_models.dart
@@ -1,9 +1,12 @@
 // Author: fruit.com.cn
 
+import 'package:flutter/foundation.dart';
 import 'package:flutter/widgets.dart';
 import 'package:video_player/video_player.dart';
 
 import '../../../core/data/models/drama.dart';
+import '../../../core/data/services/playback_thumbnail_service.dart';
+import '../../../core/data/services/sprite_thumbnail_axis.dart';
 import '../../../l10n/app_localizations.dart';
 
 /// 播放浮层展示数据。
@@ -23,6 +26,9 @@ class PlayerOverlayData {
     required this.playbackSpeed,
     required this.totalEpisodes,
     required this.boosting,
+    required this.locked,
+    this.thumbnailService,
+    this.spriteAxisService,
     this.authorNote = '',
   });
 
@@ -35,8 +41,8 @@ class PlayerOverlayData {
   /// 当前剧集。
   final Episode episode;
 
-  /// 当前播放器。
-  final VideoPlayerController? controller;
+  /// 当前播放器进度。
+  final ValueListenable<VideoPlayerValue>? controller;
 
   /// 是否已点赞。
   final bool liked;
@@ -65,6 +71,13 @@ class PlayerOverlayData {
   /// 是否处于长按加速态。
   final bool boosting;
 
+  /// 当前剧集是否锁定。
+  final bool locked;
+
+  /// 拖动进度时按当前集和时间点取帧。
+  final PlaybackThumbnailService? thumbnailService;
+  final SpriteThumbnailAxisService? spriteAxisService;
+
   /// 作者声明；没有后端字段时为空。
   final String authorNote;
 }
@@ -86,6 +99,7 @@ class PlayerOverlayActions {
     required this.onShare,
     required this.onMore,
     required this.onScrubStart,
+    required this.onScrubEnd,
     required this.onSeek,
     required this.onLongPressCenter,
     required this.onBoostStart,
@@ -131,6 +145,9 @@ class PlayerOverlayActions {
   /// 开始拖动进度。
   final VoidCallback? onScrubStart;
 
+  /// 结束拖动进度。
+  final VoidCallback? onScrubEnd;
+
   /// 提交进度跳转。
   final Future<void> Function(Duration)? onSeek;
 
diff --git a/lib/pages/player/widgets/player_overlay_parts.dart b/lib/pages/player/widgets/player_overlay_parts.dart
index 383365d..7bd0744 100644
--- a/lib/pages/player/widgets/player_overlay_parts.dart
+++ b/lib/pages/player/widgets/player_overlay_parts.dart
@@ -22,7 +22,7 @@ class _TopButton extends StatelessWidget {
         tooltip: tooltip,
         padding: EdgeInsets.zero,
         style: IconButton.styleFrom(
-          backgroundColor: const Color(0x80000000),
+          backgroundColor: AppColors.controlScrim,
           foregroundColor: AppColors.onPrimary,
         ),
         onPressed: onPressed,
@@ -41,7 +41,7 @@ class _SpeedEntry extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Material(
-      color: const Color(0x80000000),
+      color: AppColors.controlScrim,
       borderRadius: BorderRadius.circular(999),
       child: InkWell(
         onTap: onTap,
@@ -109,12 +109,14 @@ class _EpisodeSynopsis extends StatefulWidget {
   const _EpisodeSynopsis({
     super.key,
     required this.l10n,
+    required this.drama,
     required this.episodeNumber,
     required this.synopsis,
     required this.authorNote,
   });
 
   final AppLocalizations l10n;
+  final Drama drama;
   final int episodeNumber;
   final String synopsis;
   final String authorNote;
@@ -125,6 +127,9 @@ class _EpisodeSynopsis extends StatefulWidget {
 
 class _EpisodeSynopsisState extends State<_EpisodeSynopsis> {
   bool _expanded = false;
+  String? _fullSynopsis;
+  int _detailRequest = 0;
+  bool _detailRequested = false;
 
   /// 「第 n 集」、分隔符与简介正文共用同一套灰字规格。
   static const TextStyle _lineStyle = TextStyle(
@@ -134,53 +139,114 @@ class _EpisodeSynopsisState extends State<_EpisodeSynopsis> {
     height: 1.35,
     shadows: _playerTextShadows,
   );
+  static const TextStyle _linkStyle = TextStyle(
+    color: AppColors.textPrimary,
+    fontSize: 12,
+    fontWeight: FontWeight.w700,
+    shadows: _playerTextShadows,
+  );
+  static const int _collapsedMaxLines = 2;
+  static const double _expandGap = 6;
+  static const double _expandTrailing = 28;
+  static const double _separatorGap = 6;
+
+  String get _synopsis => _fullSynopsis ?? widget.synopsis;
+
+  @override
+  void didChangeDependencies() {
+    super.didChangeDependencies();
+    if (_detailRequested || widget.drama.detailLoaded) return;
+    _detailRequested = true;
+    unawaited(_loadFullSynopsis());
+  }
+
+  @override
+  void didUpdateWidget(covariant _EpisodeSynopsis oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    if (oldWidget.drama.id == widget.drama.id &&
+        oldWidget.synopsis == widget.synopsis) {
+      return;
+    }
+    _fullSynopsis = null;
+    _expanded = false;
+    _detailRequested = !widget.drama.detailLoaded;
+    if (_detailRequested) unawaited(_loadFullSynopsis());
+  }
+
+  Future<void> _loadFullSynopsis() async {
+    if (widget.drama.detailLoaded) return;
+    final request = ++_detailRequest;
+    final CatalogController catalog;
+    try {
+      catalog = context.read<CatalogController>();
+    } catch (_) {
+      return;
+    }
+    try {
+      final detail = await catalog.requireDetail(widget.drama);
+      if (!mounted || request != _detailRequest) return;
+      final full = localizedDramaSynopsis(widget.l10n, detail);
+      if (full == widget.synopsis) return;
+      setState(() => _fullSynopsis = full);
+    } catch (_) {
+      // 详情失败时继续用列表里的简介。
+    }
+  }
 
   @override
   Widget build(BuildContext context) {
-    return Column(
-      mainAxisSize: MainAxisSize.min,
-      crossAxisAlignment: CrossAxisAlignment.start,
+    return LayoutBuilder(
+      builder: (context, constraints) => _block(constraints.maxWidth),
+    );
+  }
+
+  Widget _block(double maxWidth) {
+    final label = widget.l10n.episodeLabel(widget.episodeNumber);
+    if (_expanded) return _expandedBlock(label, maxWidth);
+    return _collapsedBlock(label, maxWidth);
+  }
+
+  Widget _collapsedBlock(String label, double maxWidth) {
+    final link = widget.l10n.expandSynopsis;
+    final body = _collapsedBody(label, maxWidth, link);
+    final text = _synopsisText(label, body, link: null, expanded: false);
+    if (body == _synopsis) return text;
+    final caret = _caret(label, body, maxWidth);
+    return Stack(
+      clipBehavior: Clip.none,
       children: [
-        Row(
-          crossAxisAlignment: CrossAxisAlignment.baseline,
-          textBaseline: TextBaseline.alphabetic,
-          children: [
-            Text(
-              widget.l10n.episodeLabel(widget.episodeNumber),
-              key: const Key('player-episode-label'),
-              maxLines: 1,
-              overflow: TextOverflow.ellipsis,
-              style: _lineStyle,
-            ),
-            Padding(
-              padding: const EdgeInsets.symmetric(horizontal: 6),
-              child: Text(
-                '|',
-                maxLines: 1,
-                style: _lineStyle.copyWith(
-                  color: AppColors.playerMuted.withValues(alpha: 0.6),
-                ),
-              ),
-            ),
-            Flexible(
-              child: Text(
-                widget.synopsis,
-                key: const Key('player-synopsis'),
-                maxLines: _expanded ? null : 1,
-                overflow: _expanded ? TextOverflow.clip : TextOverflow.ellipsis,
-                style: _lineStyle,
-              ),
-            ),
-            if (!_expanded) _toggle(widget.l10n.expandSynopsis),
-          ],
+        text,
+        Positioned(
+          left: caret.dx,
+          top: caret.dy,
+          child: Padding(
+            key: const Key('player-synopsis-gap'),
+            padding: const EdgeInsets.only(left: _expandGap),
+            child: _toggle(link),
+          ),
         ),
-        if (_expanded) ...[
+      ],
+    );
+  }
+
+  Widget _expandedBlock(String label, double maxWidth) {
+    return SizedBox(
+      width: maxWidth,
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        crossAxisAlignment: CrossAxisAlignment.stretch,
+        children: [
+          _synopsisText(label, _synopsis, link: null, expanded: true),
+          Align(
+            alignment: Alignment.centerRight,
+            child: _toggle(widget.l10n.showLess),
+          ),
           if (widget.authorNote.isNotEmpty) ...[
             const SizedBox(height: 4),
             Text(
               widget.authorNote,
               key: const Key('player-author-note'),
-              maxLines: 2,
+              maxLines: _collapsedMaxLines,
               overflow: TextOverflow.ellipsis,
               style: const TextStyle(
                 color: AppColors.playerMuted,
@@ -189,31 +255,181 @@ class _EpisodeSynopsisState extends State<_EpisodeSynopsis> {
               ),
             ),
           ],
-          _toggle(widget.l10n.showLess),
         ],
-      ],
+      ),
     );
   }
 
+  Widget _synopsisText(
+    String label,
+    String body, {
+    required String? link,
+    required bool expanded,
+  }) {
+    return Text.rich(
+      TextSpan(
+        style: _lineStyle,
+        children: _spans(label, body, link),
+      ),
+      key: const Key('player-synopsis'),
+      style: _lineStyle,
+      maxLines: expanded ? null : _collapsedMaxLines,
+      overflow: expanded ? TextOverflow.clip : TextOverflow.ellipsis,
+    );
+  }
+
+  List<InlineSpan> _spans(String label, String body, String? link) {
+    return [
+      WidgetSpan(
+        alignment: PlaceholderAlignment.baseline,
+        baseline: TextBaseline.alphabetic,
+        child: Text(
+          label,
+          key: const Key('player-episode-label'),
+          style: _lineStyle,
+        ),
+      ),
+      WidgetSpan(
+        alignment: PlaceholderAlignment.baseline,
+        baseline: TextBaseline.alphabetic,
+        child: Padding(
+          padding: const EdgeInsets.symmetric(horizontal: _separatorGap),
+          child: Text(
+            '|',
+            style: _lineStyle.copyWith(
+              color: AppColors.playerMuted.withValues(alpha: 0.6),
+            ),
+          ),
+        ),
+      ),
+      TextSpan(text: body, style: _lineStyle),
+      if (link != null)
+        WidgetSpan(
+          alignment: PlaceholderAlignment.baseline,
+          baseline: TextBaseline.alphabetic,
+          child: Padding(
+            key: const Key('player-synopsis-gap'),
+            padding: const EdgeInsets.only(left: _expandGap),
+            child: _toggle(link),
+          ),
+        ),
+    ];
+  }
+
+  String _collapsedBody(String label, double maxWidth, String link) {
+    if (_fits(label, _synopsis, maxWidth, reserve: 0)) {
+      return _synopsis;
+    }
+    final reserve =
+        _textWidth(link, _linkStyle) + _expandGap + _expandTrailing;
+    var low = 0;
+    var high = _synopsis.length;
+    var best = '…';
+    while (low <= high) {
+      final mid = (low + high) >> 1;
+      final slice = '${_synopsis.substring(0, mid)}…';
+      if (_fits(label, slice, maxWidth, reserve: reserve)) {
+        best = slice;
+        low = mid + 1;
+      } else {
+        high = mid - 1;
+      }
+    }
+    return best;
+  }
+
+  bool _fits(
+    String label,
+    String body,
+    double maxWidth, {
+    required double reserve,
+  }) {
+    final painter = TextPainter(
+      text: TextSpan(
+        children: [
+          TextSpan(text: label, style: _lineStyle),
+          const WidgetSpan(
+            alignment: PlaceholderAlignment.baseline,
+            baseline: TextBaseline.alphabetic,
+            child: SizedBox(width: _separatorGap),
+          ),
+          TextSpan(
+            text: '|',
+            style: _lineStyle.copyWith(
+              color: AppColors.playerMuted.withValues(alpha: 0.6),
+            ),
+          ),
+          const WidgetSpan(
+            alignment: PlaceholderAlignment.baseline,
+            baseline: TextBaseline.alphabetic,
+            child: SizedBox(width: _separatorGap),
+          ),
+          TextSpan(text: body, style: _lineStyle),
+          if (reserve > 0)
+            WidgetSpan(
+              alignment: PlaceholderAlignment.baseline,
+              baseline: TextBaseline.alphabetic,
+              child: SizedBox(width: reserve),
+            ),
+        ],
+      ),
+      maxLines: _collapsedMaxLines,
+      textDirection: TextDirection.ltr,
+    );
+    painter.setPlaceholderDimensions(_slots(reserve));
+    painter.layout(maxWidth: maxWidth);
+    return !painter.didExceedMaxLines;
+  }
+
+  List<PlaceholderDimensions> _slots(double reserve) {
+    return [
+      const PlaceholderDimensions(
+        size: Size(_separatorGap, 1),
+        alignment: PlaceholderAlignment.baseline,
+        baseline: TextBaseline.alphabetic,
+      ),
+      const PlaceholderDimensions(
+        size: Size(_separatorGap, 1),
+        alignment: PlaceholderAlignment.baseline,
+        baseline: TextBaseline.alphabetic,
+      ),
+      if (reserve > 0)
+        PlaceholderDimensions(
+          size: Size(reserve, _lineStyle.fontSize ?? 12),
+          alignment: PlaceholderAlignment.baseline,
+          baseline: TextBaseline.alphabetic,
+        ),
+    ];
+  }
+
+  Offset _caret(String label, String body, double maxWidth) {
+    final painter = TextPainter(
+      text: TextSpan(children: _spans(label, body, null)),
+      maxLines: _collapsedMaxLines,
+      textDirection: TextDirection.ltr,
+    );
+    painter.setPlaceholderDimensions(_slots(0));
+    painter.layout(maxWidth: maxWidth);
+    return painter.getOffsetForCaret(
+      TextPosition(offset: painter.plainText.length),
+      Rect.zero,
+    );
+  }
+  double _textWidth(String text, TextStyle style) {
+    final painter = TextPainter(
+      text: TextSpan(text: text, style: style),
+      maxLines: 1,
+      textDirection: TextDirection.ltr,
+    )..layout();
+    return painter.width;
+  }
+
   Widget _toggle(String label) {
     return InkWell(
       key: const Key('player-synopsis-toggle'),
       onTap: () => setState(() => _expanded = !_expanded),
       borderRadius: BorderRadius.circular(4),
-      child: Padding(
-        padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 1),
-        child: Text(
-          label,
-          maxLines: 1,
-          overflow: TextOverflow.ellipsis,
-          style: const TextStyle(
-            color: AppColors.blue,
-            fontSize: 12,
-            fontWeight: FontWeight.w700,
-            shadows: _playerTextShadows,
-          ),
-        ),
-      ),
+      child: Text(label, maxLines: 1, style: _linkStyle),
     );
   }
 }
diff --git a/lib/pages/player/widgets/player_unlock_sheet.dart b/lib/pages/player/widgets/player_unlock_sheet.dart
index 4cdedc4..a47579e 100644
--- a/lib/pages/player/widgets/player_unlock_sheet.dart
+++ b/lib/pages/player/widgets/player_unlock_sheet.dart
@@ -134,7 +134,7 @@ class PlayerBlockedNotice extends StatelessWidget {
 
   Widget _coinLabel(AppLocalizations l10n) => DecoratedBox(
     decoration: BoxDecoration(
-      color: AppColors.goldCard,
+      color: AppColors.homeCrownGold,
       borderRadius: BorderRadius.circular(999),
     ),
     child: Padding(
diff --git a/lib/pages/player/widgets/player_video_surface.dart b/lib/pages/player/widgets/player_video_surface.dart
index 1226e3f..513dda7 100644
--- a/lib/pages/player/widgets/player_video_surface.dart
+++ b/lib/pages/player/widgets/player_video_surface.dart
@@ -4,6 +4,8 @@ import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:video_player/video_player.dart';
 
+import '../../../core/theme/app_colors.dart';
+
 const Duration _videoFadeDuration = Duration(milliseconds: 200);
 const double _errorHorizontal = 32;
 const int _errorMaxLines = 3;
@@ -15,13 +17,11 @@ class PlayerVideoSurface extends StatefulWidget {
     required this.controller,
     required this.videoUrl,
     required this.theater,
-    required this.onTap,
   });
 
   final VideoPlayerController? controller;
   final String videoUrl;
   final bool theater;
-  final VoidCallback onTap;
 
   @override
   State<PlayerVideoSurface> createState() => _PlayerVideoSurfaceState();
@@ -55,7 +55,7 @@ class _PlayerVideoSurfaceState extends State<PlayerVideoSurface> {
       children: [
         const ColoredBox(
           key: Key('player-fallback-background'),
-          color: Colors.black,
+          color: AppColors.mediaBlack,
         ),
         AnimatedOpacity(
           key: const Key('player-video-opacity'),
@@ -67,7 +67,6 @@ class _PlayerVideoSurfaceState extends State<PlayerVideoSurface> {
                   controller: controller,
                   value: value!,
                   theater: widget.theater,
-                  onTap: widget.onTap,
                 )
               : const SizedBox.expand(),
         ),
@@ -81,7 +80,7 @@ class _PlayerVideoSurfaceState extends State<PlayerVideoSurface> {
                 maxLines: _errorMaxLines,
                 overflow: TextOverflow.ellipsis,
                 textAlign: TextAlign.center,
-                style: const TextStyle(color: Colors.white70, fontSize: 13),
+                style: const TextStyle(color: AppColors.muted, fontSize: 13),
               ),
             ),
           ),
@@ -139,26 +138,20 @@ class _VideoLayer extends StatelessWidget {
     required this.controller,
     required this.value,
     required this.theater,
-    required this.onTap,
   });
 
   final VideoPlayerController controller;
   final VideoPlayerValue value;
   final bool theater;
-  final VoidCallback onTap;
 
   @override
   Widget build(BuildContext context) {
-    return GestureDetector(
-      behavior: HitTestBehavior.opaque,
-      onTap: onTap,
-      child: FittedBox(
-        fit: theater ? BoxFit.contain : BoxFit.cover,
-        child: SizedBox(
-          width: value.size.width,
-          height: value.size.height,
-          child: VideoPlayer(controller, key: ValueKey(controller)),
-        ),
+    return FittedBox(
+      fit: theater ? BoxFit.contain : BoxFit.cover,
+      child: SizedBox(
+        width: value.size.width,
+        height: value.size.height,
+        child: VideoPlayer(controller, key: ValueKey(controller)),
       ),
     );
   }
diff --git a/lib/pages/player/widgets/scrub_preview_card.dart b/lib/pages/player/widgets/scrub_preview_card.dart
new file mode 100644
index 0000000..266d2db
--- /dev/null
+++ b/lib/pages/player/widgets/scrub_preview_card.dart
@@ -0,0 +1,312 @@
+// Author: fruit.com.cn
+
+import 'dart:async';
+import 'dart:typed_data';
+import 'dart:ui' as ui;
+
+import 'package:flutter/material.dart';
+
+import '../../../core/data/services/playback_thumbnail_service.dart';
+import '../../../core/data/services/sprite_thumbnail_axis.dart';
+import '../../../core/theme/app_colors.dart';
+import '../../../core/widgets/remote_image.dart';
+
+const double scrubPreviewWidth = 96;
+const double scrubPreviewSafeMargin = 12;
+const double _portraitFrameAspect = 9 / 16;
+
+/// 把预览卡片限制在进度条可用宽度内。
+double scrubPreviewLeft({
+  required double trackWidth,
+  required double fraction,
+  double cardWidth = scrubPreviewWidth,
+  double safeMargin = scrubPreviewSafeMargin,
+}) {
+  final maxLeft = trackWidth - cardWidth - safeMargin;
+  if (maxLeft < safeMargin) {
+    return ((trackWidth - cardWidth) / 2).clamp(0.0, trackWidth).toDouble();
+  }
+  final requested = trackWidth * fraction.clamp(0.0, 1.0) - cardWidth / 2;
+  return requested.clamp(safeMargin, maxLeft).toDouble();
+}
+
+/// 拖动进度时覆盖在轨道上方的单帧预览。
+class ScrubPreviewCard extends StatefulWidget {
+  const ScrubPreviewCard({
+    super.key,
+    required this.service,
+    required this.episodeId,
+    required this.posterUrl,
+    required this.position,
+    required this.duration,
+    this.spriteAxisService,
+    this.thumbnailsUrl,
+  });
+
+  final PlaybackThumbnailService service;
+  final SpriteThumbnailAxisSource? spriteAxisService;
+  final String? thumbnailsUrl;
+  final String episodeId;
+  final String posterUrl;
+  final Duration position;
+  final Duration duration;
+
+  @override
+  State<ScrubPreviewCard> createState() => _ScrubPreviewCardState();
+}
+
+class _ScrubPreviewCardState extends State<ScrubPreviewCard> {
+  ByteData? _fallbackFrame;
+  int _requestSerial = 0;
+  int? _requestedBucket;
+  String? _requestedEpisodeId;
+
+  @override
+  void initState() {
+    super.initState();
+    widget.spriteAxisService?.addListener(_handleSpriteAxisChanged);
+    _prepareSprite();
+    _syncFallbackSource();
+  }
+
+  @override
+  void didUpdateWidget(covariant ScrubPreviewCard oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    if (oldWidget.spriteAxisService != widget.spriteAxisService) {
+      oldWidget.spriteAxisService?.removeListener(_handleSpriteAxisChanged);
+      widget.spriteAxisService?.addListener(_handleSpriteAxisChanged);
+    }
+    if (oldWidget.thumbnailsUrl != widget.thumbnailsUrl ||
+        oldWidget.position != widget.position) {
+      _prepareSprite();
+    }
+    if (oldWidget.service != widget.service ||
+        oldWidget.episodeId != widget.episodeId ||
+        oldWidget.thumbnailsUrl != widget.thumbnailsUrl) {
+      _resetFallback();
+      _syncFallbackSource();
+      return;
+    }
+    if (_requestedBucket != playbackThumbnailBucket(widget.position)) {
+      _fallbackFrame = null;
+      _syncFallbackSource();
+    } else if (_fallbackFrame != null || _shouldUseLocalFallback()) {
+      unawaited(widget.service.thumbnail(widget.episodeId, widget.position));
+    }
+  }
+
+  @override
+  void dispose() {
+    widget.spriteAxisService?.removeListener(_handleSpriteAxisChanged);
+    _requestSerial++;
+    widget.service.cancelPending();
+    super.dispose();
+  }
+
+  void _prepareSprite() {
+    final service = widget.spriteAxisService;
+    if (service == null) return;
+    unawaited(service.prepareAt(widget.thumbnailsUrl, widget.position));
+  }
+
+  void _handleSpriteAxisChanged() {
+    if (!mounted) return;
+    if (_spriteFrame != null) {
+      widget.service.cancelPending();
+    }
+    setState(() {});
+    _syncFallbackSource();
+  }
+
+  SpriteThumbnailFrame? get _spriteFrame => widget.spriteAxisService
+      ?.cachedFrameAt(widget.thumbnailsUrl, widget.position);
+
+  bool _shouldUseLocalFallback() {
+    if (_spriteFrame != null) return false;
+    final url = widget.thumbnailsUrl?.trim() ?? '';
+    if (url.isEmpty || widget.spriteAxisService == null) return true;
+    return widget.spriteAxisService!.hasAxis(widget.thumbnailsUrl);
+  }
+
+  void _syncFallbackSource() {
+    if (_spriteFrame != null) {
+      widget.service.cancelPending();
+      return;
+    }
+    if (!_shouldUseLocalFallback()) return;
+    _requestFallbackFrame();
+  }
+
+  void _requestFallbackFrame() {
+    final bucket = playbackThumbnailBucket(widget.position);
+    if (_requestedBucket == bucket &&
+        _requestedEpisodeId == widget.episodeId &&
+        (_fallbackFrame != null || _requestSerial > 0)) {
+      return;
+    }
+    _requestedBucket = bucket;
+    _requestedEpisodeId = widget.episodeId;
+    final serial = ++_requestSerial;
+    widget.service.thumbnail(widget.episodeId, widget.position).then((frame) {
+      if (!mounted || serial != _requestSerial || _spriteFrame != null) return;
+      setState(() => _fallbackFrame = frame);
+    });
+  }
+
+  void _resetFallback() {
+    widget.service.cancelPending();
+    _fallbackFrame = null;
+    _requestedBucket = null;
+    _requestedEpisodeId = null;
+    _requestSerial++;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final spriteFrame = _spriteFrame;
+    final stage = decideScrubPreviewStage(
+      hasThumbnailsUrl: (widget.thumbnailsUrl?.trim().isNotEmpty ?? false),
+      hasSpriteFrame: spriteFrame != null,
+      hasAxis: widget.spriteAxisService?.hasAxis(widget.thumbnailsUrl) ?? false,
+      hasLocalFrame: _fallbackFrame != null,
+    );
+    return Container(
+      key: const Key('scrub-preview-card'),
+      width: scrubPreviewWidth,
+      decoration: BoxDecoration(
+        color: AppColors.card,
+        borderRadius: BorderRadius.circular(8),
+        border: Border.all(color: AppColors.onPrimary, width: 1),
+      ),
+      child: ClipRRect(
+        borderRadius: BorderRadius.circular(7),
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Container(
+              width: double.infinity,
+              padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 4),
+              color: AppColors.scrubPreviewScrim,
+              child: Text(
+                '${_format(widget.position)} / ${_format(widget.duration)}',
+                key: const Key('scrub-preview-time'),
+                textAlign: TextAlign.center,
+                maxLines: 1,
+                overflow: TextOverflow.ellipsis,
+                style: const TextStyle(
+                  color: AppColors.onPrimary,
+                  fontSize: 11,
+                  fontWeight: FontWeight.w600,
+                  height: 1.2,
+                ),
+              ),
+            ),
+            AspectRatio(
+              key: const Key('scrub-preview-frame-box'),
+              aspectRatio: _frameAspect(spriteFrame),
+              child: Stack(
+                fit: StackFit.expand,
+                children: [
+                  RemoteImage(
+                    widget.posterUrl,
+                    key: const Key('scrub-preview-poster'),
+                    fit: BoxFit.cover,
+                    fallbackColor: AppColors.bar,
+                  ),
+                  if (stage == ScrubPreviewStage.sprite && spriteFrame != null)
+                    SpriteCropPreview(
+                      key: const Key('scrub-preview-sprite'),
+                      image: spriteFrame.image,
+                      sourceRect: spriteFrame.sourceRect,
+                    ),
+                  if (stage == ScrubPreviewStage.localFrame &&
+                      _fallbackFrame != null)
+                    Image.memory(
+                      _fallbackFrame!.buffer.asUint8List(
+                        _fallbackFrame!.offsetInBytes,
+                        _fallbackFrame!.lengthInBytes,
+                      ),
+                      key: const Key('scrub-preview-frame'),
+                      fit: BoxFit.cover,
+                      cacheWidth: 240,
+                      gaplessPlayback: true,
+                      errorBuilder: (_, _, _) => const SizedBox.shrink(),
+                    ),
+                ],
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+double _frameAspect(SpriteThumbnailFrame? frame) {
+  final rect = frame?.sourceRect;
+  if (rect == null || rect.width <= 0 || rect.height <= 0) {
+    return _portraitFrameAspect;
+  }
+  return rect.width / rect.height;
+}
+
+/// 对已解码 sprite 做 sourceRect 裁剪，不触发再次解码。
+class SpriteCropPreview extends StatelessWidget {
+  const SpriteCropPreview({
+    super.key,
+    required this.image,
+    required this.sourceRect,
+  });
+
+  final ui.Image image;
+  final ui.Rect sourceRect;
+
+  @override
+  Widget build(BuildContext context) => CustomPaint(
+    painter: _SpriteCropPainter(image: image, sourceRect: sourceRect),
+  );
+}
+
+class _SpriteCropPainter extends CustomPainter {
+  const _SpriteCropPainter({required this.image, required this.sourceRect});
+
+  final ui.Image image;
+  final ui.Rect sourceRect;
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    final fitted = applyBoxFit(BoxFit.cover, sourceRect.size, size);
+    final sourceOffset = Alignment.center.inscribe(
+      fitted.source,
+      Offset.zero & sourceRect.size,
+    );
+    final source = Rect.fromLTWH(
+      sourceRect.left + sourceOffset.left,
+      sourceRect.top + sourceOffset.top,
+      fitted.source.width,
+      fitted.source.height,
+    );
+    final destination = Alignment.center.inscribe(
+      fitted.destination,
+      Offset.zero & size,
+    );
+    canvas.drawImageRect(
+      image,
+      source,
+      destination,
+      Paint()
+        ..filterQuality = FilterQuality.low
+        ..isAntiAlias = false,
+    );
+  }
+
+  @override
+  bool shouldRepaint(covariant _SpriteCropPainter oldDelegate) =>
+      oldDelegate.image != image || oldDelegate.sourceRect != sourceRect;
+}
+
+String _format(Duration value) {
+  final minutes = value.inMinutes.remainder(60).toString().padLeft(2, '0');
+  final seconds = value.inSeconds.remainder(60).toString().padLeft(2, '0');
+  return '$minutes:$seconds';
+}
diff --git a/lib/pages/player/widgets/seek_progress_bar.dart b/lib/pages/player/widgets/seek_progress_bar.dart
index a4fcbb0..0e23564 100644
--- a/lib/pages/player/widgets/seek_progress_bar.dart
+++ b/lib/pages/player/widgets/seek_progress_bar.dart
@@ -6,8 +6,13 @@ import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:video_player/video_player.dart';
 
+import '../../../core/data/services/playback_thumbnail_service.dart';
+import '../../../core/data/services/sprite_thumbnail_axis.dart';
 import '../../../core/theme/app_colors.dart';
 import 'loading_progress_track.dart';
+import 'scrub_preview_card.dart';
+
+const Key _inactiveTrackKey = Key('progress-inactive');
 
 /// Keeps seeks within the playable range so dragging to the edge does not
 /// trigger the player's completion callback before playback resumes.
@@ -25,19 +30,33 @@ class SeekProgressBar extends StatefulWidget {
     required this.valueListenable,
     required this.semanticsLabel,
     this.onScrubStart,
+    this.onScrubEnd,
     this.onSeek,
     this.showTimes = true,
     this.compact = false,
     this.inactiveTrackColor = AppColors.border,
+    this.locked = false,
+    this.thumbnailService,
+    this.spriteAxisService,
+    this.episodeId,
+    this.posterUrl = '',
+    this.thumbnailsUrl,
   });
 
   final ValueListenable<VideoPlayerValue>? valueListenable;
   final String semanticsLabel;
   final VoidCallback? onScrubStart;
+  final VoidCallback? onScrubEnd;
   final Future<void> Function(Duration)? onSeek;
   final bool showTimes;
   final bool compact;
   final Color inactiveTrackColor;
+  final bool locked;
+  final PlaybackThumbnailService? thumbnailService;
+  final SpriteThumbnailAxisService? spriteAxisService;
+  final String? episodeId;
+  final String posterUrl;
+  final String? thumbnailsUrl;
 
   @override
   State<SeekProgressBar> createState() => _SeekProgressBarState();
@@ -49,6 +68,10 @@ class _SeekProgressBarState extends State<SeekProgressBar> {
   final _previewFraction = ValueNotifier<double?>(null);
   Timer? _bufferTimer;
   bool _buffering = false;
+  bool _dragging = false;
+  bool _pointerMoved = false;
+  Offset? _pointerStart;
+  double? _dragStartFraction;
 
   @override
   void initState() {
@@ -65,14 +88,29 @@ class _SeekProgressBarState extends State<SeekProgressBar> {
       _bufferTimer?.cancel();
       _bufferTimer = null;
       _buffering = false;
+      widget.thumbnailService?.cancelPending();
       _attachSource();
     }
+    if (oldWidget.locked != widget.locked) {
+      _bufferTimer?.cancel();
+      _bufferTimer = null;
+      _buffering = false;
+      if (widget.locked) {
+        widget.thumbnailService?.cancelPending();
+        _previewFraction.value = null;
+      } else {
+        _syncBufferState(notify: false);
+      }
+    }
   }
 
   @override
   void dispose() {
     _detachSource(widget.valueListenable);
     _bufferTimer?.cancel();
+    if (_previewFraction.value != null) {
+      widget.thumbnailService?.cancelPending();
+    }
     _previewFraction.dispose();
     super.dispose();
   }
@@ -90,7 +128,7 @@ class _SeekProgressBarState extends State<SeekProgressBar> {
 
   void _syncBufferState({bool notify = true}) {
     final source = widget.valueListenable;
-    if (source == null) {
+    if (widget.locked || source == null) {
       _bufferTimer?.cancel();
       _bufferTimer = null;
       _setBuffering(false, notify: notify);
@@ -100,7 +138,7 @@ class _SeekProgressBarState extends State<SeekProgressBar> {
     if (!value.isInitialized) {
       _bufferTimer?.cancel();
       _bufferTimer = null;
-      _setBuffering(true, notify: notify);
+      _setBuffering(false, notify: notify);
       return;
     }
     if (!value.isBuffering) {
@@ -132,16 +170,34 @@ class _SeekProgressBarState extends State<SeekProgressBar> {
     setState(() => _buffering = buffering);
   }
 
-  Future<void> _finish(double fraction, Duration duration) async {
-    final source = widget.valueListenable;
-    _previewFraction.value = fraction;
-    try {
-      await widget.onSeek?.call(seekPositionForFraction(fraction, duration));
-    } finally {
-      if (mounted && widget.valueListenable == source) {
-        _previewFraction.value = null;
-      }
+  void _endPointerDrag() {
+    if (!_dragging) {
+      _pointerMoved = false;
+      _pointerStart = null;
+      _dragStartFraction = null;
+      return;
     }
+    final duration = widget.valueListenable?.value.duration ?? Duration.zero;
+    final fraction = _previewFraction.value ?? _dragStartFraction ?? 0;
+    unawaited(_finish(fraction, duration));
+  }
+
+  Future<void> _finish(double fraction, Duration duration) async {
+    final startedAt = _dragStartFraction;
+    _dragStartFraction = null;
+    if (widget.locked || !_dragging || startedAt == null) return;
+    _dragging = false;
+    if (!mounted) {
+      widget.onScrubEnd?.call();
+      return;
+    }
+    setState(() {});
+    _pointerMoved = false;
+    _pointerStart = null;
+    widget.thumbnailService?.cancelPending();
+    _previewFraction.value = null;
+    widget.onScrubEnd?.call();
+    await widget.onSeek?.call(seekPositionForFraction(fraction, duration));
   }
 
   @override
@@ -165,9 +221,13 @@ class _SeekProgressBarState extends State<SeekProgressBar> {
 
   Widget _buildTrack(BuildContext context, VideoPlayerValue video) {
     final total = video.duration.inMilliseconds;
-    final scrubbing = _previewFraction.value != null;
-    final loading = !scrubbing && (!video.isInitialized || _buffering);
-    final enabled = video.isInitialized && total > 0 && widget.onSeek != null;
+    final scrubbing = _dragging;
+    final loading = !widget.locked && !scrubbing && _buffering;
+    final enabled =
+        !widget.locked &&
+        video.isInitialized &&
+        total > 0 &&
+        widget.onSeek != null;
     final played = total > 0
         ? (video.position.inMilliseconds / total).clamp(0.0, 1.0)
         : 0.0;
@@ -175,79 +235,145 @@ class _SeekProgressBarState extends State<SeekProgressBar> {
     final previewPosition = _previewFraction.value == null
         ? video.position
         : seekPositionForFraction(fraction, video.duration);
-    final trackHeight = widget.compact
-        ? (scrubbing ? 3.0 : 1.5)
-        : (scrubbing ? 4.0 : 3.0);
+    final showPreview =
+        scrubbing &&
+        widget.showTimes &&
+        widget.thumbnailService != null &&
+        (widget.episodeId?.isNotEmpty ?? false);
+    final trackHeight = scrubbing ? 6.0 : 2.0;
     final trackAreaHeight = loading
         ? (widget.compact ? 20.0 : 44.0)
         : widget.compact
         ? (scrubbing ? 32.0 : 20.0)
         : (scrubbing ? 48.0 : 44.0);
 
-    return Column(
-      mainAxisSize: MainAxisSize.min,
-      children: [
-        if (widget.showTimes && scrubbing)
-          Padding(
-            padding: const EdgeInsets.only(bottom: 2),
-            child: Text(
-              '${_format(previewPosition)} / ${_format(video.duration)}',
-              textAlign: TextAlign.center,
-              style: const TextStyle(
-                color: Colors.white,
-                fontSize: 14,
-                fontWeight: FontWeight.w600,
-                height: 1.2,
-              ),
-            ),
-          ),
-        SizedBox(
-          height: trackAreaHeight,
-          child: loading
-              ? Center(
-                  child: LoadingProgressTrack(
-                    height: trackHeight,
-                    trackColor: widget.inactiveTrackColor,
-                  ),
-                )
-              : SliderTheme(
-                  data: SliderTheme.of(context).copyWith(
-                    trackHeight: trackHeight,
-                    activeTrackColor: AppColors.blue,
-                    inactiveTrackColor: widget.inactiveTrackColor,
-                    thumbColor: AppColors.onPrimary,
-                    thumbShape: RoundSliderThumbShape(
-                      enabledThumbRadius: widget.compact
-                          ? (scrubbing ? 6 : 4)
-                          : (scrubbing ? 8 : 6),
-                    ),
-                    overlayShape: RoundSliderOverlayShape(
-                      overlayRadius: widget.compact ? 12 : 18,
-                    ),
-                  ),
-                  child: Semantics(
-                    label: widget.semanticsLabel,
-                    child: Slider(
-                      value: fraction,
-                      // 轨道与上方文案共用同一层水平内边距，避免 Slider 默认内缩。
-                      padding: EdgeInsets.zero,
-                      onChangeStart: enabled
-                          ? (value) {
-                              _previewFraction.value = value;
-                              widget.onScrubStart?.call();
-                            }
-                          : null,
-                      onChanged: enabled
-                          ? (value) => _previewFraction.value = value
-                          : null,
-                      onChangeEnd: enabled
-                          ? (value) => unawaited(_finish(value, video.duration))
-                          : null,
-                    ),
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        final track = Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            if (widget.showTimes && scrubbing && !showPreview)
+              Padding(
+                padding: const EdgeInsets.only(bottom: 2),
+                child: Text(
+                  '${_format(previewPosition)} / ${_format(video.duration)}',
+                  textAlign: TextAlign.center,
+                  style: const TextStyle(
+                    color: AppColors.onPrimary,
+                    fontSize: 14,
+                    fontWeight: FontWeight.w600,
+                    height: 1.2,
                   ),
                 ),
+              ),
+            SizedBox(
+              height: trackAreaHeight,
+              child: widget.locked || !video.isInitialized
+                  ? _inactiveTrack(trackHeight)
+                  : loading
+                  ? Center(
+                      child: LoadingProgressTrack(
+                        height: trackHeight,
+                        trackColor: widget.inactiveTrackColor,
+                      ),
+                    )
+                  : SliderTheme(
+                      data: SliderTheme.of(context).copyWith(
+                        trackHeight: trackHeight,
+                        activeTrackColor: AppColors.blue,
+                        inactiveTrackColor: widget.inactiveTrackColor,
+                        thumbColor: AppColors.onPrimary,
+                        thumbShape: RoundSliderThumbShape(
+                          enabledThumbRadius: scrubbing ? 8 : 6,
+                        ),
+                        overlayShape: RoundSliderOverlayShape(
+                          overlayRadius: widget.compact ? 12 : 18,
+                        ),
+                      ),
+                      child: Semantics(
+                        label: widget.semanticsLabel,
+                        child: Listener(
+                          onPointerDown: (event) {
+                            _pointerStart = event.position;
+                            _pointerMoved = false;
+                          },
+                          onPointerMove: (event) {
+                            final start = _pointerStart;
+                            if (start != null &&
+                                (event.position - start).distance > 0) {
+                              _pointerMoved = true;
+                            }
+                          },
+                          onPointerUp: (_) => _endPointerDrag(),
+                          onPointerCancel: (_) => _endPointerDrag(),
+                          child: Slider(
+                            value: fraction,
+                            // 轨道与上方文案共用同一层水平内边距，避免 Slider 默认内缩。
+                            padding: EdgeInsets.zero,
+                            onChangeStart: enabled
+                                ? (value) {
+                                    _dragStartFraction = value;
+                                    _pointerMoved = false;
+                                  }
+                                : null,
+                            onChanged: enabled
+                                ? (value) {
+                                    if (!_pointerMoved) return;
+                                    if (!_dragging) {
+                                      setState(() => _dragging = true);
+                                      widget.onScrubStart?.call();
+                                    }
+                                    _previewFraction.value = value;
+                                  }
+                                : null,
+                            onChangeEnd: enabled
+                                ? (value) =>
+                                      unawaited(_finish(value, video.duration))
+                                : null,
+                          ),
+                        ),
+                      ),
+                    ),
+            ),
+          ],
+        );
+        return Stack(
+          clipBehavior: Clip.none,
+          children: [
+            track,
+            if (showPreview)
+              Positioned(
+                left: scrubPreviewLeft(
+                  trackWidth: constraints.maxWidth,
+                  fraction: fraction,
+                ),
+                bottom: trackAreaHeight + 8,
+                child: ScrubPreviewCard(
+                  service: widget.thumbnailService!,
+                  spriteAxisService: widget.spriteAxisService,
+                  thumbnailsUrl: widget.thumbnailsUrl,
+                  episodeId: widget.episodeId!,
+                  posterUrl: widget.posterUrl,
+                  position: previewPosition,
+                  duration: video.duration,
+                ),
+              ),
+          ],
+        );
+      },
+    );
+  }
+
+  Widget _inactiveTrack(double height) {
+    return Center(
+      child: SizedBox(
+        width: double.infinity,
+        height: height,
+        child: ColoredBox(
+          key: _inactiveTrackKey,
+          color: widget.inactiveTrackColor,
         ),
-      ],
+      ),
     );
   }
 
diff --git a/lib/pages/ranking/ranking_page.dart b/lib/pages/ranking/ranking_page.dart
index e28923d..105cd02 100644
--- a/lib/pages/ranking/ranking_page.dart
+++ b/lib/pages/ranking/ranking_page.dart
@@ -9,7 +9,7 @@ import '../../core/data/models/drama.dart';
 import '../../core/data/services/catalog_controller.dart';
 import '../../core/formatting/count_format.dart';
 import '../../core/theme/app_colors.dart';
-import '../../core/theme/app_theme.dart';
+import '../../core/theme/app_dimens.dart';
 import '../../core/widgets/app_pull_to_refresh.dart';
 import '../../core/widgets/empty_state.dart';
 import '../../core/widgets/paged_local_list.dart';
@@ -19,22 +19,18 @@ import '../../l10n/app_localizations.dart';
 import '../player/open_player.dart';
 
 const int _topCount = 50;
-const double _podiumGap = 8;
-const double _coverRadius = 12;
-const double _titleSlotHeight = 24;
-const double _rowGap = 12;
-const double _rankColumnWidth = 56;
-const double _listCoverWidth = 72;
-const double _listCoverHeight = 96;
 const double _loadMoreThreshold = 200;
-const Color _goldStart = Color(0xFFF3B34C);
-const Color _goldEnd = Color(0xFFD9A23A);
-const Color _bronzeStart = Color(0xFFCD7F32);
-const Color _bronzeEnd = Color(0xFFA9713A);
+const double _championLift = 12;
+const double _podiumGap = 8;
+const double _podiumHorizontal = 8;
+const double _championScale = 1.18;
+const double _coverAspect = 146 / 110;
 
-/// 剧场榜单页：前三名横排领奖台，第 4 名起纵向列表。
+/// 剧场榜单页：前三名领奖台，第 4 名起为单列排行行。
 class RankingPage extends StatefulWidget {
-  const RankingPage({super.key});
+  const RankingPage({super.key, this.embedded = false});
+
+  final bool embedded;
 
   @override
   State<RankingPage> createState() => _RankingPageState();
@@ -91,12 +87,10 @@ class _RankingPageState extends State<RankingPage> {
 
   bool _onScroll(ScrollNotification notification) {
     if (notification.depth != 0 || _refreshing) return false;
-    final reachedBottom =
-        notification.metrics.extentAfter <= _loadMoreThreshold;
-    if (reachedBottom &&
-        (notification is ScrollUpdateNotification ||
-            notification is ScrollEndNotification ||
-            notification is OverscrollNotification)) {
+    if (notification.metrics.extentAfter > _loadMoreThreshold) return false;
+    if (notification is ScrollUpdateNotification ||
+        notification is ScrollEndNotification ||
+        notification is OverscrollNotification) {
       unawaited(_pager!.loadMore());
     }
     return false;
@@ -105,65 +99,126 @@ class _RankingPageState extends State<RankingPage> {
   @override
   Widget build(BuildContext context) {
     final l10n = AppLocalizations.of(context)!;
-    final pager = _pager!;
-    final top = pager.visibleItems;
-    final podium = top.take(3).toList();
-    final rest = top.skip(3).toList();
+    final catalog = context.watch<CatalogController>();
+    final top = _pager!.visibleItems;
+    final podium = top.take(3).toList(growable: false);
+    final rest = top.skip(3).toList(growable: false);
+    final content = NotificationListener<ScrollNotification>(
+      onNotification: _onScroll,
+      child: AppPullToRefresh(
+        key: const Key('ranking-refresh'),
+        onRefresh: _refresh,
+        child: ListView(
+          key: const Key('ranking-list'),
+          controller: _scroll,
+          physics: AppPullToRefresh.physics,
+          padding: const EdgeInsets.only(top: 8, bottom: 24),
+          children: top.isEmpty
+              ? [_emptyState(l10n, catalog)]
+              : [
+                  if (widget.embedded) _intro(l10n),
+                  const SizedBox(height: AppDimens.spaceMd),
+                  if (podium.isNotEmpty)
+                    Padding(
+                      padding: const EdgeInsets.symmetric(
+                        horizontal: _podiumHorizontal,
+                      ),
+                      child: _Podium(podium: podium, l10n: l10n),
+                    ),
+                  if (rest.isNotEmpty) ...[
+                    const SizedBox(height: AppDimens.spaceXl),
+                    for (var index = 0; index < rest.length; index++) ...[
+                      Padding(
+                        padding: const EdgeInsets.symmetric(
+                          horizontal: AppDimens.feedPageHorizontal,
+                        ),
+                        child: _RankingRow(
+                          index: index + 3,
+                          drama: rest[index],
+                          l10n: l10n,
+                        ),
+                      ),
+                      if (index != rest.length - 1)
+                        const Padding(
+                          padding: EdgeInsets.symmetric(
+                            horizontal: AppDimens.feedPageHorizontal,
+                          ),
+                          child: Divider(
+                            height: AppDimens.mineGridDividerWidth,
+                            thickness: AppDimens.mineGridDividerWidth,
+                            color: AppColors.border,
+                          ),
+                        ),
+                    ],
+                  ],
+                  PagedLoadFooter(
+                    loading: _pager!.loading,
+                    loadMoreKey: const Key('ranking-load-more'),
+                  ),
+                ],
+        ),
+      ),
+    );
+    if (widget.embedded) {
+      return KeyedSubtree(key: const Key('ranking-page'), child: content);
+    }
     return PlainPageScaffold(
       pageKey: const Key('ranking-page'),
       backKey: const Key('ranking-back'),
       title: l10n.topCharts,
       subtitle: l10n.rankingSubtitle,
-      child: NotificationListener<ScrollNotification>(
-        onNotification: _onScroll,
-        child: AppPullToRefresh(
-          key: const Key('ranking-refresh'),
-          onRefresh: _refresh,
-          child: ListView(
-            key: const Key('ranking-list'),
-            controller: _scroll,
-            physics: AppPullToRefresh.physics,
-            padding: const EdgeInsets.only(top: 4, bottom: 24),
-            children: top.isEmpty
-                ? [
-                    SizedBox(
-                      height: 420,
-                      child: EmptyState(
-                        icon: Icons.leaderboard_outlined,
-                        title: l10n.noStories,
-                      ),
-                    ),
-                  ]
-                : [
-                    if (podium.isNotEmpty)
-                      Padding(
-                        padding: const EdgeInsets.symmetric(horizontal: 14),
-                        child: _Podium(podium: podium, l10n: l10n),
-                      ),
-                    if (rest.isNotEmpty) ...[
-                      const SizedBox(height: 16),
-                      for (var index = 0; index < rest.length; index++) ...[
-                        if (index > 0) const SizedBox(height: _rowGap),
-                        Padding(
-                          padding: const EdgeInsets.symmetric(horizontal: 14),
-                          child: _RankingRow(
-                            index: index + 3,
-                            drama: rest[index],
-                            l10n: l10n,
-                          ),
-                        ),
-                      ],
-                    ],
-                    PagedLoadFooter(
-                      loading: pager.loading,
-                      hasMore: pager.hasMore,
-                      hasItems: pager.items.isNotEmpty,
-                      loadMoreKey: const Key('ranking-load-more'),
-                      noMoreKey: const Key('ranking-no-more'),
-                      noMoreLabel: l10n.noMore,
-                    ),
-                  ],
+      child: content,
+    );
+  }
+
+  Widget _intro(AppLocalizations l10n) {
+    return Padding(
+      padding: const EdgeInsets.symmetric(
+        horizontal: AppDimens.feedPageHorizontal,
+      ),
+      child: Column(
+        key: const Key('ranking-hero'),
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Text(
+            l10n.topCharts,
+            style: const TextStyle(
+              color: AppColors.textPrimary,
+              fontSize: AppDimens.rankingHeroTitle,
+              fontWeight: FontWeight.w700,
+            ),
           ),
+          const SizedBox(height: 2),
+          Text(
+            l10n.rankingSubtitle,
+            style: const TextStyle(
+              color: AppColors.textTertiary,
+              fontSize: AppDimens.rankingHeroSubtitle,
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  Widget _emptyState(AppLocalizations l10n, CatalogController catalog) {
+    final theme = Theme.of(context);
+    return SizedBox(
+      height: 420,
+      child: Theme(
+        data: theme.copyWith(
+          colorScheme: theme.colorScheme.copyWith(
+            onSurface: AppColors.textTertiary,
+          ),
+        ),
+        child: EmptyState(
+          key: Key(catalog.error == null ? 'ranking-empty' : 'ranking-error'),
+          icon: catalog.error == null
+              ? Icons.leaderboard_outlined
+              : Icons.cloud_off_rounded,
+          title: catalog.error == null ? l10n.noStories : l10n.catalogError,
+          actionLabel: catalog.error == null ? null : l10n.retry,
+          onAction: catalog.error == null ? null : () => unawaited(_refresh()),
         ),
       ),
     );
@@ -178,22 +233,57 @@ class _Podium extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Row(
-      crossAxisAlignment: CrossAxisAlignment.end,
-      children: [
-        Expanded(flex: 100, child: _slot(2)),
-        const SizedBox(width: _podiumGap),
-        Expanded(flex: 115, child: _slot(1)),
-        const SizedBox(width: _podiumGap),
-        Expanded(flex: 100, child: _slot(3)),
-      ],
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        final available = constraints.maxWidth - _podiumGap * 2;
+        final side = available / (2 + _championScale);
+        final champion = side * _championScale;
+        return Row(
+          crossAxisAlignment: CrossAxisAlignment.end,
+          children: [
+            SizedBox(
+              width: side,
+              child: podium.length > 1
+                  ? _PodiumCard(
+                      rank: 2,
+                      drama: podium[1],
+                      l10n: l10n,
+                      coverWidth: side,
+                    )
+                  : const SizedBox.shrink(),
+            ),
+            const SizedBox(width: _podiumGap),
+            SizedBox(
+              width: champion,
+              child: podium.isNotEmpty
+                  ? Transform.translate(
+                      offset: const Offset(0, -_championLift),
+                      child: _PodiumCard(
+                        rank: 1,
+                        drama: podium.first,
+                        l10n: l10n,
+                        coverWidth: champion,
+                      ),
+                    )
+                  : const SizedBox.shrink(),
+            ),
+            const SizedBox(width: _podiumGap),
+            SizedBox(
+              width: side,
+              child: podium.length > 2
+                  ? _PodiumCard(
+                      rank: 3,
+                      drama: podium[2],
+                      l10n: l10n,
+                      coverWidth: side,
+                    )
+                  : const SizedBox.shrink(),
+            ),
+          ],
+        );
+      },
     );
   }
-
-  Widget _slot(int rank) {
-    if (podium.length < rank) return const SizedBox.shrink();
-    return _PodiumCard(rank: rank, drama: podium[rank - 1], l10n: l10n);
-  }
 }
 
 class _PodiumCard extends StatelessWidget {
@@ -201,32 +291,25 @@ class _PodiumCard extends StatelessWidget {
     required this.rank,
     required this.drama,
     required this.l10n,
+    required this.coverWidth,
   });
 
   final int rank;
   final Drama drama;
   final AppLocalizations l10n;
+  final double coverWidth;
 
-  bool get _center => rank == 1;
+  double get _coverHeight => coverWidth * _coverAspect;
 
-  LinearGradient get _badgeGradient => switch (rank) {
-    1 => const LinearGradient(
-      begin: Alignment.topLeft,
-      end: Alignment.bottomRight,
-      colors: [AppColors.blue, AppColors.bluePressed],
-    ),
-    2 => const LinearGradient(
-      begin: Alignment.topLeft,
-      end: Alignment.bottomRight,
-      colors: [_goldStart, _goldEnd],
-    ),
-    _ => const LinearGradient(
-      begin: Alignment.topLeft,
-      end: Alignment.bottomRight,
-      colors: [_bronzeStart, _bronzeEnd],
-    ),
+  Color get _badgeColor => switch (rank) {
+    1 => AppColors.homeCrownGold,
+    2 => AppColors.rankSilver,
+    _ => AppColors.bronze,
   };
 
+  Color get _badgeTextColor =>
+      rank == 3 ? AppColors.textPrimary : AppColors.onGold;
+
   @override
   Widget build(BuildContext context) {
     return GestureDetector(
@@ -235,10 +318,11 @@ class _PodiumCard extends StatelessWidget {
         mainAxisSize: MainAxisSize.min,
         children: [
           ClipRRect(
-            borderRadius: BorderRadius.circular(_coverRadius),
-            child: AspectRatio(
+            borderRadius: BorderRadius.circular(AppDimens.rankingPodiumRadius),
+            child: SizedBox(
               key: Key('ranking-cover-$rank'),
-              aspectRatio: 3 / 4,
+              width: coverWidth,
+              height: _coverHeight,
               child: Stack(
                 fit: StackFit.expand,
                 children: [
@@ -249,23 +333,23 @@ class _PodiumCard extends StatelessWidget {
                     fallbackAspectRatio: 3 / 4,
                   ),
                   Positioned(
-                    top: 8,
-                    left: 8,
+                    top: 4,
+                    left: 4,
                     child: Container(
                       key: Key('ranking-top-$rank'),
                       padding: const EdgeInsets.symmetric(
-                        horizontal: 8,
-                        vertical: 3,
+                        horizontal: 6,
+                        vertical: 2,
                       ),
                       decoration: BoxDecoration(
-                        gradient: _badgeGradient,
-                        borderRadius: BorderRadius.circular(999),
+                        color: _badgeColor,
+                        borderRadius: BorderRadius.circular(6),
                       ),
                       child: Text(
                         l10n.topLabel(rank),
                         maxLines: 1,
-                        style: const TextStyle(
-                          color: Colors.white,
+                        style: TextStyle(
+                          color: _badgeTextColor,
                           fontSize: 11,
                           fontWeight: FontWeight.w800,
                         ),
@@ -278,22 +362,25 @@ class _PodiumCard extends StatelessWidget {
           ),
           const SizedBox(height: 6),
           SizedBox(
-            height: _titleSlotHeight,
-            child: Center(
-              child: Text(
-                drama.title,
-                key: Key('ranking-title-$rank'),
-                maxLines: 1,
-                overflow: TextOverflow.ellipsis,
-                textAlign: TextAlign.center,
-                style: TextStyle(
-                  color: AppColors.onSurface,
-                  fontSize: _center ? 15 : 13,
-                  fontWeight: _center ? FontWeight.w800 : FontWeight.w700,
-                ),
+            height: 34,
+            child: Text(
+              drama.title,
+              key: Key('ranking-title-$rank'),
+              maxLines: 2,
+              overflow: TextOverflow.ellipsis,
+              textAlign: TextAlign.center,
+              style: const TextStyle(
+                color: AppColors.textPrimary,
+                fontSize: 13,
+                fontWeight: FontWeight.w600,
+                height: 1.25,
               ),
             ),
           ),
+          if (drama.viewCount > 0) ...[
+            const SizedBox(height: 2),
+            _heat(drama.viewCount, l10n),
+          ],
         ],
       ),
     );
@@ -313,164 +400,119 @@ class _RankingRow extends StatelessWidget {
 
   int get _rank => index + 1;
 
-  List<String> _tagValues() {
-    final result = <String>[];
+  String get _category {
+    final values = <String>{};
     for (final value in [drama.genre, drama.category]) {
       for (final part in value.split(RegExp(r'[,/、·]'))) {
         final tag = part.trim();
-        if (tag.isEmpty || result.contains(tag)) continue;
-        result.add(tag);
-        if (result.length == 3) return result;
+        if (tag.isNotEmpty) values.add(tag);
       }
     }
-    return result;
+    return values.join(' · ');
   }
 
   @override
   Widget build(BuildContext context) {
-    return Container(
-      decoration: BoxDecoration(
-        color: AppColors.card,
-        borderRadius: BorderRadius.circular(14),
-        boxShadow: const [AppTheme.cardShadow],
-      ),
+    return SizedBox(
+      height: AppDimens.rankingRowHeight,
       child: Material(
-        color: Colors.transparent,
-        borderRadius: BorderRadius.circular(14),
-        clipBehavior: Clip.antiAlias,
+        color: AppColors.transparent,
         child: InkWell(
           key: Key('ranking-row-$index'),
           onTap: () => unawaited(playDramaFromCatalog(context, drama)),
-          child: Padding(
-            padding: const EdgeInsets.all(10),
-            child: Row(
-              children: [
-                SizedBox(
-                  width: _rankColumnWidth,
-                  child: Text(
-                    l10n.topLabel(_rank),
-                    key: Key('ranking-top-$_rank'),
-                    textAlign: TextAlign.center,
-                    maxLines: 1,
-                    style: const TextStyle(
-                      color: AppColors.subtle,
-                      fontSize: 18,
-                      fontWeight: FontWeight.w800,
-                    ),
+          child: Row(
+            children: [
+              SizedBox(
+                width: AppDimens.rankingNumberWidth,
+                child: Text(
+                  '$_rank',
+                  key: Key('ranking-top-$_rank'),
+                  textAlign: TextAlign.center,
+                  maxLines: 1,
+                  style: TextStyle(
+                    color: AppColors.textPrimary.withValues(alpha: 0.12),
+                    fontSize: AppDimens.rankingNumberFont,
+                    fontWeight: FontWeight.w800,
+                    height: 1,
                   ),
                 ),
-                ClipRRect(
-                  borderRadius: BorderRadius.circular(10),
-                  child: SizedBox(
-                    width: _listCoverWidth,
-                    height: _listCoverHeight,
-                    child: RemoteImage(
-                      drama.posterUrl,
-                      fit: BoxFit.cover,
-                      showFallbackIcon: true,
-                      fallbackAspectRatio: 3 / 4,
-                    ),
+              ),
+              ClipRRect(
+                borderRadius: BorderRadius.circular(
+                  AppDimens.rankingCoverRadius,
+                ),
+                child: SizedBox(
+                  key: Key('ranking-row-cover-$_rank'),
+                  width: AppDimens.rankingCoverWidth,
+                  height: AppDimens.rankingCoverHeight,
+                  child: RemoteImage(
+                    drama.posterUrl,
+                    fit: BoxFit.cover,
+                    showFallbackIcon: true,
+                    fallbackAspectRatio: 3 / 4,
                   ),
                 ),
-                const SizedBox(width: 12),
-                Expanded(
+              ),
+              const SizedBox(width: AppDimens.spaceMd),
+              Expanded(
+                child: SizedBox(
+                  height: AppDimens.rankingCoverHeight,
                   child: Column(
                     crossAxisAlignment: CrossAxisAlignment.start,
-                    mainAxisSize: MainAxisSize.min,
                     children: [
                       Text(
                         drama.title,
-                        maxLines: 2,
+                        maxLines: 1,
                         overflow: TextOverflow.ellipsis,
                         style: const TextStyle(
-                          color: AppColors.onSurface,
+                          color: AppColors.textPrimary,
                           fontSize: 15,
-                          fontWeight: FontWeight.w700,
+                          fontWeight: FontWeight.w500,
                         ),
                       ),
-                      if (drama.synopsis.trim().isNotEmpty) ...[
-                        const SizedBox(height: 4),
+                      if (_category.isNotEmpty) ...[
+                        const SizedBox(height: AppDimens.spaceXs),
                         Text(
-                          drama.synopsis,
-                          maxLines: 2,
+                          _category,
+                          maxLines: 1,
                           overflow: TextOverflow.ellipsis,
                           style: const TextStyle(
-                            color: AppColors.muted,
-                            fontSize: 12,
-                            height: 1.3,
+                            color: AppColors.textTertiary,
+                            fontSize: 11,
                           ),
                         ),
                       ],
-                      if (_tagValues().isNotEmpty) ...[
-                        const SizedBox(height: 6),
-                        Wrap(
-                          spacing: 6,
-                          runSpacing: 4,
-                          children: [
-                            for (final tag in _tagValues())
-                              Container(
-                                padding: const EdgeInsets.symmetric(
-                                  horizontal: 6,
-                                  vertical: 2,
-                                ),
-                                decoration: BoxDecoration(
-                                  color: AppColors.raised,
-                                  borderRadius: BorderRadius.circular(6),
-                                ),
-                                child: Text(
-                                  tag,
-                                  maxLines: 1,
-                                  overflow: TextOverflow.ellipsis,
-                                  style: const TextStyle(
-                                    color: AppColors.muted,
-                                    fontSize: 11,
-                                  ),
-                                ),
-                              ),
-                          ],
-                        ),
-                      ],
-                      const SizedBox(height: 8),
-                      Row(
-                        children: [
-                          const Icon(
-                            Icons.local_fire_department_rounded,
-                            color: AppColors.blue,
-                            size: 12,
-                          ),
-                          const SizedBox(width: 4),
-                          Flexible(
-                            child: Text(
-                              l10n.heatLabel(
-                                formatInteractionCount(drama.viewCount),
-                              ),
-                              maxLines: 1,
-                              overflow: TextOverflow.ellipsis,
-                              style: const TextStyle(
-                                color: AppColors.muted,
-                                fontSize: 11,
-                              ),
-                            ),
-                          ),
-                          const SizedBox(width: 8),
-                          Text(
-                            l10n.episodeCount(drama.episodeCount),
-                            maxLines: 1,
-                            style: const TextStyle(
-                              color: AppColors.muted,
-                              fontSize: 11,
-                            ),
-                          ),
-                        ],
-                      ),
+                      const Spacer(),
+                      if (drama.viewCount > 0) _heat(drama.viewCount, l10n),
                     ],
                   ),
                 ),
-              ],
-            ),
+              ),
+            ],
           ),
         ),
       ),
     );
   }
 }
+
+Widget _heat(int count, AppLocalizations l10n) {
+  return Row(
+    mainAxisSize: MainAxisSize.min,
+    mainAxisAlignment: MainAxisAlignment.center,
+    children: [
+      const Icon(
+        Icons.local_fire_department_rounded,
+        color: AppColors.textTertiary,
+        size: 11,
+      ),
+      const SizedBox(width: 4),
+      Text(
+        l10n.heatLabel(formatPlayCount(count)),
+        maxLines: 1,
+        overflow: TextOverflow.ellipsis,
+        style: const TextStyle(color: AppColors.textTertiary, fontSize: 11),
+      ),
+    ],
+  );
+}
diff --git a/lib/pages/recommend/recommend_page.dart b/lib/pages/recommend/recommend_page.dart
new file mode 100644
index 0000000..3142f0e
--- /dev/null
+++ b/lib/pages/recommend/recommend_page.dart
@@ -0,0 +1,370 @@
+// Author: fruit.com.cn
+
+import 'dart:async';
+
+import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+
+import '../../core/data/models/drama.dart';
+import '../../core/data/services/category_controller.dart';
+import '../../core/data/services/home_feed_controller.dart';
+import '../../core/theme/app_colors.dart';
+import '../../core/widgets/empty_state.dart';
+import '../../l10n/app_localizations.dart';
+import '../player/open_player.dart';
+import '../player/player_view.dart';
+import 'recommend_types.dart';
+import 'widgets/all_dramas_filter_grid.dart';
+import 'widgets/playlist_detail_page.dart';
+import 'widgets/recommend_sections_view.dart';
+import 'widgets/recommend_top_nav.dart';
+
+class RecommendPage extends StatefulWidget {
+  const RecommendPage({
+    super.key,
+    required this.feedController,
+    required this.active,
+    required this.onSearch,
+  });
+
+  final HomeFeedController feedController;
+  final bool active;
+  final VoidCallback onSearch;
+
+  @override
+  State<RecommendPage> createState() => _RecommendPageState();
+}
+
+class _RecommendPageState extends State<RecommendPage> {
+  RecommendInnerTab _tab = RecommendInnerTab.feed;
+  final PageController _pageController = PageController();
+  int _scrubCancelRequest = 0;
+
+  @override
+  void dispose() {
+    _pageController.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final categories = context.read<CategoryController>();
+    return ColoredBox(
+      key: const Key('recommend-page'),
+      color: AppColors.appBackground,
+      child: Stack(
+        children: [
+          Positioned.fill(
+            child: ListenableBuilder(
+              listenable: Listenable.merge([widget.feedController, categories]),
+              builder: (context, _) => PageView(
+                key: const Key('recommend-tab-page-view'),
+                controller: _pageController,
+                scrollDirection: Axis.horizontal,
+                onPageChanged: _onPageChanged,
+                children: [
+                  _KeepAliveTab(
+                    key: const PageStorageKey('recommend-tab-feed'),
+                    child: _recommendFeed(context),
+                  ),
+                  _KeepAliveTab(
+                    key: const PageStorageKey('recommend-tab-playlists'),
+                    child: _recommendPlaylists(categories),
+                  ),
+                  _KeepAliveTab(
+                    key: const PageStorageKey('recommend-tab-all'),
+                    child: _withTopNavSpace(
+                      AllDramasFilterGrid(
+                        feedController: widget.feedController,
+                        onOpenDrama: _openDrama,
+                      ),
+                    ),
+                  ),
+                ],
+              ),
+            ),
+          ),
+          Positioned(
+            top: 0,
+            left: 0,
+            right: 0,
+            child: IgnorePointer(
+              child: SizedBox(
+                height: 72,
+                child: DecoratedBox(
+                  key: const Key('recommend-top-gradient'),
+                  decoration: const BoxDecoration(
+                    gradient: LinearGradient(
+                      begin: Alignment.topCenter,
+                      end: Alignment.bottomCenter,
+                      colors: [AppColors.mediaBlack, AppColors.transparent],
+                    ),
+                  ),
+                ),
+              ),
+            ),
+          ),
+          Positioned(
+            top: 0,
+            left: 0,
+            right: 0,
+            child: SafeArea(
+              bottom: false,
+              child: RecommendTopNav(
+                selected: _tab,
+                onVideo: _tab == RecommendInnerTab.feed,
+                onSelected: _selectTab,
+                onSearch: _handleSearch,
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  Widget _recommendFeed(BuildContext context) {
+    final dramas = widget.feedController.dramas;
+    if (dramas.isEmpty) {
+      final l10n = AppLocalizations.of(context)!;
+      if (widget.feedController.loadingFirstPage) {
+        return const _RecommendFeedSkeleton();
+      }
+      return ColoredBox(
+        color: AppColors.mediaBlack,
+        child: EmptyState(
+          key: const Key('recommend-feed-empty'),
+          icon: Icons.movie_outlined,
+          title: l10n.noStories,
+          actionLabel: l10n.retry,
+          onAction: () => unawaited(widget.feedController.refreshCurrent()),
+        ),
+      );
+    }
+    return PlayerPage(
+      key: const Key('recommend-feed-player'),
+      homeMode: true,
+      embedded: true,
+      active: widget.active && _tab == RecommendInnerTab.feed,
+      showHomeFeedHeader: false,
+      drama: dramas.first,
+      initialIndex: 0,
+      feedDramas: dramas,
+      feedChannel: widget.feedController.channel,
+      onOpenFullPlayer: (drama, episode) =>
+          _openDrama(drama, episodeId: episode.id),
+      onRefreshFeed: widget.feedController.refreshCurrent,
+      onLoadMore: widget.feedController.loadMore,
+      scrubCancelRequest: _scrubCancelRequest,
+    );
+  }
+
+  Widget _recommendPlaylists(CategoryController categories) {
+    return DecoratedBox(
+      key: const Key('recommend-playlist-surface'),
+      decoration: const BoxDecoration(
+        gradient: LinearGradient(
+          begin: Alignment.topCenter,
+          end: Alignment.bottomCenter,
+          colors: [
+            AppColors.mineGradientTop,
+            AppColors.mineGradientMiddle,
+            AppColors.mineGradientBottom,
+          ],
+          stops: [0, 0.4, 0.75],
+        ),
+      ),
+      child: Stack(
+        fit: StackFit.expand,
+        children: [
+          const DecoratedBox(
+            key: Key('recommend-playlist-glow'),
+            decoration: BoxDecoration(
+              gradient: RadialGradient(
+                center: Alignment(0, -0.95),
+                radius: 0.9,
+                colors: [
+                  AppColors.recommendPlaylistGlow,
+                  AppColors.transparent,
+                ],
+              ),
+            ),
+          ),
+          _withTopNavSpace(
+            RecommendSectionsView(
+              feedController: widget.feedController,
+              categories: categories,
+              onOpenDrama: _openDrama,
+              onMore: _handleMore,
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  void _selectTab(RecommendInnerTab tab) {
+    setState(() {
+      _tab = tab;
+      _scrubCancelRequest++;
+    });
+    if (_pageController.hasClients) {
+      unawaited(
+        _pageController.animateToPage(
+          tab.index,
+          duration: const Duration(milliseconds: 220),
+          curve: Curves.easeOut,
+        ),
+      );
+    }
+  }
+
+  void _onPageChanged(int index) {
+    final next = RecommendInnerTab.values[index];
+    if (next == _tab) return;
+    setState(() {
+      _tab = next;
+      _scrubCancelRequest++;
+    });
+  }
+
+  void _handleSearch() {
+    setState(() => _scrubCancelRequest++);
+    widget.onSearch();
+  }
+
+  Widget _withTopNavSpace(Widget child) {
+    return SafeArea(
+      bottom: false,
+      child: Padding(
+        padding: const EdgeInsets.only(top: RecommendTopNav.height),
+        child: child,
+      ),
+    );
+  }
+
+  void _handleMore(RecommendSectionKind section) {
+    final l10n = AppLocalizations.of(context)!;
+    final copy = _sectionCopy(l10n, section);
+    Navigator.of(context).push<void>(
+      MaterialPageRoute<void>(
+        builder: (_) => PlaylistDetailPage(
+          title: copy.$1,
+          subtitle: copy.$2,
+          dramas: recommendSectionDramas(
+            kind: section,
+            source: widget.feedController.dramas,
+            categories: context.read<CategoryController>(),
+          ),
+        ),
+      ),
+    );
+  }
+
+  (String, String) _sectionCopy(
+    AppLocalizations l10n,
+    RecommendSectionKind section,
+  ) {
+    return switch (section) {
+      RecommendSectionKind.hits => (
+        l10n.weeklyHitsTitle,
+        l10n.weeklyHitsSubtitle,
+      ),
+      RecommendSectionKind.newReleases => (
+        l10n.weeklyNewTitle,
+        l10n.weeklyNewSubtitle,
+      ),
+      RecommendSectionKind.costume => (
+        l10n.costumeAwardsTitle,
+        l10n.costumeAwardsSubtitle,
+      ),
+    };
+  }
+
+  Future<void> _openDrama(Drama drama, {String? episodeId}) async {
+    await playDramaFromCatalog(context, drama, episodeId: episodeId);
+  }
+}
+
+class _RecommendFeedSkeleton extends StatelessWidget {
+  const _RecommendFeedSkeleton();
+
+  @override
+  Widget build(BuildContext context) {
+    return const ColoredBox(
+      key: Key('recommend-feed-skeleton'),
+      color: AppColors.mediaBlack,
+      child: Stack(
+        children: [
+          Center(
+            child: SizedBox(
+              width: 132,
+              height: 176,
+              child: DecoratedBox(
+                decoration: BoxDecoration(
+                  color: AppColors.skeletonSurface,
+                  borderRadius: BorderRadius.all(Radius.circular(12)),
+                ),
+              ),
+            ),
+          ),
+          Positioned(
+            left: 14,
+            right: 72,
+            bottom: 42,
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                _SkeletonLine(width: 190, height: 18),
+                SizedBox(height: 10),
+                _SkeletonLine(width: 140, height: 12),
+                SizedBox(height: 8),
+                _SkeletonLine(width: 220, height: 10),
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class _SkeletonLine extends StatelessWidget {
+  const _SkeletonLine({required this.width, required this.height});
+
+  final double width;
+  final double height;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: width,
+      height: height,
+      decoration: BoxDecoration(
+        color: AppColors.skeletonSurface,
+        borderRadius: BorderRadius.circular(6),
+      ),
+    );
+  }
+}
+
+class _KeepAliveTab extends StatefulWidget {
+  const _KeepAliveTab({super.key, required this.child});
+
+  final Widget child;
+
+  @override
+  State<_KeepAliveTab> createState() => _KeepAliveTabState();
+}
+
+class _KeepAliveTabState extends State<_KeepAliveTab>
+    with AutomaticKeepAliveClientMixin<_KeepAliveTab> {
+  @override
+  bool get wantKeepAlive => true;
+
+  @override
+  Widget build(BuildContext context) {
+    super.build(context);
+    return widget.child;
+  }
+}
diff --git a/lib/pages/recommend/recommend_types.dart b/lib/pages/recommend/recommend_types.dart
new file mode 100644
index 0000000..8c75b4a
--- /dev/null
+++ b/lib/pages/recommend/recommend_types.dart
@@ -0,0 +1,3 @@
+// Author: fruit.com.cn
+
+enum RecommendInnerTab { feed, playlists, allDramas }
diff --git a/lib/pages/recommend/widgets/all_dramas_filter_grid.dart b/lib/pages/recommend/widgets/all_dramas_filter_grid.dart
new file mode 100644
index 0000000..9e436bd
--- /dev/null
+++ b/lib/pages/recommend/widgets/all_dramas_filter_grid.dart
@@ -0,0 +1,371 @@
+// Author: fruit.com.cn
+
+import 'dart:async';
+
+import 'package:flutter/material.dart';
+
+import '../../../core/data/models/drama.dart';
+import '../../../core/data/services/home_feed_controller.dart';
+import '../../../core/theme/app_colors.dart';
+import '../../../core/theme/app_dimens.dart';
+import '../../../core/widgets/app_pull_to_refresh.dart';
+import '../../../core/widgets/empty_state.dart';
+import '../../../core/widgets/paged_list_footer.dart';
+import '../../../l10n/app_localizations.dart';
+import '../../home/widgets/home_drama_classification.dart';
+import '../../home/widgets/home_feed_card.dart';
+
+const double _loadMoreThreshold = 240;
+const List<String> _modernTerms = ['现代', 'modern', 'moderno'];
+const List<String> _reversalTerms = ['逆袭', 'comeback', 'balas'];
+
+class AllDramasFilterGrid extends StatefulWidget {
+  const AllDramasFilterGrid({
+    super.key,
+    required this.feedController,
+    required this.onOpenDrama,
+  });
+
+  final HomeFeedController feedController;
+  final ValueChanged<Drama> onOpenDrama;
+
+  @override
+  State<AllDramasFilterGrid> createState() => _AllDramasFilterGridState();
+}
+
+class _AllDramasFilterGridState extends State<AllDramasFilterGrid> {
+  String _region = 'all';
+  String _audio = 'all';
+  String? _genre;
+  bool _newest = false;
+
+  @override
+  Widget build(BuildContext context) {
+    final l10n = AppLocalizations.of(context)!;
+    final dramas = _filtered();
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        final itemWidth =
+            (constraints.maxWidth -
+                AppDimens.allDramasHorizontal * 2 -
+                AppDimens.allDramasGridGap * 2) /
+            3;
+        final itemExtent =
+            itemWidth / AppDimens.cardCoverAspectRatio +
+            AppDimens.homeCardBodyExtent;
+        return Column(
+          crossAxisAlignment: CrossAxisAlignment.stretch,
+          children: [
+            _filters(l10n),
+            Expanded(
+              child: NotificationListener<ScrollNotification>(
+                onNotification: _onScroll,
+                child: AppPullToRefresh(
+                  key: const Key('all-dramas-refresh'),
+                  onRefresh: () async {
+                    await widget.feedController.refreshCurrent();
+                  },
+                  child: CustomScrollView(
+                    key: const Key('all-dramas-scroll'),
+                    physics: AppPullToRefresh.physics,
+                    slivers: [
+                      if (dramas.isEmpty)
+                        SliverFillRemaining(
+                          hasScrollBody: false,
+                          child: EmptyState(
+                            key: const Key('all-dramas-empty'),
+                            icon: Icons.movie_filter_outlined,
+                            title: l10n.homeGridFilterEmpty,
+                            actionLabel: l10n.homeGridClearFilter,
+                            onAction: () => setState(() {
+                              _region = 'all';
+                              _audio = 'all';
+                              _genre = null;
+                            }),
+                          ),
+                        )
+                      else
+                        SliverPadding(
+                          padding: const EdgeInsets.symmetric(
+                            horizontal: AppDimens.allDramasHorizontal,
+                          ),
+                          sliver: SliverGrid(
+                            key: const Key('all-dramas-grid'),
+                            gridDelegate:
+                                SliverGridDelegateWithFixedCrossAxisCount(
+                                  crossAxisCount: 3,
+                                  crossAxisSpacing: AppDimens.allDramasGridGap,
+                                  mainAxisSpacing:
+                                      AppDimens.allDramasGridRowGap,
+                                  mainAxisExtent: itemExtent,
+                                ),
+                            delegate: SliverChildBuilderDelegate(
+                              (context, index) => HomeFeedCard(
+                                drama: dramas[index],
+                                onTap: () => widget.onOpenDrama(dramas[index]),
+                              ),
+                              childCount: dramas.length,
+                            ),
+                          ),
+                        ),
+                      SliverToBoxAdapter(
+                        child: Padding(
+                          padding: const EdgeInsets.only(
+                            bottom: AppDimens.spaceXl,
+                          ),
+                          child: PagedListFooter(
+                            loading: widget.feedController.loadingMore,
+                            errorMessage:
+                                widget.feedController.lastError == null
+                                ? null
+                                : l10n.catalogError,
+                            onRetry: widget.feedController.loadMore,
+                          ),
+                        ),
+                      ),
+                    ],
+                  ),
+                ),
+              ),
+            ),
+          ],
+        );
+      },
+    );
+  }
+
+  Widget _filters(AppLocalizations l10n) {
+    final genres = _availableGenres(l10n);
+    return Padding(
+      padding: const EdgeInsets.fromLTRB(
+        AppDimens.allDramasHorizontal,
+        0,
+        AppDimens.allDramasHorizontal,
+        AppDimens.allDramasFilterToGridGap,
+      ),
+      child: Column(
+        key: const Key('all-dramas-filters'),
+        children: [
+          _selectableRow(
+            0,
+            [
+              (id: 'all', label: l10n.all),
+              (id: 'local', label: l10n.localFilter),
+              (id: 'asia', label: l10n.asiaFilter),
+              (id: 'western', label: l10n.westernFilter),
+            ],
+            selected: _region,
+            onSelected: (value) => setState(() => _region = value),
+          ),
+          _selectableRow(
+            1,
+            [
+              (id: 'all', label: l10n.all),
+              (id: 'subtitles', label: l10n.subtitlesOnlyFilter),
+              (id: 'dubbed', label: l10n.dubbedFilter),
+            ],
+            selected: _audio,
+            onSelected: (value) => setState(() => _audio = value),
+          ),
+          _genreRow(2, genres, l10n),
+          _sortRow(l10n),
+        ],
+      ),
+    );
+  }
+
+  Widget _selectableRow(
+    int row,
+    List<({String id, String label})> options, {
+    required String selected,
+    required ValueChanged<String> onSelected,
+  }) {
+    return _filterRow(
+      row: row,
+      child: _horizontalChipScroll(
+        scrollKey: Key('all-filter-scroll-$row'),
+        chips: [
+          for (var index = 0; index < options.length; index++) ...[
+            _chip(
+              key: Key('all-filter-${options[index].id}'),
+              label: options[index].label,
+              selected: selected == options[index].id,
+              onTap: () => onSelected(options[index].id),
+            ),
+            if (index < options.length - 1)
+              const SizedBox(width: AppDimens.filterItemGap),
+          ],
+        ],
+      ),
+    );
+  }
+
+  Widget _horizontalChipScroll({
+    required Key scrollKey,
+    required List<Widget> chips,
+  }) {
+    return LayoutBuilder(
+      builder: (context, constraints) => SingleChildScrollView(
+        key: scrollKey,
+        scrollDirection: Axis.horizontal,
+        physics: const BouncingScrollPhysics(),
+        child: ConstrainedBox(
+          constraints: BoxConstraints(minWidth: constraints.maxWidth),
+          child: Row(
+            mainAxisSize: MainAxisSize.min,
+            mainAxisAlignment: MainAxisAlignment.start,
+            crossAxisAlignment: CrossAxisAlignment.center,
+            children: chips,
+          ),
+        ),
+      ),
+    );
+  }
+
+  Widget _filterRow({
+    required int row,
+    required Widget child,
+    double height = AppDimens.filterChipHeight,
+  }) {
+    return Padding(
+      key: Key('all-filter-row-$row'),
+      padding: EdgeInsets.only(bottom: row < 3 ? AppDimens.filterRowGap : 0),
+      child: SizedBox(height: height, child: child),
+    );
+  }
+
+  Widget _genreRow(
+    int row,
+    List<({String id, String label})> options,
+    AppLocalizations l10n,
+  ) {
+    return _selectableRow(
+      row,
+      [
+        (id: 'all', label: l10n.all),
+        for (final genre in options) (id: genre.id, label: genre.label),
+      ],
+      selected: _genre ?? 'all',
+      onSelected: (value) =>
+          setState(() => _genre = value == 'all' ? null : value),
+    );
+  }
+
+  Widget _chip({
+    Key? key,
+    required String label,
+    required bool selected,
+    required VoidCallback onTap,
+  }) {
+    return InkWell(
+      key: key,
+      onTap: onTap,
+      borderRadius: BorderRadius.circular(AppDimens.filterChipRadius),
+      child: Container(
+        height: AppDimens.filterChipHeight,
+        padding: const EdgeInsets.symmetric(
+          horizontal: AppDimens.filterChipHorizontalPadding,
+        ),
+        alignment: Alignment.center,
+        decoration: BoxDecoration(
+          color: selected
+              ? AppColors.filterChipSelected
+              : AppColors.transparent,
+          borderRadius: BorderRadius.circular(AppDimens.filterChipRadius),
+        ),
+        child: Text(
+          label,
+          style: TextStyle(
+            color: selected
+                ? AppColors.filterChipTextSelected
+                : AppColors.filterChipTextInactive,
+            fontSize: AppDimens.filterChipFont,
+            fontWeight: selected ? FontWeight.w600 : FontWeight.w400,
+            height: 1,
+          ),
+        ),
+      ),
+    );
+  }
+
+  Widget _sortRow(AppLocalizations l10n) {
+    return _filterRow(
+      row: 3,
+      child: _horizontalChipScroll(
+        scrollKey: const Key('all-filter-scroll-3'),
+        chips: [
+          _chip(
+            key: const Key('all-sort-hot'),
+            label: l10n.hot,
+            selected: !_newest,
+            onTap: () => setState(() => _newest = false),
+          ),
+          const SizedBox(width: AppDimens.filterItemGap),
+          _chip(
+            key: const Key('all-sort-new'),
+            label: l10n.newest,
+            selected: _newest,
+            onTap: () => setState(() => _newest = true),
+          ),
+        ],
+      ),
+    );
+  }
+
+  List<({String id, String label})> _availableGenres(AppLocalizations l10n) {
+    final definitions = [
+      (id: 'reversal', label: l10n.reversalFilter, terms: _reversalTerms),
+      (id: 'uplifting', label: l10n.homeTagUplifting, terms: <String>[]),
+      (id: 'modern', label: l10n.modernFilter, terms: _modernTerms),
+      (id: 'sweet', label: l10n.homeTagSweet, terms: <String>[]),
+      (id: 'angst', label: l10n.homeTagAngst, terms: <String>[]),
+    ];
+    return definitions
+        .map((definition) => (id: definition.id, label: definition.label))
+        .toList(growable: false);
+  }
+
+  List<Drama> _filtered() {
+    if (_region != 'all' || _audio != 'all') return const [];
+    final dramas = widget.feedController.dramas
+        .where((drama) {
+          return _genre == null || _matchesGenre(drama, _genre!, const []);
+        })
+        .toList(growable: false);
+    if (_newest) {
+      return [...dramas]..sort((a, b) {
+        final left = publishedAtForDrama(a);
+        final right = publishedAtForDrama(b);
+        if (left == null && right == null) return b.id.compareTo(a.id);
+        if (left == null) return 1;
+        if (right == null) return -1;
+        return right.compareTo(left);
+      });
+    }
+    return [...dramas]..sort((a, b) => b.viewCount.compareTo(a.viewCount));
+  }
+
+  bool _matchesGenre(Drama drama, String id, List<String> terms) {
+    if (id == 'reversal' ||
+        id == 'uplifting' ||
+        id == 'sweet' ||
+        id == 'angst') {
+      return matchesHomeTag(drama, id == 'reversal' ? 'uplifting' : id);
+    }
+    final text = '${drama.genre} ${drama.category}'.toLowerCase();
+    return terms.any(text.contains);
+  }
+
+  bool _onScroll(ScrollNotification notification) {
+    if (notification.depth != 0) return false;
+    final reachedBottom =
+        notification.metrics.extentAfter <= _loadMoreThreshold;
+    if (reachedBottom &&
+        (notification is ScrollUpdateNotification ||
+            notification is ScrollEndNotification ||
+            notification is OverscrollNotification)) {
+      unawaited(widget.feedController.loadMore());
+    }
+    return false;
+  }
+}
diff --git a/lib/pages/recommend/widgets/playlist_detail_page.dart b/lib/pages/recommend/widgets/playlist_detail_page.dart
new file mode 100644
index 0000000..3eb0dbc
--- /dev/null
+++ b/lib/pages/recommend/widgets/playlist_detail_page.dart
@@ -0,0 +1,237 @@
+// Author: fruit.com.cn
+
+import 'package:flutter/material.dart';
+
+import '../../../core/data/models/drama.dart';
+import '../../../core/theme/app_colors.dart';
+import '../../../core/theme/app_dimens.dart';
+import '../../../core/theme/app_theme.dart';
+import '../../../core/widgets/remote_image.dart';
+import '../../home/widgets/home_feed_card.dart';
+import '../../player/open_player.dart';
+
+const double _collageHeight = 188;
+const int _collageCoverCount = 5;
+const double _pageHorizontal = 14;
+const double _gridGap = 10;
+const double _sprocketBand = 22;
+const Color _filmBody = Color(0xFF161311);
+const Color _filmHole = Color(0xFFE6D3BE);
+
+/// 剧单「更多」：顶部拼图、与剧单一致的标题描述，以及两列卡片。
+class PlaylistDetailPage extends StatelessWidget {
+  const PlaylistDetailPage({
+    super.key,
+    required this.title,
+    required this.subtitle,
+    required this.dramas,
+  });
+
+  final String title;
+  final String subtitle;
+  final List<Drama> dramas;
+
+  @override
+  Widget build(BuildContext context) {
+    final width = MediaQuery.sizeOf(context).width;
+    final itemWidth = (width - _pageHorizontal * 2 - _gridGap) / 2;
+    final itemExtent =
+        itemWidth / AppDimens.cardCoverAspectRatio + AppDimens.homeCardBodyExtent;
+    return Scaffold(
+      key: const Key('playlist-detail-page'),
+      backgroundColor: AppColors.ink,
+      body: DecoratedBox(
+        decoration: const BoxDecoration(gradient: AppTheme.pageGradient),
+        child: SafeArea(
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              IconButton(
+                key: const Key('playlist-detail-back'),
+                onPressed: () => Navigator.of(context).maybePop(),
+                icon: const Icon(Icons.chevron_left_rounded),
+                color: AppColors.textPrimary,
+              ),
+              Expanded(child: _body(itemExtent)),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+
+  Widget _body(double itemExtent) {
+    return CustomScrollView(
+      key: const Key('playlist-detail-scroll'),
+      slivers: [
+        SliverPadding(
+          padding: const EdgeInsets.fromLTRB(
+            _pageHorizontal,
+            0,
+            _pageHorizontal,
+            12,
+          ),
+          sliver: SliverToBoxAdapter(child: _PlaylistCollage(dramas: dramas)),
+        ),
+        SliverPadding(
+          padding: const EdgeInsets.symmetric(horizontal: _pageHorizontal),
+          sliver: SliverToBoxAdapter(child: _heading()),
+        ),
+        const SliverToBoxAdapter(child: SizedBox(height: 16)),
+        SliverPadding(
+          padding: const EdgeInsets.fromLTRB(
+            _pageHorizontal,
+            0,
+            _pageHorizontal,
+            24,
+          ),
+          sliver: SliverGrid(
+            key: const Key('playlist-detail-grid'),
+            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+              crossAxisCount: 2,
+              crossAxisSpacing: _gridGap,
+              mainAxisSpacing: 16,
+              mainAxisExtent: itemExtent,
+            ),
+            delegate: SliverChildBuilderDelegate(
+              (context, index) => HomeFeedCard(
+                drama: dramas[index],
+                onTap: () => playDramaFromCatalog(context, dramas[index]),
+              ),
+              childCount: dramas.length,
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+
+  Widget _heading() {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Text(
+          title,
+          key: const Key('playlist-detail-title'),
+          style: const TextStyle(
+            color: AppColors.textPrimary,
+            fontSize: AppDimens.recommendSectionTitle,
+            fontWeight: FontWeight.w700,
+          ),
+        ),
+        const SizedBox(height: 2),
+        Text(
+          subtitle,
+          key: const Key('playlist-detail-subtitle'),
+          style: const TextStyle(
+            color: AppColors.textSecondary,
+            fontSize: AppDimens.recommendSectionSubtitle,
+          ),
+        ),
+      ],
+    );
+  }
+}
+
+class _PlaylistCollage extends StatelessWidget {
+  const _PlaylistCollage({required this.dramas});
+
+  final List<Drama> dramas;
+
+  @override
+  Widget build(BuildContext context) {
+    final covers = dramas.take(_collageCoverCount).toList(growable: false);
+    return ClipRRect(
+      key: const Key('playlist-detail-collage'),
+      borderRadius: BorderRadius.circular(12),
+      child: SizedBox(
+        height: _collageHeight,
+        child: Stack(
+          fit: StackFit.expand,
+          children: [
+            const ColoredBox(color: _filmBody),
+            const CustomPaint(painter: _FilmSprocketPainter()),
+            Padding(
+              padding: const EdgeInsets.symmetric(
+                vertical: _sprocketBand,
+                horizontal: 8,
+              ),
+              child: covers.isEmpty
+                  ? const SizedBox.expand()
+                  : Row(
+                      children: [
+                        for (var index = 0; index < covers.length; index++) ...[
+                          if (index > 0) const SizedBox(width: 4),
+                          Expanded(child: _frame(covers[index])),
+                        ],
+                      ],
+                    ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget _frame(Drama drama) {
+    return ClipRRect(
+      borderRadius: BorderRadius.circular(2),
+      child: RemoteImage(
+        drama.posterUrl,
+        fit: BoxFit.cover,
+        showFallbackIcon: true,
+        fallbackColor: _filmBody,
+      ),
+    );
+  }
+}
+
+class _FilmSprocketPainter extends CustomPainter {
+  const _FilmSprocketPainter();
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    final paint = Paint()..color = _filmHole;
+    const holeWidth = 10.0;
+    const holeHeight = 7.0;
+    const gap = 8.0;
+    const inset = 6.0;
+    final step = holeWidth + gap;
+    final count = ((size.width - inset * 2 + gap) / step).floor();
+    if (count <= 0) return;
+    final used = count * step - gap;
+    var x = (size.width - used) / 2;
+    for (var index = 0; index < count; index++) {
+      _hole(canvas, paint, x, 7, holeWidth, holeHeight);
+      _hole(
+        canvas,
+        paint,
+        x,
+        size.height - 7 - holeHeight,
+        holeWidth,
+        holeHeight,
+      );
+      x += step;
+    }
+  }
+
+  void _hole(
+    Canvas canvas,
+    Paint paint,
+    double x,
+    double y,
+    double width,
+    double height,
+  ) {
+    canvas.drawRRect(
+      RRect.fromRectAndRadius(
+        Rect.fromLTWH(x, y, width, height),
+        const Radius.circular(1.5),
+      ),
+      paint,
+    );
+  }
+
+  @override
+  bool shouldRepaint(covariant _FilmSprocketPainter oldDelegate) => false;
+}
diff --git a/lib/pages/recommend/widgets/recommend_section_card.dart b/lib/pages/recommend/widgets/recommend_section_card.dart
new file mode 100644
index 0000000..8a0d477
--- /dev/null
+++ b/lib/pages/recommend/widgets/recommend_section_card.dart
@@ -0,0 +1,129 @@
+// Author: fruit.com.cn
+
+import 'package:flutter/material.dart';
+
+import '../../../core/data/models/drama.dart';
+import '../../../core/theme/app_colors.dart';
+import '../../../core/theme/app_dimens.dart';
+import '../../../core/widgets/cover_play_count.dart';
+import '../../../core/widgets/drama_cover_badge_ribbon.dart';
+import '../../../core/widgets/remote_image.dart';
+import '../../../l10n/app_localizations.dart';
+import '../../home/widgets/home_drama_classification.dart';
+
+final RegExp _tagSplitter = RegExp(r'[,/、·]');
+
+class RecommendSectionCard extends StatelessWidget {
+  const RecommendSectionCard({
+    super.key,
+    required this.sectionKey,
+    required this.drama,
+    required this.onTap,
+  });
+
+  final String sectionKey;
+  final Drama drama;
+  final VoidCallback onTap;
+
+  @override
+  Widget build(BuildContext context) {
+    final l10n = AppLocalizations.of(context)!;
+    return SizedBox(
+      width: AppDimens.recommendCardWidth,
+      child: InkWell(
+        key: Key('recommend-card-$sectionKey-${drama.id}'),
+        borderRadius: BorderRadius.circular(AppDimens.cardCoverRadius),
+        onTap: onTap,
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          mainAxisAlignment: MainAxisAlignment.start,
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            ClipRRect(
+              borderRadius: BorderRadius.circular(AppDimens.cardCoverRadius),
+              child: AspectRatio(
+                aspectRatio: AppDimens.cardCoverAspectRatio,
+                child: Stack(
+                  fit: StackFit.expand,
+                  children: [
+                    RemoteImage(
+                      drama.posterUrl,
+                      fit: BoxFit.cover,
+                      showFallbackIcon: true,
+                      fallbackColor: AppColors.contentSurface,
+                    ),
+                    if (isHotDrama(drama))
+                      Positioned(
+                        top: 0,
+                        right: 0,
+                        child: DramaCoverBadgeRibbon(
+                          label: l10n.homeBadgeHot,
+                          color: AppColors.badgeHot,
+                          keyPrefix: '$sectionKey-${drama.id}-hot',
+                        ),
+                      ),
+                    const Positioned(
+                      left: 0,
+                      right: 0,
+                      bottom: 0,
+                      child: CoverBottomScrim(),
+                    ),
+                    Positioned(
+                      right: AppDimens.cardPlayCountRight,
+                      bottom: AppDimens.cardPlayCountBottom,
+                      child: CoverPlayCount(
+                        key: Key('recommend-views-$sectionKey-${drama.id}'),
+                        count: drama.viewCount,
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+            ),
+            const SizedBox(height: AppDimens.cardCoverTitleGap),
+            Text(
+              drama.title,
+              key: Key('recommend-title-$sectionKey-${drama.id}'),
+              maxLines: 2,
+              overflow: TextOverflow.ellipsis,
+              style: const TextStyle(
+                color: AppColors.textPrimary,
+                fontSize: AppDimens.cardTitleFont,
+                fontWeight: FontWeight.w500,
+                height: AppDimens.cardTitleLineHeight,
+              ),
+            ),
+            const SizedBox(height: AppDimens.cardTitleTagGap),
+            _tags(),
+          ],
+        ),
+      ),
+    );
+  }
+
+  List<String> _cardTags() {
+    final seen = <String>{};
+    return [drama.genre, drama.category]
+        .expand((value) => value.split(_tagSplitter))
+        .map((value) => value.trim())
+        .where((value) => value.isNotEmpty && seen.add(value))
+        .take(3)
+        .toList(growable: false);
+  }
+
+  Widget _tags() {
+    final tags = _cardTags();
+    if (tags.isEmpty) return const SizedBox.shrink();
+    return Text(
+      tags.join(' | '),
+      key: Key('recommend-tags-$sectionKey-${drama.id}'),
+      maxLines: 1,
+      overflow: TextOverflow.ellipsis,
+      textAlign: TextAlign.left,
+      style: const TextStyle(
+        color: AppColors.textTertiary,
+        fontSize: AppDimens.cardTagFont,
+      ),
+    );
+  }
+}
diff --git a/lib/pages/recommend/widgets/recommend_sections_view.dart b/lib/pages/recommend/widgets/recommend_sections_view.dart
new file mode 100644
index 0000000..1133ce7
--- /dev/null
+++ b/lib/pages/recommend/widgets/recommend_sections_view.dart
@@ -0,0 +1,236 @@
+// Author: fruit.com.cn
+
+import 'package:flutter/material.dart';
+
+import '../../../core/data/models/content_category.dart';
+import '../../../core/data/models/drama.dart';
+import '../../../core/data/services/category_controller.dart';
+import '../../../core/data/services/home_feed_controller.dart';
+import '../../../core/theme/app_colors.dart';
+import '../../../core/theme/app_dimens.dart';
+import '../../../core/widgets/app_pull_to_refresh.dart';
+import '../../../l10n/app_localizations.dart';
+import '../../home/widgets/home_drama_classification.dart';
+import 'recommend_section_card.dart';
+
+const List<String> _costumeNames = ['古装', 'costume', 'kostum'];
+const int _sectionPreviewCount = 10;
+
+enum RecommendSectionKind { hits, newReleases, costume }
+
+class RecommendSectionsView extends StatelessWidget {
+  const RecommendSectionsView({
+    super.key,
+    required this.feedController,
+    required this.categories,
+    required this.onOpenDrama,
+    required this.onMore,
+  });
+
+  final HomeFeedController feedController;
+  final CategoryController categories;
+  final ValueChanged<Drama> onOpenDrama;
+  final ValueChanged<RecommendSectionKind> onMore;
+
+  @override
+  Widget build(BuildContext context) {
+    final l10n = AppLocalizations.of(context)!;
+    final source = feedController.dramas;
+    final hits = recommendSectionDramas(
+      kind: RecommendSectionKind.hits,
+      source: source,
+    );
+    final newest = recommendSectionDramas(
+      kind: RecommendSectionKind.newReleases,
+      source: source,
+    );
+    return AppPullToRefresh(
+      key: const Key('recommend-sections-refresh'),
+      onRefresh: () async {
+        await Future.wait([feedController.refreshCurrent(), categories.load()]);
+      },
+      child: ListView(
+        key: const Key('recommend-sections-scroll'),
+        physics: AppPullToRefresh.physics,
+        padding: const EdgeInsets.only(bottom: AppDimens.spaceXl),
+        children: [
+          _section(
+            context,
+            l10n,
+            key: 'hits',
+            title: l10n.weeklyHitsTitle,
+            subtitle: l10n.weeklyHitsSubtitle,
+            dramas: hits.take(_sectionPreviewCount).toList(),
+            onMore: () => onMore(RecommendSectionKind.hits),
+          ),
+          const SizedBox(height: AppDimens.spaceXl),
+          _section(
+            context,
+            l10n,
+            key: 'new',
+            title: l10n.weeklyNewTitle,
+            subtitle: l10n.weeklyNewSubtitle,
+            dramas: newest.take(_sectionPreviewCount).toList(),
+            onMore: () => onMore(RecommendSectionKind.newReleases),
+          ),
+          const SizedBox(height: AppDimens.spaceXl),
+          _section(
+            context,
+            l10n,
+            key: 'costume',
+            title: l10n.costumeAwardsTitle,
+            subtitle: l10n.costumeAwardsSubtitle,
+            dramas: recommendSectionDramas(
+              kind: RecommendSectionKind.costume,
+              source: source,
+              categories: categories,
+            ).take(_sectionPreviewCount).toList(),
+            onMore: () => onMore(RecommendSectionKind.costume),
+          ),
+        ],
+      ),
+    );
+  }
+
+  Widget _section(
+    BuildContext context,
+    AppLocalizations l10n, {
+    required String key,
+    required String title,
+    required String subtitle,
+    required List<Drama> dramas,
+    required VoidCallback onMore,
+  }) {
+    return Column(
+      key: Key('recommend-section-$key'),
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Padding(
+          padding: const EdgeInsets.symmetric(
+            horizontal: AppDimens.feedPageHorizontal,
+          ),
+          child: Row(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Expanded(
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    Text(
+                      title,
+                      style: const TextStyle(
+                        color: AppColors.textPrimary,
+                        fontSize: AppDimens.recommendSectionTitle,
+                        fontWeight: FontWeight.w700,
+                      ),
+                    ),
+                    const SizedBox(height: 2),
+                    Text(
+                      subtitle,
+                      style: const TextStyle(
+                        color: AppColors.textSecondary,
+                        fontSize: AppDimens.recommendSectionSubtitle,
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+              TextButton(
+                key: Key('recommend-more-$key'),
+                onPressed: onMore,
+                style: TextButton.styleFrom(
+                  foregroundColor: AppColors.textSecondary,
+                  padding: const EdgeInsets.symmetric(horizontal: 4),
+                  minimumSize: const Size(0, 30),
+                ),
+                child: Row(
+                  children: [
+                    Text(
+                      l10n.more,
+                      style: const TextStyle(
+                        color: AppColors.textSecondary,
+                        fontSize: AppDimens.recommendSectionMore,
+                        fontWeight: FontWeight.w500,
+                      ),
+                    ),
+                    const Icon(Icons.chevron_right_rounded, size: 16),
+                  ],
+                ),
+              ),
+            ],
+          ),
+        ),
+        const SizedBox(height: AppDimens.spaceMd),
+        SizedBox(
+          height: AppDimens.recommendRowHeight,
+          child: ListView.separated(
+            key: Key('recommend-row-$key'),
+            scrollDirection: Axis.horizontal,
+            padding: const EdgeInsets.symmetric(
+              horizontal: AppDimens.feedPageHorizontal,
+            ),
+            itemCount: dramas.length,
+            separatorBuilder: (_, _) =>
+                const SizedBox(width: AppDimens.homeGridGap),
+            itemBuilder: (context, index) => RecommendSectionCard(
+              sectionKey: key,
+              drama: dramas[index],
+              onTap: () => onOpenDrama(dramas[index]),
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+}
+
+/// 剧单分区的完整片单，横滑预览和更多页共用同一排序。
+List<Drama> recommendSectionDramas({
+  required RecommendSectionKind kind,
+  required List<Drama> source,
+  CategoryController? categories,
+}) {
+  switch (kind) {
+    case RecommendSectionKind.hits:
+      return [...source]..sort((a, b) => b.viewCount.compareTo(a.viewCount));
+    case RecommendSectionKind.newReleases:
+      return [...source]..sort(_newestFirst);
+    case RecommendSectionKind.costume:
+      return _costumeDramas(source, categories);
+  }
+}
+
+int _newestFirst(Drama leftDrama, Drama rightDrama) {
+  final left = publishedAtForDrama(leftDrama);
+  final right = publishedAtForDrama(rightDrama);
+  if (left == null && right == null) return rightDrama.id.compareTo(leftDrama.id);
+  if (left == null) return 1;
+  if (right == null) return -1;
+  return right.compareTo(left);
+}
+
+List<Drama> _costumeDramas(List<Drama> source, CategoryController? categories) {
+  final category = _costumeCategory(categories);
+  if (category != null) {
+    final fromCategory = categories!.dramasOf(category.id);
+    if (fromCategory.isNotEmpty) return fromCategory;
+  }
+  return source.where(_isCostumeDrama).toList(growable: false);
+}
+
+ContentCategory? _costumeCategory(CategoryController? categories) {
+  if (categories == null) return null;
+  for (final category in categories.categories) {
+    if (_containsCostume(category.name)) return category;
+  }
+  return null;
+}
+
+bool _isCostumeDrama(Drama drama) {
+  return _containsCostume(drama.category) || _containsCostume(drama.genre);
+}
+
+bool _containsCostume(String value) {
+  final normalized = value.toLowerCase();
+  return _costumeNames.any(normalized.contains);
+}
diff --git a/lib/pages/recommend/widgets/recommend_top_nav.dart b/lib/pages/recommend/widgets/recommend_top_nav.dart
new file mode 100644
index 0000000..328b554
--- /dev/null
+++ b/lib/pages/recommend/widgets/recommend_top_nav.dart
@@ -0,0 +1,124 @@
+// Author: fruit.com.cn
+
+import 'package:flutter/material.dart';
+
+import '../../../core/theme/app_colors.dart';
+import '../../../core/theme/app_dimens.dart';
+import '../../../l10n/app_localizations.dart';
+import '../recommend_types.dart';
+
+const double _navHeight = 56;
+const double _tabGap = 22;
+const double _tabFont = 17;
+const double _searchHitSize = 40;
+const double _searchIconSize = 26;
+
+class RecommendTopNav extends StatelessWidget {
+  const RecommendTopNav({
+    super.key,
+    required this.selected,
+    required this.onSelected,
+    required this.onSearch,
+    this.onVideo = false,
+  });
+
+  static const double height = _navHeight;
+
+  final RecommendInnerTab selected;
+  final ValueChanged<RecommendInnerTab> onSelected;
+  final VoidCallback onSearch;
+  final bool onVideo;
+
+  @override
+  Widget build(BuildContext context) {
+    final l10n = AppLocalizations.of(context)!;
+    final items = [
+      (RecommendInnerTab.feed, l10n.recommendTopTab, 'recommend'),
+      (RecommendInnerTab.playlists, l10n.playlistTopTab, 'playlist'),
+      (RecommendInnerTab.allDramas, l10n.allDramasTopTab, 'all'),
+    ];
+    final shadows = onVideo
+        ? const [Shadow(color: AppColors.mediaBlack, blurRadius: 6)]
+        : null;
+    return SizedBox(
+      key: const Key('recommend-top-nav'),
+      height: height,
+      child: Padding(
+        padding: const EdgeInsets.symmetric(
+          horizontal: AppDimens.feedPageHorizontal,
+        ),
+        child: Stack(
+          alignment: Alignment.center,
+          children: [
+            Row(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                for (var index = 0; index < items.length; index++) ...[
+                  if (index > 0) const SizedBox(width: _tabGap),
+                  _tab(
+                    key: Key('recommend-tab-${items[index].$3}'),
+                    label: items[index].$2,
+                    selected: selected == items[index].$1,
+                    shadows: shadows,
+                    onTap: () => onSelected(items[index].$1),
+                  ),
+                ],
+              ],
+            ),
+            Align(
+              alignment: Alignment.centerRight,
+              child: SizedBox.square(
+                dimension: _searchHitSize,
+                child: IconButton(
+                  key: const Key('recommend-search'),
+                  tooltip: l10n.search,
+                  onPressed: onSearch,
+                  padding: EdgeInsets.zero,
+                  constraints: const BoxConstraints.tightFor(
+                    width: _searchHitSize,
+                    height: _searchHitSize,
+                  ),
+                  iconSize: _searchIconSize,
+                  color: AppColors.textPrimary,
+                  icon: const Icon(Icons.search_rounded),
+                ),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget _tab({
+    required Key key,
+    required String label,
+    required bool selected,
+    required List<Shadow>? shadows,
+    required VoidCallback onTap,
+  }) {
+    return GestureDetector(
+      key: key,
+      behavior: HitTestBehavior.opaque,
+      onTap: onTap,
+      child: SizedBox(
+        height: height,
+        child: Center(
+          child: Text(
+            label,
+            maxLines: 1,
+            style: TextStyle(
+              color: selected
+                  ? AppColors.textPrimary
+                  : AppColors.textTabInactive,
+              fontSize: _tabFont,
+              fontWeight: selected ? FontWeight.w700 : FontWeight.w400,
+              letterSpacing: 0,
+              shadows: shadows,
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
diff --git a/lib/pages/reserve/reserve_page.dart b/lib/pages/reserve/reserve_page.dart
index 551449d..d5e1385 100644
--- a/lib/pages/reserve/reserve_page.dart
+++ b/lib/pages/reserve/reserve_page.dart
@@ -5,14 +5,15 @@ import 'package:provider/provider.dart';
 
 import '../../core/data/services/catalog_controller.dart';
 import '../../core/theme/app_colors.dart';
+import '../../core/theme/app_dimens.dart';
 import '../../core/widgets/app_pull_to_refresh.dart';
 import '../../core/widgets/subpage_header.dart';
 import '../../l10n/app_localizations.dart';
 import '../new_releases/new_releases_page.dart';
 
-const double _ticketRadius = 20;
+const double _ticketRadius = AppDimens.cardRadius;
 const double _notchSize = 24;
-const Color _ticketDash = Color(0x66FF7A1A);
+const Color _ticketDash = AppColors.primaryBorder;
 
 /// 预约页：档期周历 + 电影票式空态 + 预约权益说明。
 class ReservePage extends StatefulWidget {
@@ -131,7 +132,7 @@ class _ReservePageState extends State<ReservePage> {
             Text(
               weekdays[date.weekday - 1],
               style: TextStyle(
-                color: selected ? Colors.white : AppColors.muted,
+                color: selected ? AppColors.onPrimary : AppColors.muted,
                 fontSize: 11,
                 fontWeight: FontWeight.w600,
               ),
@@ -140,7 +141,7 @@ class _ReservePageState extends State<ReservePage> {
             Text(
               '${date.day}',
               style: TextStyle(
-                color: selected ? Colors.white : AppColors.onSurface,
+                color: selected ? AppColors.onPrimary : AppColors.onSurface,
                 fontSize: 15,
                 fontWeight: FontWeight.w800,
               ),
@@ -163,6 +164,7 @@ class _ReservePageState extends State<ReservePage> {
             decoration: BoxDecoration(
               color: AppColors.card,
               borderRadius: BorderRadius.circular(_ticketRadius),
+              border: Border.all(color: AppColors.border),
             ),
             child: Column(
               children: [
@@ -207,7 +209,7 @@ class _ReservePageState extends State<ReservePage> {
                     ),
                     style: FilledButton.styleFrom(
                       backgroundColor: AppColors.blue,
-                      foregroundColor: Colors.white,
+                      foregroundColor: AppColors.onPrimary,
                       shape: RoundedRectangleBorder(
                         borderRadius: BorderRadius.circular(12),
                       ),
@@ -285,7 +287,7 @@ class _ReservePageState extends State<ReservePage> {
                   child: Text(
                     '${index + 1}',
                     style: const TextStyle(
-                      color: Colors.white,
+                      color: AppColors.onPrimary,
                       fontSize: 12,
                       fontWeight: FontWeight.w800,
                     ),
diff --git a/lib/pages/settings/settings_page.dart b/lib/pages/settings/settings_page.dart
index bd8cc4e..ed5b20b 100644
--- a/lib/pages/settings/settings_page.dart
+++ b/lib/pages/settings/settings_page.dart
@@ -7,6 +7,7 @@ import 'package:provider/provider.dart';
 
 import '../../core/data/services/auth_controller.dart';
 import '../../core/theme/app_colors.dart';
+import '../../core/theme/app_dimens.dart';
 import '../../core/theme/app_theme.dart';
 import '../../core/widgets/auth_gate.dart';
 import '../../core/widgets/plain_page_scaffold.dart';
@@ -23,7 +24,7 @@ class SettingsPage extends StatelessWidget {
     final l10n = AppLocalizations.of(context)!;
     final auth = context.watch<AuthController>();
     return Theme(
-      data: AppTheme.light(),
+      data: AppTheme.dark(),
       child: PlainPageScaffold(
         pageKey: const Key('settings-page'),
         backKey: const Key('settings-back'),
@@ -47,7 +48,10 @@ class SettingsPage extends StatelessWidget {
   Widget _noticesTile(BuildContext context, AppLocalizations l10n) {
     return Material(
       color: AppColors.card,
-      borderRadius: BorderRadius.circular(14),
+      shape: RoundedRectangleBorder(
+        borderRadius: BorderRadius.circular(AppDimens.cardRadius),
+        side: const BorderSide(color: AppColors.border),
+      ),
       clipBehavior: Clip.antiAlias,
       child: ListTile(
         key: const Key('settings-notices'),
diff --git a/lib/pages/store/store_page.dart b/lib/pages/store/store_page.dart
index beed81a..3c00467 100644
--- a/lib/pages/store/store_page.dart
+++ b/lib/pages/store/store_page.dart
@@ -57,7 +57,7 @@ class _StorePageState extends State<StorePage> {
     final l10n = AppLocalizations.of(context)!;
     final isVip = widget.type == StoreController.vipType;
     return Theme(
-      data: AppTheme.light(),
+      data: AppTheme.dark(),
       child: PlainPageScaffold(
         pageKey: const Key('store-page'),
         backKey: const Key('store-back'),
@@ -151,8 +151,8 @@ class _ProductTile extends StatelessWidget {
       padding: const EdgeInsets.fromLTRB(14, 14, 12, 14),
       decoration: BoxDecoration(
         color: AppColors.card,
-        borderRadius: BorderRadius.circular(16),
-        border: Border.all(color: AppColors.gold.withValues(alpha: 0.26)),
+        borderRadius: BorderRadius.circular(AppDimens.cardRadius),
+        border: Border.all(color: AppColors.border),
       ),
       child: Row(
         children: [
diff --git a/lib/pages/wallet/wallet_page.dart b/lib/pages/wallet/wallet_page.dart
index 72a5948..359d7d1 100644
--- a/lib/pages/wallet/wallet_page.dart
+++ b/lib/pages/wallet/wallet_page.dart
@@ -46,7 +46,7 @@ class _WalletPageState extends State<WalletPage> {
     final l10n = AppLocalizations.of(context)!;
     final wallet = context.watch<WalletController>();
     return Theme(
-      data: AppTheme.light(),
+      data: AppTheme.dark(),
       child: PlainPageScaffold(
         pageKey: const Key('wallet-page'),
         backKey: const Key('wallet-back'),
@@ -183,20 +183,9 @@ class _BalanceHero extends StatelessWidget {
       key: const Key('wallet-balance-card'),
       padding: const EdgeInsets.fromLTRB(20, 22, 20, 20),
       decoration: BoxDecoration(
-        borderRadius: BorderRadius.circular(20),
-        gradient: const LinearGradient(
-          begin: Alignment.topLeft,
-          end: Alignment.bottomRight,
-          colors: [AppColors.goldCard, AppColors.card],
-        ),
-        border: Border.all(color: AppColors.gold.withValues(alpha: 0.35)),
-        boxShadow: [
-          BoxShadow(
-            color: AppColors.gold.withValues(alpha: 0.08),
-            blurRadius: 28,
-            offset: const Offset(0, 14),
-          ),
-        ],
+        color: AppColors.card,
+        borderRadius: BorderRadius.circular(AppDimens.cardRadius),
+        border: Border.all(color: AppColors.border),
       ),
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
diff --git a/lib/pages/watch_records/watch_records_page.dart b/lib/pages/watch_records/watch_records_page.dart
index 5daa2b8..b996c22 100644
--- a/lib/pages/watch_records/watch_records_page.dart
+++ b/lib/pages/watch_records/watch_records_page.dart
@@ -17,6 +17,7 @@ import '../../core/theme/app_theme.dart';
 import '../../core/widgets/app_pull_to_refresh.dart';
 import '../../core/widgets/auth_gate.dart';
 import '../../core/widgets/empty_state.dart';
+import '../../core/widgets/paged_list_footer.dart';
 import '../../core/widgets/subpage_header.dart';
 import '../../l10n/app_localizations.dart';
 import '../player/open_player.dart';
@@ -26,6 +27,7 @@ import 'widgets/watch_record_card.dart';
 const double _pageHorizontal = 14;
 const double _statsFontSize = 12;
 const double _emptyListHeight = 360;
+const double _loadMoreThreshold = 240;
 
 /// 独立观看记录页。
 class WatchRecordsPage extends StatelessWidget {
@@ -36,7 +38,7 @@ class WatchRecordsPage extends StatelessWidget {
     final signedIn = context.watch<AuthController>().isSignedIn;
     final l10n = AppLocalizations.of(context)!;
     return Theme(
-      data: AppTheme.light(),
+      data: AppTheme.dark(),
       child: Scaffold(
         key: const Key('watch-records-page'),
         backgroundColor: AppColors.ink,
@@ -138,34 +140,57 @@ class _WatchRecordsBodyState extends State<_WatchRecordsBody> {
             record: record,
             onRetry: () => controller.retryDetail(record.dramaId),
             onRemove: () => _remove(record.dramaId),
-            onOpen: record.drama == null ? null : () => _open(record),
+            onOpen: () => _open(record),
           ),
         ],
+        PagedListFooter(
+          loading: controller.loadingMore,
+          errorMessage: controller.loadMoreError == null
+              ? null
+              : errorText(l10n, controller.loadMoreError, l10n.progressError),
+          onRetry: controller.loadMore,
+        ),
       ],
     );
   }
 
   Widget _refreshable({required List<Widget> children}) {
-    return AppPullToRefresh(
-      onRefresh: controller.load,
-      child: ListView(
-        physics: AppPullToRefresh.physics,
-        padding: const EdgeInsets.fromLTRB(
-          _pageHorizontal,
-          4,
-          _pageHorizontal,
-          28,
+    return NotificationListener<ScrollNotification>(
+      onNotification: _onScroll,
+      child: AppPullToRefresh(
+        onRefresh: controller.load,
+        child: ListView(
+          physics: AppPullToRefresh.physics,
+          padding: const EdgeInsets.fromLTRB(
+            _pageHorizontal,
+            4,
+            _pageHorizontal,
+            28,
+          ),
+          children: children,
         ),
-        children: children,
       ),
     );
   }
 
+  bool _onScroll(ScrollNotification notification) {
+    if (notification.depth != 0) return false;
+    final reachedBottom =
+        notification.metrics.extentAfter <= _loadMoreThreshold;
+    if (reachedBottom &&
+        (notification is ScrollUpdateNotification ||
+            notification is ScrollEndNotification ||
+            notification is OverscrollNotification)) {
+      unawaited(controller.loadMore());
+    }
+    return false;
+  }
+
   Widget _summary(AppLocalizations l10n) {
     return Row(
       children: [
         Text(
-          l10n.watchRecordsCount(controller.records.length),
+          l10n.watchRecordsCount(controller.total),
           key: const Key('watch-records-count'),
           style: const TextStyle(
             color: AppColors.muted,
@@ -192,10 +217,20 @@ class _WatchRecordsBodyState extends State<_WatchRecordsBody> {
   }
 
   Future<void> _open(WatchRecord record) async {
+    final drama =
+        record.drama ?? await controller.detailForOpen(record.dramaId);
+    if (!mounted) return;
+    if (drama == null) {
+      final l10n = AppLocalizations.of(context)!;
+      ScaffoldMessenger.of(
+        context,
+      ).showSnackBar(SnackBar(content: Text(l10n.detailLoadFailed)));
+      return;
+    }
     final episodeId = record.progress.episodeId;
     await playDramaFromCatalog(
       context,
-      record.drama!,
+      drama,
       episodeId: episodeId.isEmpty ? null : episodeId,
     );
   }
diff --git a/lib/pages/watch_records/widgets/watch_record_card.dart b/lib/pages/watch_records/widgets/watch_record_card.dart
index 5bb67cc..4fa1f0b 100644
--- a/lib/pages/watch_records/widgets/watch_record_card.dart
+++ b/lib/pages/watch_records/widgets/watch_record_card.dart
@@ -5,11 +5,11 @@ import 'package:flutter/material.dart';
 import '../../../core/data/models/watch_record.dart';
 import '../../../core/formatting/localized_date_time.dart';
 import '../../../core/theme/app_colors.dart';
-import '../../../core/theme/app_theme.dart';
+import '../../../core/theme/app_dimens.dart';
 import '../../../core/widgets/remote_image.dart';
 import '../../../l10n/app_localizations.dart';
 
-const double _cardRadius = 14;
+const double _cardRadius = AppDimens.cardRadius;
 const double _cardPadding = 10;
 const double _coverWidth = 72;
 const double _coverHeight = 96;
@@ -39,17 +39,22 @@ class WatchRecordCard extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    if (record.detailFailed) {
+    final hasMetadata = record.hasDisplayMetadata;
+    if (record.detailFailed && !hasMetadata) {
       return _FailedRecordTile(record: record, onRetry: onRetry);
     }
     final drama = record.drama;
-    if (drama == null || record.detailLoading) {
+    if (!hasMetadata && (drama == null || record.detailLoading)) {
       return _loadingCard();
     }
     final l10n = AppLocalizations.of(context)!;
-    final episodeLabel = record.episodeNumber > 0
+    final episodeNumber = record.episodeNumber;
+    final episodeLabel = episodeNumber > 0
         ? l10n.episodeLabel(record.episodeNumber)
         : l10n.episodeUnavailable;
+    final title = record.displayTitle.isEmpty
+        ? episodeLabel
+        : record.displayTitle;
     return _card(
       onTap: onOpen,
       child: Stack(
@@ -60,10 +65,14 @@ class WatchRecordCard extends StatelessWidget {
               ClipRRect(
                 borderRadius: BorderRadius.circular(_coverRadius),
                 child: RemoteImage(
-                  drama.posterUrl,
+                  record.displayCover,
                   key: ValueKey('watch-record-cover-${record.dramaId}'),
                   width: _coverWidth,
                   height: _coverHeight,
+                  showFallbackIcon: true,
+                  fallbackIconKey: ValueKey(
+                    'watch-record-cover-placeholder-${record.dramaId}',
+                  ),
                 ),
               ),
               const SizedBox(width: 12),
@@ -74,7 +83,7 @@ class WatchRecordCard extends StatelessWidget {
                     crossAxisAlignment: CrossAxisAlignment.start,
                     children: [
                       Text(
-                        drama.title,
+                        title,
                         key: ValueKey('watch-record-title-${record.dramaId}'),
                         maxLines: 2,
                         overflow: TextOverflow.ellipsis,
@@ -85,14 +94,18 @@ class WatchRecordCard extends StatelessWidget {
                         ),
                       ),
                       const SizedBox(height: 4),
-                      Text(
-                        episodeLabel,
-                        key: ValueKey('watch-record-episode-${record.dramaId}'),
-                        style: const TextStyle(
-                          color: AppColors.muted,
-                          fontSize: _statsFontSize,
+                      if (title != episodeLabel) ...[
+                        Text(
+                          episodeLabel,
+                          key: ValueKey(
+                            'watch-record-episode-${record.dramaId}',
+                          ),
+                          style: const TextStyle(
+                            color: AppColors.muted,
+                            fontSize: _statsFontSize,
+                          ),
                         ),
-                      ),
+                      ],
                       const SizedBox(height: 8),
                       ClipRRect(
                         borderRadius: BorderRadius.circular(_progressRadius),
@@ -157,7 +170,7 @@ class WatchRecordCard extends StatelessWidget {
       key: ValueKey('watch-record-${record.dramaId}'),
       decoration: _cardDecoration(),
       child: Material(
-        color: Colors.transparent,
+        color: AppColors.transparent,
         borderRadius: BorderRadius.circular(_cardRadius),
         clipBehavior: Clip.antiAlias,
         child: InkWell(
@@ -174,7 +187,7 @@ class WatchRecordCard extends StatelessWidget {
   BoxDecoration _cardDecoration() => BoxDecoration(
     color: AppColors.card,
     borderRadius: BorderRadius.circular(_cardRadius),
-    boxShadow: const [AppTheme.cardShadow],
+    border: Border.all(color: AppColors.border),
   );
 
   Widget _removeButton(String tooltip) {
@@ -214,7 +227,7 @@ class _FailedRecordTile extends StatelessWidget {
       decoration: BoxDecoration(
         color: AppColors.card,
         borderRadius: BorderRadius.circular(_cardRadius),
-        boxShadow: const [AppTheme.cardShadow],
+        border: Border.all(color: AppColors.border),
       ),
       child: Container(
         key: ValueKey('watch-record-failed-${record.dramaId}'),
diff --git a/pubspec.yaml b/pubspec.yaml
index 5951cc5..c6d36cc 100644
--- a/pubspec.yaml
+++ b/pubspec.yaml
@@ -81,6 +81,7 @@ flutter:
   # the material Icons class.
   uses-material-design: true
   assets:
+    - assets/icon/
     - assets/icon/splash_logo.png
     - assets/icon/splash_logo_android12.png
     - assets/icon/rail/
@@ -120,18 +121,16 @@ flutter_launcher_icons:
   android: true
   ios: true
   image_path: assets/icon/fruitshorts.png
-  adaptive_icon_background: "#C4322A"
+  adaptive_icon_background: "#FF6B2C"
   adaptive_icon_foreground: assets/icon/fruitshorts.png
   remove_alpha_ios: true
 
 # 修改以下开屏配置后，必须重新执行：
 # dart run flutter_native_splash:create
 flutter_native_splash:
-  color: "#1F1B16"
-  image: assets/icon/splash_logo.png
+  color: "#000000"
   android: true
   ios: true
   web: false
   android_12:
-    color: "#1F1B16"
-    image: assets/icon/splash_logo_android12.png
+    color: "#000000"
diff --git a/test/auth/auth_landing_test.dart b/test/auth/auth_landing_test.dart
index 63b66d8..aa884b9 100644
--- a/test/auth/auth_landing_test.dart
+++ b/test/auth/auth_landing_test.dart
@@ -52,6 +52,10 @@ void main() {
     expect(find.byKey(const Key('auth-entry-phone')), findsOneWidget);
     expect(find.byKey(const Key('auth-entry-email')), findsOneWidget);
     expect(find.byKey(const Key('auth-legal')), findsOneWidget);
+    expect(
+      tester.getTopLeft(find.byKey(const Key('auth-landing'))).dy,
+      lessThan(80),
+    );
 
     await tester.tap(find.byKey(const Key('auth-entry-phone')));
     await tester.pumpAndSettle();
diff --git a/test/auth/auth_page_test.dart b/test/auth/auth_page_test.dart
index 1e02e3c..85a005b 100644
--- a/test/auth/auth_page_test.dart
+++ b/test/auth/auth_page_test.dart
@@ -78,6 +78,7 @@ void main() {
 
     expect(find.text('Enter your email'), findsOneWidget);
     expect(find.text('Welcome back'), findsOneWidget);
+    expect(find.byKey(const Key('centered-toast')), findsNothing);
   });
 
   testWidgets(
@@ -94,6 +95,81 @@ void main() {
         find.text('Password needs both letters and numbers'),
         findsOneWidget,
       );
+      expect(find.byKey(const Key('centered-toast')), findsNothing);
+    },
+  );
+
+  testWidgets('should_show_centered_toast_when_login_api_returns_an_error', (
+    tester,
+  ) async {
+    final api = _FailingAuthApi(loginMessage: 'Invalid email or password');
+    await pumpAuthPage(tester, api: api);
+    await _enterValidCredentials(tester);
+
+    await tester.ensureVisible(find.byKey(const Key('auth-submit')));
+    await tester.tap(find.byKey(const Key('auth-submit')));
+    await tester.pumpAndSettle();
+
+    final toast = find.byKey(const Key('centered-toast'));
+    expect(toast, findsOneWidget);
+    expect(find.text('Invalid email or password'), findsOneWidget);
+    expect(find.byType(AlertDialog), findsNothing);
+    expect(api.loginCalls, 1);
+    expect(
+      tester.getCenter(toast),
+      offsetMoreOrLessEquals(
+        tester.getCenter(find.byType(Scaffold)),
+        epsilon: 1,
+      ),
+    );
+    expect(
+      tester
+          .widget<FilledButton>(find.byKey(const Key('auth-submit')))
+          .onPressed,
+      isNotNull,
+    );
+
+    await _pumpToastAway(tester);
+    expect(toast, findsNothing);
+  });
+
+  testWidgets('should_show_centered_toast_when_register_api_returns_an_error', (
+    tester,
+  ) async {
+    final api = _FailingAuthApi(registerMessage: 'Email already exists');
+    await pumpAuthPage(tester, signUp: true, api: api);
+    await _enterValidCredentials(tester);
+
+    await tester.ensureVisible(find.byKey(const Key('auth-submit')));
+    await tester.tap(find.byKey(const Key('auth-submit')));
+    await tester.pumpAndSettle();
+
+    expect(find.byKey(const Key('centered-toast')), findsOneWidget);
+    expect(find.text('Email already exists'), findsOneWidget);
+    expect(find.byType(AlertDialog), findsNothing);
+    expect(api.registerCalls, 1);
+
+    await _pumpToastAway(tester);
+    expect(find.byKey(const Key('centered-toast')), findsNothing);
+  });
+
+  testWidgets(
+    'should_show_network_error_when_login_throws_an_unknown_exception',
+    (tester) async {
+      final api = _FailingAuthApi(loginThrowsUnknown: true);
+      await pumpAuthPage(tester, api: api);
+      await _enterValidCredentials(tester);
+
+      await tester.ensureVisible(find.byKey(const Key('auth-submit')));
+      await tester.tap(find.byKey(const Key('auth-submit')));
+      await tester.pumpAndSettle();
+
+      expect(find.byKey(const Key('centered-toast')), findsOneWidget);
+      expect(find.text('Network error, please try again'), findsOneWidget);
+      expect(find.byType(AlertDialog), findsNothing);
+
+      await _pumpToastAway(tester);
+      expect(find.byKey(const Key('centered-toast')), findsNothing);
     },
   );
 
@@ -342,6 +418,16 @@ void main() {
   });
 }
 
+Future<void> _enterValidCredentials(WidgetTester tester) async {
+  await tester.enterText(find.byKey(const Key('auth-email')), 'a@b.com');
+  await tester.enterText(find.byKey(const Key('auth-password')), 'abcd1234');
+}
+
+Future<void> _pumpToastAway(WidgetTester tester) async {
+  await tester.pump(const Duration(seconds: 3));
+  await tester.pumpAndSettle();
+}
+
 void _expectAboveKeyboard(WidgetTester tester, Key fieldKey, double inset) {
   final screenHeight =
       tester.view.physicalSize.height / tester.view.devicePixelRatio;
@@ -351,6 +437,50 @@ void _expectAboveKeyboard(WidgetTester tester, Key fieldKey, double inset) {
   );
 }
 
+class _FailingAuthApi extends AuthApi {
+  _FailingAuthApi({
+    this.loginMessage = 'login failed',
+    this.registerMessage = 'register failed',
+    this.loginThrowsUnknown = false,
+  }) : super(
+         ApiClient(
+           baseUrl: 'http://127.0.0.1:1',
+           adapter: FakeHttpAdapter((_) async => FakeHttpResponse('{}', 500)),
+         ),
+       );
+
+  final String loginMessage;
+  final String registerMessage;
+  final bool loginThrowsUnknown;
+  int loginCalls = 0;
+  int registerCalls = 0;
+
+  @override
+  Future<AuthSession> login({
+    required String email,
+    required String password,
+    required String deviceId,
+    String platform = '',
+    String appVersion = '',
+  }) async {
+    loginCalls++;
+    if (loginThrowsUnknown) throw StateError('unexpected');
+    throw ApiException(401, loginMessage);
+  }
+
+  @override
+  Future<AuthSession> register({
+    required String email,
+    required String password,
+    required String deviceId,
+    String platform = '',
+    String appVersion = '',
+  }) async {
+    registerCalls++;
+    throw ApiException(409, registerMessage);
+  }
+}
+
 class _PendingAuthApi extends AuthApi {
   _PendingAuthApi()
     : super(
diff --git a/test/auth/auth_visual_test.dart b/test/auth/auth_visual_test.dart
index 192ed41..92481fd 100644
--- a/test/auth/auth_visual_test.dart
+++ b/test/auth/auth_visual_test.dart
@@ -13,6 +13,7 @@ import 'package:fruitshorts/core/data/services/auth_controller.dart';
 import 'package:fruitshorts/core/data/services/auth_session_store.dart';
 import 'package:fruitshorts/core/platform/haptics.dart';
 import 'package:fruitshorts/core/theme/app_colors.dart';
+import 'package:fruitshorts/core/theme/app_dimens.dart';
 import 'package:fruitshorts/core/theme/app_theme.dart';
 import 'package:fruitshorts/l10n/app_localizations.dart';
 import 'package:fruitshorts/pages/auth/auth_view.dart';
@@ -131,7 +132,10 @@ void main() {
       final card = tester.widget<Container>(find.byKey(const Key('auth-card')));
       final cardDecoration = card.decoration! as BoxDecoration;
       expect(cardDecoration.color, AppColors.card);
-      expect(cardDecoration.borderRadius, BorderRadius.circular(20));
+      expect(
+        cardDecoration.borderRadius,
+        BorderRadius.circular(AppDimens.authCardRadius),
+      );
       expect(cardDecoration.boxShadow, contains(AppTheme.cardShadow));
       expect(card.padding, const EdgeInsets.all(20));
 
diff --git a/test/auth/phone_auth_sheet_test.dart b/test/auth/phone_auth_sheet_test.dart
index 036b286..6b08bab 100644
--- a/test/auth/phone_auth_sheet_test.dart
+++ b/test/auth/phone_auth_sheet_test.dart
@@ -5,6 +5,7 @@ import 'dart:convert';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_test/flutter_test.dart';
+import 'package:fruitshorts/core/data/models/auth_session.dart';
 import 'package:fruitshorts/core/data/remote/api_client.dart';
 import 'package:fruitshorts/core/data/remote/auth_api.dart';
 import 'package:fruitshorts/core/data/services/auth_controller.dart';
@@ -97,6 +98,70 @@ void main() {
 
     expect(find.text('Enter a valid phone number'), findsOneWidget);
     expect(adapter.requests, isEmpty);
+    expect(find.byKey(const Key('centered-toast')), findsNothing);
+  });
+
+  testWidgets('should_show_centered_toast_when_otp_request_fails', (
+    tester,
+  ) async {
+    final api = _FailingPhoneAuthApi(sendOtpMessage: 'Too many OTP requests');
+    final auth = AuthController(api, AuthSessionStore());
+    await _pumpHost(tester, auth);
+    await tester.tap(find.byKey(const Key('open-phone-sheet')));
+    await tester.pumpAndSettle();
+    await tester.enterText(
+      find.byKey(const Key('auth-phone-number')),
+      '08123456789',
+    );
+
+    await tester.tap(find.byKey(const Key('auth-send-code')));
+    await tester.pumpAndSettle();
+
+    expect(find.byKey(const Key('centered-toast')), findsOneWidget);
+    expect(find.text('Too many OTP requests'), findsOneWidget);
+    expect(find.byType(AlertDialog), findsNothing);
+    expect(api.sendOtpCalls, 1);
+    expect(
+      tester
+          .widget<TextButton>(find.byKey(const Key('auth-send-code')))
+          .onPressed,
+      isNotNull,
+    );
+
+    await _pumpToastAway(tester);
+    expect(find.byKey(const Key('centered-toast')), findsNothing);
+  });
+
+  testWidgets('should_show_centered_toast_when_phone_login_fails', (
+    tester,
+  ) async {
+    final api = _FailingPhoneAuthApi(loginMessage: 'Invalid verification code');
+    final auth = AuthController(api, AuthSessionStore());
+    await _pumpHost(tester, auth);
+    await tester.tap(find.byKey(const Key('open-phone-sheet')));
+    await tester.pumpAndSettle();
+    await tester.enterText(
+      find.byKey(const Key('auth-phone-number')),
+      '08123456789',
+    );
+    await tester.enterText(find.byKey(const Key('auth-phone-code')), '123456');
+
+    await tester.tap(find.byKey(const Key('auth-phone-submit')));
+    await tester.pumpAndSettle();
+
+    expect(find.byKey(const Key('centered-toast')), findsOneWidget);
+    expect(find.text('Invalid verification code'), findsOneWidget);
+    expect(find.byType(AlertDialog), findsNothing);
+    expect(api.loginWithPhoneCalls, 1);
+    expect(
+      tester
+          .widget<FilledButton>(find.byKey(const Key('auth-phone-submit')))
+          .onPressed,
+      isNotNull,
+    );
+
+    await _pumpToastAway(tester);
+    expect(find.byKey(const Key('centered-toast')), findsNothing);
   });
 
   testWidgets('should_keep_code_above_ios_keyboard', (tester) async {
@@ -132,6 +197,50 @@ void main() {
   });
 }
 
+Future<void> _pumpToastAway(WidgetTester tester) async {
+  await tester.pump(const Duration(seconds: 3));
+  await tester.pumpAndSettle();
+}
+
+class _FailingPhoneAuthApi extends AuthApi {
+  _FailingPhoneAuthApi({
+    this.sendOtpMessage = 'otp failed',
+    this.loginMessage = 'login failed',
+  }) : super(
+         ApiClient(
+           baseUrl: 'http://127.0.0.1:1',
+           adapter: FakeHttpAdapter((_) async => FakeHttpResponse('{}', 500)),
+         ),
+       );
+
+  final String sendOtpMessage;
+  final String loginMessage;
+  int sendOtpCalls = 0;
+  int loginWithPhoneCalls = 0;
+
+  @override
+  Future<void> sendOtp({
+    required String target,
+    required String scene,
+    required String deviceId,
+  }) async {
+    sendOtpCalls++;
+    throw ApiException(429, sendOtpMessage);
+  }
+
+  @override
+  Future<AuthSession> loginWithPhone({
+    required String target,
+    required String code,
+    required String deviceId,
+    String platform = '',
+    String appVersion = '',
+  }) async {
+    loginWithPhoneCalls++;
+    throw ApiException(401, loginMessage);
+  }
+}
+
 Future<void> _pumpHost(WidgetTester tester, AuthController auth) {
   return tester.pumpWidget(
     MultiProvider(
diff --git a/test/config/l10n_id_test.dart b/test/config/l10n_id_test.dart
index 4e09c28..0686c0b 100644
--- a/test/config/l10n_id_test.dart
+++ b/test/config/l10n_id_test.dart
@@ -13,7 +13,6 @@ void main() {
 
     expect(l10n.homeTab, 'Beranda');
     expect(l10n.watchNow, 'Tonton gratis');
-    expect(l10n.watchlist, 'Daftar Tonton');
     expect(l10n.coins, 'Koin');
     expect(l10n.signIn, 'Masuk');
   });
diff --git a/test/config/server_endpoint_test.dart b/test/config/server_endpoint_test.dart
index 6ecaee2..4bcce55 100644
--- a/test/config/server_endpoint_test.dart
+++ b/test/config/server_endpoint_test.dart
@@ -63,7 +63,7 @@ void main() {
   });
 
   test('should_use_the_configured_local_address_for_device_default', () {
-    expect(AppConfig.devHostBaseUrl, 'http://192.168.31.187:8081');
+    expect(AppConfig.devHostBaseUrl, 'http://10.43.47.1:8081');
   });
 
   test('should_skip_probe_when_compiled_override_is_set', () async {
diff --git a/test/core/app_pull_to_refresh_test.dart b/test/core/app_pull_to_refresh_test.dart
index 8cf5e49..71054d1 100644
--- a/test/core/app_pull_to_refresh_test.dart
+++ b/test/core/app_pull_to_refresh_test.dart
@@ -12,7 +12,7 @@ void main() {
   testWidgets('should_freeze_pull_offset_until_refresh_completes', (
     tester,
   ) async {
-    expect(AppPullToRefresh.physics.parent, isA<ClampingScrollPhysics>());
+    expect(AppPullToRefresh.physics.parent, isA<BouncingScrollPhysics>());
     final refresh = Completer<void>();
     var calls = 0;
     await tester.pumpWidget(
@@ -44,28 +44,32 @@ void main() {
       find.descendant(of: list, matching: find.byType(Scrollable)).first,
     );
     expect(scrollable.position.pixels, 0);
-    expect(find.text('Pull to refresh'), findsOneWidget);
-    expect(_contentOffset(tester), greaterThan(0));
+    final indicator = find.byKey(const Key('pull-refresh-indicator'));
+    expect(indicator, findsOneWidget);
     expect(
-      tester.widget<Text>(find.text('Pull to refresh')).style?.color,
-      AppColors.blue,
+      find.descendant(
+        of: indicator,
+        matching: find.byType(CircularProgressIndicator),
+      ),
+      findsOneWidget,
     );
+    expect(tester.getSize(indicator), const Size(40, 40));
+    final background = tester.widget<Container>(indicator).decoration;
+    final backgroundDecoration = background! as BoxDecoration;
+    expect(backgroundDecoration.color, AppColors.refreshIndicatorSurface);
+    expect(backgroundDecoration.borderRadius, BorderRadius.circular(20));
+    expect(find.text('Pull to refresh'), findsNothing);
+    expect(_contentOffset(tester), greaterThan(0));
 
     await gesture.moveBy(const Offset(0, 120));
     await tester.pump();
-    expect(find.text('Release to refresh'), findsOneWidget);
-    expect(
-      tester.widget<Text>(find.text('Release to refresh')).style?.color,
-      AppColors.blue,
-    );
+    expect(indicator, findsOneWidget);
+    expect(find.text('Release to refresh'), findsNothing);
 
     await gesture.up();
     await tester.pump();
-    expect(find.text('Refreshing…'), findsOneWidget);
-    expect(
-      tester.widget<Text>(find.text('Refreshing…')).style?.color,
-      AppColors.blue,
-    );
+    expect(indicator, findsOneWidget);
+    expect(find.text('Refreshing…'), findsNothing);
     expect(calls, 1);
     final releaseOffset = _contentOffset(tester);
     expect(releaseOffset, greaterThan(56));
@@ -87,6 +91,7 @@ void main() {
     await tester.pump();
     await tester.pumpAndSettle();
     expect(_contentOffset(tester), closeTo(0, 0.1));
+    expect(indicator, findsNothing);
     expect(find.text('Refreshing…'), findsNothing);
     expect(find.text('Pull to refresh'), findsNothing);
   });
@@ -122,7 +127,8 @@ void main() {
     final releaseOffset = _contentOffset(tester);
     expect(releaseOffset, greaterThan(0));
     expect(releaseOffset, lessThan(56));
-    expect(find.text('Pull to refresh'), findsOneWidget);
+    expect(find.byKey(const Key('pull-refresh-indicator')), findsOneWidget);
+    expect(find.text('Pull to refresh'), findsNothing);
 
     await gesture.up();
     await tester.pump();
@@ -136,6 +142,7 @@ void main() {
 
     await tester.pumpAndSettle();
     expect(_contentOffset(tester), closeTo(0, 0.1));
+    expect(find.byKey(const Key('pull-refresh-indicator')), findsNothing);
     expect(find.text('Pull to refresh'), findsNothing);
   });
 }
diff --git a/test/core/centered_toast_test.dart b/test/core/centered_toast_test.dart
new file mode 100644
index 0000000..84e4a9a
--- /dev/null
+++ b/test/core/centered_toast_test.dart
@@ -0,0 +1,93 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:fruitshorts/core/widgets/centered_toast.dart';
+
+void main() {
+  testWidgets('should_replace_previous_toast_when_shown_again', (tester) async {
+    late BuildContext hostContext;
+    await tester.pumpWidget(
+      MaterialApp(
+        home: Builder(
+          builder: (context) {
+            hostContext = context;
+            return const Scaffold(body: SizedBox.expand());
+          },
+        ),
+      ),
+    );
+
+    showCenteredToast(hostContext, 'first message');
+    await tester.pump();
+    showCenteredToast(hostContext, 'second message');
+    await tester.pump();
+
+    expect(find.byKey(const Key('centered-toast')), findsOneWidget);
+    expect(find.text('second message'), findsOneWidget);
+    expect(find.text('first message'), findsNothing);
+
+    await tester.pump(const Duration(seconds: 2));
+    await tester.pump(const Duration(milliseconds: 200));
+    expect(find.byKey(const Key('centered-toast')), findsNothing);
+  });
+
+  testWidgets('should_allow_underlying_gesture_when_toast_is_visible', (
+    tester,
+  ) async {
+    late BuildContext hostContext;
+    var taps = 0;
+    await tester.pumpWidget(
+      MaterialApp(
+        home: Builder(
+          builder: (context) {
+            hostContext = context;
+            return Scaffold(
+              body: GestureDetector(
+                key: const Key('toast-host'),
+                behavior: HitTestBehavior.opaque,
+                onTap: () => taps++,
+                child: const SizedBox.expand(),
+              ),
+            );
+          },
+        ),
+      ),
+    );
+    showCenteredToast(hostContext, 'tap-through');
+    await tester.pump();
+
+    await tester.tapAt(
+      tester.getCenter(find.byKey(const Key('centered-toast'))),
+    );
+
+    expect(taps, 1);
+    await tester.pump(const Duration(seconds: 2));
+    await tester.pump(const Duration(milliseconds: 200));
+  });
+
+  testWidgets('should_replace_toast_when_previous_toast_is_fading_out', (
+    tester,
+  ) async {
+    late BuildContext hostContext;
+    await tester.pumpWidget(
+      MaterialApp(
+        home: Builder(
+          builder: (context) {
+            hostContext = context;
+            return const Scaffold(body: SizedBox.expand());
+          },
+        ),
+      ),
+    );
+
+    showCenteredToast(hostContext, 'first message');
+    await tester.pump();
+    await tester.pump(const Duration(seconds: 2));
+    showCenteredToast(hostContext, 'replacement message');
+    await tester.pump();
+
+    expect(tester.takeException(), isNull);
+    expect(find.text('replacement message'), findsOneWidget);
+    await tester.pump(const Duration(seconds: 3));
+    await tester.pumpAndSettle();
+  });
+}
diff --git a/test/core/count_format_test.dart b/test/core/count_format_test.dart
index e80781b..46c3423 100644
--- a/test/core/count_format_test.dart
+++ b/test/core/count_format_test.dart
@@ -10,6 +10,13 @@ void main() {
     expect(formatInteractionCount(9999), '9999');
   });
 
+  test('should_format_play_count_with_w_and_trim_integer_decimals', () {
+    expect(formatPlayCount(8500), '8500');
+    expect(formatPlayCount(10000), '1w');
+    expect(formatPlayCount(500000), '50w');
+    expect(formatPlayCount(444500), '44.5w');
+  });
+
   test('should_use_one_decimal_wan_from_ten_thousand', () {
     expect(formatInteractionCount(10000), '1.0万');
     expect(formatInteractionCount(12400), '1.2万');
diff --git a/test/core/data/remote/network_log_interceptor_test.dart b/test/core/data/remote/network_log_interceptor_test.dart
new file mode 100644
index 0000000..ef80004
--- /dev/null
+++ b/test/core/data/remote/network_log_interceptor_test.dart
@@ -0,0 +1,203 @@
+// Author: fruit.com.cn
+
+import 'dart:convert';
+import 'dart:typed_data';
+
+import 'package:dio/dio.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:fruitshorts/core/data/remote/api_interceptors.dart';
+import 'package:fruitshorts/core/data/remote/network_log_interceptor.dart';
+
+void main() {
+  const baseUrl = 'http://logging.test';
+  const token = 'eyJhbGciOiJIUzM4NCJ9.secret';
+
+  Dio buildDio(
+    List<String> logs,
+    HttpClientAdapter adapter, {
+    bool useEnvelope = true,
+  }) {
+    final dio = Dio(
+      BaseOptions(
+        baseUrl: baseUrl,
+        responseType: ResponseType.bytes,
+        validateStatus: (_) => true,
+      ),
+    );
+    dio.httpClientAdapter = adapter;
+    dio.interceptors.addAll([
+      AuthHeaderInterceptor(
+        accessTokenReader: () => token,
+        deviceIdReader: () async => 'device-raw-001',
+      ),
+      if (useEnvelope) const EnvelopeInterceptor(),
+      NetworkLogInterceptor(logger: logs.add),
+    ]);
+    return dio;
+  }
+
+  test(
+    'should_log_request_and_response_lines_with_elapsed_when_requested',
+    () async {
+      final logs = <String>[];
+      final dio = buildDio(
+        logs,
+        _RawHttpAdapter.fromText(
+          jsonEncode({
+            'code': 0,
+            'message': 'ok',
+            'data': {'title': '中文标题'},
+          }),
+        ),
+      );
+
+      await dio.post<void>(
+        '/app/logging',
+        queryParameters: {'keyword': '中文'},
+        data: {'filter': '中文'},
+      );
+
+      expect(
+        logs.first,
+        contains('[HTTP] → POST $baseUrl/app/logging?keyword='),
+      );
+      expect(logs.join('\n'), contains('[HTTP] → 耗时起点：'));
+      expect(logs.join('\n'), matches(RegExp(r'\[HTTP\] ← 200 \d+ms POST ')));
+      expect(logs.join('\n'), contains('"filter": "中文"'));
+      expect(logs.join('\n'), contains('"中文标题"'));
+      expect(logs.join('\n'), contains('"Authorization":"Bearer e..."'));
+      expect(logs.join('\n'), contains('"X-Device-Id":"device-raw-001"'));
+      expect(logs.join('\n'), isNot(contains(token)));
+    },
+  );
+
+  test('should_truncate_long_body_when_log_exceeds_limit', () async {
+    final logs = <String>[];
+    final dio = buildDio(
+      logs,
+      _RawHttpAdapter.fromText(
+        jsonEncode({
+          'code': 0,
+          'message': 'ok',
+          'data': {'text': List.filled(3500, '长').join()},
+        }),
+      ),
+    );
+
+    await dio.get<void>('/app/long');
+
+    final responseLog = logs.singleWhere(
+      (line) => line.startsWith('[HTTP] ← 200'),
+    );
+    const prefix = '[HTTP] ← body：';
+    final body = responseLog.substring(
+      responseLog.indexOf(prefix) + prefix.length,
+    );
+    expect(body.length, NetworkLogInterceptor.maxBodyLength);
+    expect(body, endsWith('…(truncated)'));
+  });
+
+  test(
+    'should_log_plain_text_without_throwing_when_response_is_not_json',
+    () async {
+      final logs = <String>[];
+      final dio = buildDio(
+        logs,
+        _RawHttpAdapter.fromText('plain text response'),
+      );
+
+      await expectLater(
+        dio.get<void>('/app/plain'),
+        throwsA(isA<DioException>()),
+      );
+
+      expect(logs.join('\n'), contains('[HTTP] ✗'));
+      expect(logs.join('\n'), contains('plain text response'));
+    },
+  );
+
+  test('should_log_byte_count_only_when_response_is_image', () async {
+    final logs = <String>[];
+    final dio = buildDio(
+      logs,
+      _RawHttpAdapter(
+        Uint8List.fromList([0xff, 0xd8, 0xff, 0x00]),
+        contentType: 'image/jpeg',
+      ),
+      useEnvelope: false,
+    );
+
+    await dio.get<void>('/files/image.jpg');
+
+    expect(logs.join('\n'), contains('<binary image/jpeg, 4 bytes>'));
+    expect(logs.join('\n'), isNot(contains('�')));
+  });
+
+  test(
+    'should_log_dio_exception_type_and_message_when_request_fails',
+    () async {
+      final logs = <String>[];
+      final dio = buildDio(logs, _ThrowingHttpAdapter());
+
+      await expectLater(
+        dio.get<void>('/app/offline'),
+        throwsA(isA<DioException>()),
+      );
+
+      expect(
+        logs.join('\n'),
+        matches(RegExp(r'\[HTTP\] ✗ connectionError \d+ms .* offline')),
+      );
+    },
+  );
+}
+
+class _RawHttpAdapter implements HttpClientAdapter {
+  _RawHttpAdapter(this.bytes, {required this.contentType});
+
+  factory _RawHttpAdapter.fromText(String body) {
+    return _RawHttpAdapter(
+      Uint8List.fromList(utf8.encode(body)),
+      contentType: 'application/json; charset=utf-8',
+    );
+  }
+
+  final Uint8List bytes;
+  final String contentType;
+
+  @override
+  Future<ResponseBody> fetch(
+    RequestOptions options,
+    Stream<Uint8List>? requestStream,
+    Future<void>? cancelFuture,
+  ) async {
+    return ResponseBody.fromBytes(
+      bytes,
+      200,
+      headers: {
+        Headers.contentTypeHeader: [contentType],
+      },
+    );
+  }
+
+  @override
+  void close({bool force = false}) {}
+}
+
+class _ThrowingHttpAdapter implements HttpClientAdapter {
+  @override
+  Future<ResponseBody> fetch(
+    RequestOptions options,
+    Stream<Uint8List>? requestStream,
+    Future<void>? cancelFuture,
+  ) {
+    throw DioException(
+      requestOptions: options,
+      type: DioExceptionType.connectionError,
+      message: 'offline',
+    );
+  }
+
+  @override
+  void close({bool force = false}) {}
+}
diff --git a/test/core/page_result_parse_test.dart b/test/core/page_result_parse_test.dart
new file mode 100644
index 0000000..43bed86
--- /dev/null
+++ b/test/core/page_result_parse_test.dart
@@ -0,0 +1,59 @@
+// Author: fruit.com.cn
+
+import 'package:flutter_test/flutter_test.dart';
+import 'package:fruitshorts/core/data/models/page_result.dart';
+
+void main() {
+  group('PageResult.parse', () {
+    test('should_parse_page_map_when_total_and_list_present', () {
+      final page = PageResult.parse({
+        'total': '3',
+        'list': [
+          {'id': '1', 'title': 'A'},
+          {'id': '2', 'title': 'B'},
+        ],
+      }, _item);
+
+      expect(page.total, 3);
+      expect(page.list.map((e) => e['id']), ['1', '2']);
+    });
+
+    test('should_parse_legacy_list_when_data_is_array', () {
+      final page = PageResult.parse([
+        {'id': '9', 'title': '收藏剧'},
+        {'id': '8', 'title': '另一部'},
+      ], _item);
+
+      expect(page.total, 2);
+      expect(page.list, hasLength(2));
+      expect(page.list.first['title'], '收藏剧');
+    });
+
+    test('should_return_empty_page_when_data_is_null_or_empty_list', () {
+      expect(PageResult.parse(null, _item).total, 0);
+      expect(PageResult.parse(null, _item).list, isEmpty);
+      expect(PageResult.parse(const <Object>[], _item).total, 0);
+      expect(PageResult.parse(const <Object>[], _item).list, isEmpty);
+    });
+
+    test('should_return_empty_page_when_payload_is_invalid', () {
+      final page = PageResult.parse('broken', _item);
+      expect(page.total, 0);
+      expect(page.list, isEmpty);
+    });
+
+    test('should_skip_non_map_entries_in_legacy_list', () {
+      final page = PageResult.parse([
+        {'id': '1'},
+        'noise',
+        42,
+        {'id': '2'},
+      ], _item);
+
+      expect(page.total, 2);
+      expect(page.list.map((e) => e['id']), ['1', '2']);
+    });
+  });
+}
+
+Map<String, dynamic> _item(Map<String, dynamic> json) => json;
diff --git a/test/core/subpage_header_test.dart b/test/core/subpage_header_test.dart
index 353c4e6..16b0024 100644
--- a/test/core/subpage_header_test.dart
+++ b/test/core/subpage_header_test.dart
@@ -7,7 +7,7 @@ import 'package:fruitshorts/core/theme/app_theme.dart';
 import 'package:fruitshorts/core/widgets/subpage_header.dart';
 
 void main() {
-  testWidgets('should_render_unified_light_header_dimensions', (tester) async {
+  testWidgets('should_render_unified_dark_header_dimensions', (tester) async {
     await tester.pumpWidget(
       MaterialApp(
         theme: AppTheme.light(),
@@ -28,7 +28,7 @@ void main() {
     final title = tester.widget<Text>(find.byKey(const Key('subpage-title')));
     expect(title.style?.fontSize, 18);
     expect(title.style?.fontWeight, FontWeight.w800);
-    expect(title.style?.color, AppColors.onSurface);
+    expect(title.style?.color, AppColors.textPrimary);
     final back = tester.getRect(find.byKey(const Key('sample-back')));
     final titleRect = tester.getRect(find.byKey(const Key('subpage-title')));
     expect(titleRect.left - back.right, closeTo(12, 0.5));
@@ -38,8 +38,8 @@ void main() {
         matching: find.byType(Material),
       ),
     );
-    expect(surface.color, AppColors.card);
-    expect((surface.shape! as CircleBorder).side.color, AppColors.border);
+    expect(surface.color, AppColors.transparent);
+    expect((surface.shape! as CircleBorder).side, BorderSide.none);
     final shadow =
         tester
                 .widget<DecoratedBox>(
@@ -47,9 +47,7 @@ void main() {
                 )
                 .decoration
             as BoxDecoration;
-    expect(shadow.boxShadow!.single.color, const Color(0x14000000));
-    expect(shadow.boxShadow!.single.blurRadius, 8);
-    expect(shadow.boxShadow!.single.offset, const Offset(0, 2));
+    expect(shadow.boxShadow, isEmpty);
   });
 
   testWidgets('should_use_64_height_when_subtitle_exists', (tester) async {
@@ -75,7 +73,7 @@ void main() {
       MaterialApp(
         theme: AppTheme.light(),
         home: const Scaffold(
-          backgroundColor: Colors.black,
+          backgroundColor: AppColors.mediaBlack,
           body: AppSubpageHeader(
             title: 'Title',
             backKey: Key('sample-back'),
@@ -97,8 +95,8 @@ void main() {
         matching: find.byIcon(Icons.chevron_left_rounded),
       ),
     );
-    expect(material.color, const Color(0x59000000));
-    expect(icon.color, Colors.white);
+    expect(material.color, AppColors.headerScrim);
+    expect(icon.color, AppColors.onSurface);
     expect(icon.size, 22);
     expect(icon.weight, 600);
     final shadow =
@@ -108,7 +106,7 @@ void main() {
                 )
                 .decoration
             as BoxDecoration;
-    expect(shadow.boxShadow!.single.color, const Color(0x33000000));
+    expect(shadow.boxShadow!.single.color, AppColors.shadowSoft);
     expect(shadow.boxShadow!.single.blurRadius, 8);
   });
 }
diff --git a/test/discover/discover_logic_test.dart b/test/discover/discover_logic_test.dart
index bd84546..f73a5e5 100644
--- a/test/discover/discover_logic_test.dart
+++ b/test/discover/discover_logic_test.dart
@@ -23,44 +23,6 @@ void main() {
     logic.dispose();
   });
 
-  testWidgets('should_focus_search_only_for_new_request_on_active_page', (
-    tester,
-  ) async {
-    final logic = DiscoverLogic();
-    await tester.pumpWidget(
-      MaterialApp(
-        home: Scaffold(
-          body: TextField(
-            controller: logic.search,
-            focusNode: logic.searchFocus,
-          ),
-        ),
-      ),
-    );
-
-    logic.syncSearch(
-      active: false,
-      request: 1,
-      previousRequest: 0,
-      isActive: () => false,
-    );
-    await tester.pump();
-    expect(logic.searchFocus.hasFocus, isFalse);
-
-    logic.syncSearch(
-      active: true,
-      request: 2,
-      previousRequest: 1,
-      isActive: () => true,
-    );
-    await tester.pump();
-    await tester.pump();
-    expect(logic.searchFocus.hasFocus, isTrue);
-
-    await tester.pumpWidget(const SizedBox.shrink());
-    logic.dispose();
-  });
-
   testWidgets('should_forward_action_when_embedded_or_pop_when_standalone', (
     tester,
   ) async {
@@ -99,9 +61,9 @@ void main() {
     );
     expect(forwarded, [DiscoverPageAction.home]);
 
-    logic.act(pageContext, DiscoverPageAction.my, embedded: false);
+    logic.act(pageContext, DiscoverPageAction.mine, embedded: false);
     await tester.pumpAndSettle();
-    await expectLater(popped.future, completion(DiscoverPageAction.my));
+    await expectLater(popped.future, completion(DiscoverPageAction.mine));
     logic.dispose();
   });
 
diff --git a/test/discover/filter_page_test.dart b/test/discover/filter_page_test.dart
index 10fe4c2..061df58 100644
--- a/test/discover/filter_page_test.dart
+++ b/test/discover/filter_page_test.dart
@@ -151,7 +151,7 @@ Future<void> _pumpFilterPage(WidgetTester tester) async {
     ),
   );
   await tester.pumpAndSettle();
-  await tester.tap(find.byKey(const Key('tab-theater')));
+  await tester.tap(find.byKey(const Key('home-search-entry')));
   await tester.pumpAndSettle();
   await tester.tap(find.byKey(const Key('theater-toolbar-filter')));
   await tester.pumpAndSettle();
diff --git a/test/discover/home_all_dramas_grid_test.dart b/test/discover/home_all_dramas_grid_test.dart
index 960a0d2..b55d0f6 100644
--- a/test/discover/home_all_dramas_grid_test.dart
+++ b/test/discover/home_all_dramas_grid_test.dart
@@ -79,7 +79,6 @@ void main() {
       catalogRepository: catalog,
       categoryRepository: _GridCategoryRepository(),
     );
-
     await tester.tap(find.byKey(const Key('theater-category-7')));
     await tester.pumpAndSettle();
 
@@ -187,38 +186,6 @@ void main() {
     );
   });
 
-  testWidgets('should_load_next_theater_page_near_scroll_bottom', (
-    tester,
-  ) async {
-    final catalog = _PagedTheaterCatalog([
-      FeedPage(dramas: _pageDramas(0, 20), nextCursor: '20', hasMore: true),
-      FeedPage(dramas: _pageDramas(20, 20)),
-    ]);
-    await _pumpTheater(
-      tester,
-      catalogRepository: catalog,
-      categoryRepository: _GridCategoryRepository(),
-    );
-    final position = tester
-        .state<ScrollableState>(
-          find
-              .descendant(
-                of: find.byKey(const Key('discover-refresh')),
-                matching: find.byType(Scrollable),
-              )
-              .first,
-        )
-        .position;
-
-    position.jumpTo(position.maxScrollExtent);
-    await tester.pump();
-    await tester.pumpAndSettle();
-
-    expect(catalog.calls, 2);
-    expect(catalog.requestedCursors, [null, '20']);
-    expect(find.byKey(const Key('home-drama-card-page-39')), findsOneWidget);
-  });
-
   testWidgets('should_refresh_feed_when_pulled_down', (tester) async {
     final counter = _CountingCategoryRepository(
       _GridCategoryRepository(discoverFeed: _tallDiscoverFeed),
@@ -421,7 +388,8 @@ void main() {
     );
     await tester.drag(_verticalFeed, const Offset(0, 240));
     await tester.pump();
-    expect(find.text('Refreshing…'), findsOneWidget);
+    expect(find.byKey(const Key('pull-refresh-indicator')), findsOneWidget);
+    expect(find.text('Refreshing…'), findsNothing);
     await tester.pumpAndSettle();
   });
 }
@@ -455,7 +423,9 @@ Future<void> _pumpTheater(
     ),
   );
   await tester.pumpAndSettle();
-  await tester.tap(find.byKey(const Key('tab-theater')));
+  await tester.tap(find.byKey(const Key('home-search-entry')));
+  await tester.pumpAndSettle();
+  FocusManager.instance.primaryFocus?.unfocus();
   await tester.pumpAndSettle();
 }
 
@@ -654,34 +624,6 @@ class _CountingTheaterCatalog extends _TheaterOnlyCatalog {
   }
 }
 
-class _PagedTheaterCatalog extends _TheaterOnlyCatalog {
-  _PagedTheaterCatalog(this.pages);
-
-  final List<FeedPage> pages;
-  final List<String?> requestedCursors = [];
-
-  int get calls => requestedCursors.length;
-
-  @override
-  Future<FeedPage> fetchFeed({
-    List<String> types = const [],
-    String? categoryId,
-    String? cursor,
-    int size = 10,
-  }) async {
-    if (size != 20) {
-      return super.fetchFeed(
-        types: types,
-        categoryId: categoryId,
-        cursor: cursor,
-        size: size,
-      );
-    }
-    requestedCursors.add(cursor);
-    return pages.removeAt(0);
-  }
-}
-
 class _FailingTheaterCatalog extends _TheaterOnlyCatalog {
   @override
   Future<FeedPage> fetchFeed({
@@ -701,14 +643,3 @@ class _FailingTheaterCatalog extends _TheaterOnlyCatalog {
     );
   }
 }
-
-List<Drama> _pageDramas(int start, int count) => [
-  for (var index = start; index < start + count; index++)
-    Drama(
-      id: 'page-$index',
-      title: 'Page $index',
-      synopsis: 'Page $index synopsis',
-      posterUrl: '',
-      genre: 'Drama',
-    ),
-];
diff --git a/test/discover/theater_pages_test.dart b/test/discover/theater_pages_test.dart
index 4bb3437..5bac72d 100644
--- a/test/discover/theater_pages_test.dart
+++ b/test/discover/theater_pages_test.dart
@@ -113,12 +113,14 @@ void main() {
     final top3 = tester.getRect(find.byKey(const Key('ranking-cover-3')));
     expect(top1.width, greaterThan(top2.width));
     expect(top3.width, closeTo(top2.width, 0.5));
-    expect(top2.left, closeTo(14, 0.5));
-    expect(top3.right, closeTo(376, 0.5));
+    expect(top2.left, closeTo(8, 0.5));
+    expect(top3.right, closeTo(382, 0.5));
+    expect(top1.left - top2.right, lessThanOrEqualTo(10));
+    expect(top2.width, greaterThan(100));
     expect(top2.left, lessThan(top1.left));
     expect(top3.left, greaterThan(top1.right));
-    expect(top1.bottom, closeTo(top2.bottom, 0.5));
-    expect(top1.bottom, closeTo(top3.bottom, 0.5));
+    expect(top1.bottom, closeTo(top2.bottom - 12, 0.5));
+    expect(top2.bottom, closeTo(top3.bottom, 0.5));
     expect(find.byKey(const Key('ranking-row-3')), findsNothing);
   });
 
@@ -129,13 +131,19 @@ void main() {
 
     expect(find.byKey(const Key('ranking-row-3')), findsOneWidget);
     expect(find.byKey(const Key('ranking-row-2')), findsNothing);
-    expect(find.byKey(const Key('ranking-top-4')), findsOneWidget);
+    final rankNumber = tester.widget<Text>(
+      find.byKey(const Key('ranking-top-4')),
+    );
+    expect(rankNumber.data, '4');
+    expect(rankNumber.style?.fontSize, 48);
+    expect(rankNumber.style?.fontWeight, FontWeight.w800);
     expect(
-      find.descendant(
-        of: find.byKey(const Key('ranking-row-3')),
-        matching: find.text('synopsis'),
-      ),
-      findsOneWidget,
+      tester.getSize(find.byKey(const Key('ranking-row-3'))),
+      const Size(362, 96),
+    );
+    expect(
+      tester.getSize(find.byKey(const Key('ranking-row-cover-4'))),
+      const Size(60, 80),
     );
   });
 
@@ -198,7 +206,7 @@ void main() {
     await tester.pump();
     expect(find.byKey(const Key('ranking-row-39')), findsOneWidget);
     expect(find.byKey(const Key('ranking-row-40')), findsNothing);
-    expect(find.byKey(const Key('ranking-no-more')), findsOneWidget);
+    expect(find.byKey(const Key('ranking-no-more')), findsNothing);
 
     position.jumpTo(0);
     await tester.pump();
@@ -211,7 +219,7 @@ void main() {
     expect(position.pixels, 0);
     position.jumpTo(position.maxScrollExtent);
     await tester.pump();
-    expect(find.byKey(const Key('ranking-load-more')), findsOneWidget);
+    expect(find.byKey(const Key('ranking-load-more')), findsNothing);
     expect(find.byKey(const Key('ranking-no-more')), findsNothing);
     await tester.pumpAndSettle();
   });
@@ -243,7 +251,7 @@ void main() {
     await tester.pumpAndSettle();
     position.jumpTo(position.maxScrollExtent);
     await tester.pumpAndSettle();
-    expect(find.byKey(const Key('new-releases-no-more')), findsOneWidget);
+    expect(find.byKey(const Key('new-releases-no-more')), findsNothing);
 
     position.jumpTo(0);
     await tester.pump();
@@ -303,7 +311,7 @@ Future<void> _pumpTheater(
     ),
   );
   await tester.pumpAndSettle();
-  await tester.tap(find.byKey(const Key('tab-theater')));
+  await tester.tap(find.byKey(const Key('home-search-entry')));
   await tester.pumpAndSettle();
 }
 
diff --git a/test/drama_detail/drama_detail_first_frame_test.dart b/test/drama_detail/drama_detail_first_frame_test.dart
index 91b769e..68a5e78 100644
--- a/test/drama_detail/drama_detail_first_frame_test.dart
+++ b/test/drama_detail/drama_detail_first_frame_test.dart
@@ -14,6 +14,7 @@ import 'package:fruitshorts/core/data/repositories/playback_repository.dart';
 import 'package:fruitshorts/core/data/repositories/watch_history_repository.dart';
 import 'package:fruitshorts/core/data/services/catalog_controller.dart';
 import 'package:fruitshorts/core/data/services/favorite_controller.dart';
+import 'package:fruitshorts/core/data/services/playback_position_cache.dart';
 import 'package:fruitshorts/l10n/app_localizations.dart';
 import 'package:fruitshorts/pages/drama_detail/drama_detail_view.dart';
 
@@ -102,6 +103,7 @@ Future<void> _pumpDetail(
           value: InMemoryWatchHistoryRepository(),
         ),
         Provider<PlaybackRepository>.value(value: FakePlaybackRepository()),
+        Provider<PlaybackPositionCache>(create: (_) => PlaybackPositionCache()),
         ChangeNotifierProvider<FavoriteController>.value(value: favorites),
         ChangeNotifierProvider(
           create: (_) => CatalogController(catalog)..load(),
diff --git a/test/drama_detail/drama_detail_logic_test.dart b/test/drama_detail/drama_detail_logic_test.dart
index 97aa4f1..8249304 100644
--- a/test/drama_detail/drama_detail_logic_test.dart
+++ b/test/drama_detail/drama_detail_logic_test.dart
@@ -1,9 +1,11 @@
 import 'package:flutter_test/flutter_test.dart';
 import 'package:fruitshorts/core/data/models/drama.dart';
+import 'package:fruitshorts/core/data/models/watch_progress.dart';
 import 'package:fruitshorts/core/data/remote/api_client.dart';
 import 'package:fruitshorts/core/data/repositories/favorite_repository.dart';
 import 'package:fruitshorts/core/data/repositories/playback_repository.dart';
 import 'package:fruitshorts/core/data/services/favorite_controller.dart';
+import 'package:fruitshorts/core/data/services/playback_position_cache.dart';
 import 'package:fruitshorts/pages/drama_detail/drama_detail_logic.dart';
 
 import '../support/fake_watch_history.dart';
@@ -13,12 +15,14 @@ DramaDetailLogic _logic(
   Drama drama,
   FakeWatchHistory history, {
   FavoriteController? favorites,
+  PlaybackPositionCache? positionCache,
 }) =>
     DramaDetailLogic(
       drama: drama,
       history: history,
       playback: FakePlaybackRepository(),
       favorites: favorites ?? FavoriteController(InMemoryFavoriteRepository()),
+      positionCache: positionCache ?? PlaybackPositionCache(),
     );
 
 Drama _card(String id) => Drama(
@@ -103,6 +107,31 @@ void main() {
     logic.dispose();
   });
 
+  test('should_prefer_recent_local_position_when_loading_continue', () async {
+    final cache = PlaybackPositionCache();
+    cache.save(
+      episodeId: 'signal-3',
+      dramaId: 'signal',
+      position: const Duration(minutes: 1, seconds: 20),
+      duration: const Duration(minutes: 3),
+    );
+    final history = FakeWatchHistory()
+      ..records['signal'] = const WatchProgress(
+        dramaId: 'signal',
+        episodeId: 'signal-1',
+        position: Duration(seconds: 5),
+        duration: Duration(minutes: 3),
+      );
+    final logic = _logic(_detail('signal'), history, positionCache: cache);
+
+    await logic.load(() async => _detail('signal'));
+
+    expect(logic.continueIndex, 2);
+    expect(logic.progress?.position, const Duration(seconds: 80));
+    expect(history.reads, isEmpty);
+    logic.dispose();
+  });
+
   test('should_adjust_favorite_count_only_after_successful_changes', () async {
     final repository = InMemoryFavoriteRepository(cards: [_favoriteDrama]);
     final favorites = FavoriteController(repository);
diff --git a/test/drama_detail/drama_detail_view_test.dart b/test/drama_detail/drama_detail_view_test.dart
index 0123304..30fb3a1 100644
--- a/test/drama_detail/drama_detail_view_test.dart
+++ b/test/drama_detail/drama_detail_view_test.dart
@@ -27,6 +27,7 @@ import 'package:fruitshorts/core/data/services/auth_session_store.dart';
 import 'package:fruitshorts/core/data/services/catalog_controller.dart';
 import 'package:fruitshorts/core/data/services/download_controller.dart';
 import 'package:fruitshorts/core/data/services/favorite_controller.dart';
+import 'package:fruitshorts/core/data/services/playback_position_cache.dart';
 import 'package:fruitshorts/core/data/services/interaction_controller.dart';
 import 'package:fruitshorts/core/data/services/playback_session.dart';
 import 'package:fruitshorts/core/data/services/wallet_controller.dart';
@@ -93,7 +94,8 @@ void main() {
     );
     final statsDecoration = stats.decoration! as BoxDecoration;
     expect(statsDecoration.color, AppColors.card);
-    expect(statsDecoration.borderRadius, BorderRadius.circular(14));
+    expect(statsDecoration.borderRadius, BorderRadius.circular(12));
+    expect((statsDecoration.border! as Border).top.color, AppColors.border);
     expect(find.byKey(const Key('detail-synopsis-section')), findsOneWidget);
     expect(find.byKey(const Key('detail-tags')), findsOneWidget);
     expect(find.byKey(const Key('detail-episodes-section')), findsOneWidget);
@@ -259,6 +261,25 @@ void main() {
     expect(player.initialIndex, 79);
   });
 
+  testWidgets('should_open_recent_cached_episode_when_detail_cta_is_tapped', (
+    tester,
+  ) async {
+    final cache = PlaybackPositionCache();
+    cache.save(
+      episodeId: 'detail-k38-3',
+      dramaId: 'detail-k38',
+      position: const Duration(minutes: 1, seconds: 20),
+      duration: const Duration(minutes: 3),
+    );
+    await _pumpDetail(tester, positionCache: cache);
+
+    await tester.tap(find.byKey(const Key('detail-cta')));
+    await tester.pumpAndSettle();
+
+    final player = tester.widget<PlayerPage>(find.byType(PlayerPage));
+    expect(player.initialIndex, 2);
+  });
+
   testWidgets('should_fit_compact_viewport_and_keep_cta_visible', (
     tester,
   ) async {
@@ -283,6 +304,7 @@ Future<void> _pumpDetail(
   WidgetTester tester, {
   Drama? drama,
   Size size = const Size(390, 844),
+  PlaybackPositionCache? positionCache,
 }) async {
   tester.view.physicalSize = size;
   tester.view.devicePixelRatio = 1;
@@ -303,6 +325,9 @@ Future<void> _pumpDetail(
           value: InMemoryWatchHistoryRepository(),
         ),
         Provider<PlaybackRepository>.value(value: FakePlaybackRepository()),
+        Provider<PlaybackPositionCache>.value(
+          value: positionCache ?? PlaybackPositionCache(),
+        ),
         Provider<PlayerFactory>.value(value: createWidgetPlayer),
         Provider(create: (_) => PlaybackCoordinator()),
         Provider<InteractionRepository>.value(value: interactions),
diff --git a/test/empty_state/empty_state_test.dart b/test/empty_state/empty_state_test.dart
index cfac0bd..1c32c9d 100644
--- a/test/empty_state/empty_state_test.dart
+++ b/test/empty_state/empty_state_test.dart
@@ -23,17 +23,16 @@ void main() {
     );
 
     expect(find.byKey(const Key('empty-state-art')), findsNothing);
-    expect(find.byKey(const Key('empty-state-art-inner')), findsNothing);
     expect(find.byKey(const Key('empty-state-icon')), findsOneWidget);
     expect(find.text('No stories'), findsOneWidget);
     expect(find.text('New content will appear here.'), findsOneWidget);
     expect(
       tester.getSize(find.byKey(const Key('empty-state-icon'))),
-      const Size(48, 48),
+      const Size(72, 72),
     );
     expect(
       tester.widget<Icon>(find.byKey(const Key('empty-state-icon'))).color,
-      AppColors.blue,
+      AppColors.subtle,
     );
     expect(
       tester
@@ -84,7 +83,7 @@ void main() {
 
     expect(
       tester.getSize(find.byKey(const Key('empty-state-icon'))),
-      const Size(32, 32),
+      const Size(44, 44),
     );
     expect(find.byType(DecoratedBox), findsNothing);
     expect(
@@ -103,7 +102,7 @@ void main() {
     expect(find.byKey(const Key('empty-state-action')), findsNothing);
   });
 
-  testWidgets('should_tint_the_bare_icon_with_the_light_theme', (tester) async {
+  testWidgets('should_tint_the_bare_icon_with_the_dark_theme', (tester) async {
     await _pump(
       tester,
       theme: AppTheme.light(),
@@ -111,7 +110,7 @@ void main() {
     );
     expect(
       tester.widget<Icon>(find.byKey(const Key('empty-state-icon'))).color,
-      AppColors.blue,
+      AppColors.subtle,
     );
 
     await _pump(
@@ -121,7 +120,7 @@ void main() {
     );
     expect(
       tester.widget<Icon>(find.byKey(const Key('empty-state-icon'))).color,
-      AppColors.blue,
+      AppColors.subtle,
     );
   });
 
diff --git a/test/following/following_page_test.dart b/test/following/following_page_test.dart
new file mode 100644
index 0000000..0132852
--- /dev/null
+++ b/test/following/following_page_test.dart
@@ -0,0 +1,391 @@
+// Author: fruit.com.cn
+
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:fruitshorts/app.dart';
+import 'package:fruitshorts/core/data/models/drama.dart';
+import 'package:fruitshorts/core/data/models/watch_progress.dart';
+import 'package:fruitshorts/core/data/repositories/favorite_repository.dart';
+import 'package:fruitshorts/core/data/repositories/playback_repository.dart';
+import 'package:fruitshorts/core/data/repositories/watch_history_repository.dart';
+import 'package:fruitshorts/core/theme/app_colors.dart';
+import 'package:fruitshorts/core/theme/app_dimens.dart';
+import 'package:shared_preferences_platform_interface/in_memory_shared_preferences_async.dart';
+import 'package:shared_preferences_platform_interface/shared_preferences_async_platform_interface.dart';
+
+import '../support/fake_catalog.dart';
+import '../support/fake_category.dart';
+import '../support/fake_interaction_repositories.dart';
+import '../support/widget_player.dart';
+
+void main() {
+  testWidgets('should_render_following_tabs_grid_and_edit_actions', (
+    tester,
+  ) async {
+    _signIn();
+    final catalog = FakeCatalogRepository();
+    await tester.pumpWidget(
+      _app(
+        catalog: catalog,
+        favorites: InMemoryFavoriteRepository(
+          cards: catalog.dramas.take(1).toList(),
+          saved: {catalog.dramas.first.id},
+        ),
+      ),
+    );
+    await tester.pumpAndSettle();
+    await tester.tap(find.byKey(const Key('tab-follow')));
+    await tester.pumpAndSettle();
+
+    expect(find.byKey(const Key('following-page')), findsOneWidget);
+    expect(find.byKey(const Key('following-tab-favorites')), findsOneWidget);
+    expect(find.byKey(const Key('following-tab-history')), findsOneWidget);
+    expect(find.byKey(const Key('following-tab-reserve')), findsNothing);
+    expect(find.byKey(const Key('following-favorites-grid')), findsOneWidget);
+    expect(find.byKey(const Key('following-add-card')), findsOneWidget);
+    expect(find.byType(CustomScrollView), findsWidgets);
+    final tab = tester.widget<AnimatedDefaultTextStyle>(
+      find.descendant(
+        of: find.byKey(const Key('following-tab-favorites')),
+        matching: find.byType(AnimatedDefaultTextStyle),
+      ),
+    );
+    expect(tab.style.fontSize, AppDimens.followingTabFont);
+    expect(tab.style.fontWeight, FontWeight.w600);
+    expect(tab.style.color, AppColors.textPrimary);
+    final editIcon = tester.widget<Icon>(find.byIcon(Icons.edit_outlined));
+    expect(editIcon.size, AppDimens.followingEditIconSize);
+    expect(editIcon.color, AppColors.textTabInactive);
+    final grid = tester.widget<SliverGrid>(
+      find.descendant(
+        of: find.byKey(const Key('following-favorites-grid')),
+        matching: find.byType(SliverGrid),
+      ),
+    );
+    final delegate =
+        grid.gridDelegate as SliverGridDelegateWithFixedCrossAxisCount;
+    expect(delegate.crossAxisCount, 3);
+    expect(delegate.crossAxisSpacing, AppDimens.followingGridGap);
+    expect(delegate.mainAxisSpacing, AppDimens.followingGridRowGap);
+    expect(delegate.mainAxisExtent, greaterThan(0));
+    final card = find.byKey(const Key('following-card-the-signal-demo'));
+    final coverFinder = find.byKey(
+      const Key('following-cover-the-signal-demo'),
+    );
+    final cover = tester.widget<AspectRatio>(coverFinder);
+    expect(cover.aspectRatio, AppDimens.cardCoverAspectRatio);
+    final coverClip = tester.widget<ClipRRect>(
+      find.descendant(
+        of: find.byKey(const Key('following-cover-the-signal-demo')),
+        matching: find.byType(ClipRRect),
+      ),
+    );
+    expect(
+      coverClip.borderRadius,
+      BorderRadius.circular(AppDimens.homeCardRadius),
+    );
+    final titleFinder = find.descendant(
+      of: card,
+      matching: find.text('The Signal'),
+    );
+    final title = tester.widget<Text>(titleFinder);
+    expect(title.style?.fontSize, AppDimens.cardTitleFont);
+    expect(title.style?.fontWeight, FontWeight.w500);
+    expect(title.style?.height, AppDimens.cardTitleLineHeight);
+    final views = tester.widget<Text>(
+      find.descendant(
+        of: find.byKey(const Key('following-views-the-signal-demo')),
+        matching: find.byType(Text),
+      ),
+    );
+    expect(views.style?.fontSize, AppDimens.cardPlayCountFont);
+    expect(views.style?.fontWeight, FontWeight.w400);
+    expect(
+      find.descendant(
+        of: coverFinder,
+        matching: find.byKey(const Key('following-views-the-signal-demo')),
+      ),
+      findsOneWidget,
+    );
+    expect(views.style?.color, AppColors.textPrimary);
+    expect(
+      find.descendant(
+        of: find.byKey(const Key('following-views-the-signal-demo')),
+        matching: find.byIcon(Icons.local_fire_department_rounded),
+      ),
+      findsOneWidget,
+    );
+    expect(
+      tester.getTopLeft(titleFinder).dx,
+      tester.getTopLeft(coverFinder).dx,
+    );
+    expect(
+      tester.getTopLeft(card).dx,
+      lessThan(
+        tester.getTopLeft(find.byKey(const Key('following-add-card'))).dx,
+      ),
+    );
+
+    await tester.tap(find.byKey(const Key('following-edit')));
+    await tester.pumpAndSettle();
+    expect(
+      find.byKey(const Key('following-remove-the-signal-demo')),
+      findsOneWidget,
+    );
+
+    await tester.tap(find.byKey(const Key('following-remove-the-signal-demo')));
+    await tester.pumpAndSettle();
+    expect(find.byType(AlertDialog), findsOneWidget);
+    await tester.tap(
+      find.descendant(
+        of: find.byType(AlertDialog),
+        matching: find.byType(FilledButton),
+      ),
+    );
+    await tester.pumpAndSettle();
+
+    expect(
+      find.byKey(const Key('following-remove-the-signal-demo')),
+      findsNothing,
+    );
+    expect(find.byIcon(Icons.edit_outlined), findsOneWidget);
+    expect(
+      find.byKey(const Key('following-card-the-signal-demo')),
+      findsNothing,
+    );
+
+    await tester.tap(find.byKey(const Key('following-tab-history')));
+    await tester.pumpAndSettle();
+    expect(find.byKey(const Key('following-history-empty')), findsOneWidget);
+  });
+
+  testWidgets('should_show_auth_gate_when_signed_out', (tester) async {
+    SharedPreferencesAsyncPlatform.instance =
+        InMemorySharedPreferencesAsync.empty();
+    await tester.pumpWidget(_app(catalog: FakeCatalogRepository()));
+    await tester.pumpAndSettle();
+    await tester.tap(find.byKey(const Key('tab-follow')));
+    await tester.pumpAndSettle();
+
+    expect(find.byKey(const Key('auth-gate-panel')), findsOneWidget);
+    expect(find.byKey(const Key('following-favorites-grid')), findsNothing);
+  });
+
+  testWidgets('should_show_empty_favorites_and_history', (tester) async {
+    _signIn();
+    await tester.pumpWidget(_app(catalog: FakeCatalogRepository()));
+    await tester.pumpAndSettle();
+    await tester.tap(find.byKey(const Key('tab-follow')));
+    await tester.pumpAndSettle();
+
+    expect(find.byKey(const Key('following-add-card')), findsOneWidget);
+    expect(find.byKey(const Key('following-favorites-empty')), findsNothing);
+    await tester.tap(find.byKey(const Key('following-tab-history')));
+    await tester.pumpAndSettle();
+    expect(find.byKey(const Key('following-history-empty')), findsOneWidget);
+  });
+
+  testWidgets('should_render_history_metadata_without_detail_fetch', (
+    tester,
+  ) async {
+    _signIn();
+    final catalog = _CountingCatalogRepository();
+    await tester.pumpWidget(
+      _app(
+        catalog: catalog,
+        history: InMemoryWatchHistoryRepository(
+          seed: [
+            WatchProgress(
+              dramaId: 'the-signal-demo',
+              episodeId: 'the-signal-demo-3',
+              dramaTitle: 'Server title',
+              dramaCover: '/files/server-cover.jpg',
+              episodeNumber: 3,
+              totalEpisodes: 8,
+              position: const Duration(seconds: 25),
+              duration: const Duration(seconds: 100),
+            ),
+          ],
+        ),
+      ),
+    );
+    await tester.pumpAndSettle();
+    await tester.tap(find.byKey(const Key('tab-follow')));
+    await tester.pumpAndSettle();
+    await tester.tap(find.byKey(const Key('following-tab-history')));
+    await tester.pumpAndSettle();
+
+    expect(find.text('Server title'), findsOneWidget);
+    expect(find.text('Episode 3 / 8 total'), findsOneWidget);
+    expect(find.text('Watched 25%'), findsOneWidget);
+    expect(
+      find.byKey(const Key('following-history-card-the-signal-demo')),
+      findsOneWidget,
+    );
+    expect(
+      find.byKey(const Key('following-history-continue-the-signal-demo')),
+      findsOneWidget,
+    );
+    expect(
+      find.byKey(const Key('following-progress-the-signal-demo')),
+      findsOneWidget,
+    );
+    final cover = tester.widget<SizedBox>(
+      find.byKey(const Key('following-history-cover-the-signal-demo')),
+    );
+    expect(cover.width, AppDimens.followingHistoryCoverWidth);
+    expect(cover.height, AppDimens.followingHistoryCoverHeight);
+    final historyGrid = tester.widget<SliverGrid>(
+      find.descendant(
+        of: find.byKey(const Key('following-history-grid')),
+        matching: find.byType(SliverGrid),
+      ),
+    );
+    final historyDelegate =
+        historyGrid.gridDelegate as SliverGridDelegateWithFixedCrossAxisCount;
+    expect(historyDelegate.crossAxisCount, 1);
+    expect(historyDelegate.mainAxisSpacing, AppDimens.followingHistoryRowGap);
+    expect(catalog.detailFetches, 0);
+
+    await tester.tap(find.byKey(const Key('following-edit')));
+    await tester.pumpAndSettle();
+    expect(
+      find.byKey(const Key('following-history-remove-the-signal-demo')),
+      findsOneWidget,
+    );
+    expect(
+      find.byKey(const Key('following-history-continue-the-signal-demo')),
+      findsNothing,
+    );
+  });
+
+  testWidgets('should_switch_following_pages_horizontally', (tester) async {
+    _signIn();
+    await tester.pumpWidget(_app(catalog: FakeCatalogRepository()));
+    await tester.pumpAndSettle();
+    await tester.tap(find.byKey(const Key('tab-follow')));
+    await tester.pumpAndSettle();
+
+    await tester.drag(
+      find.byKey(const Key('following-tab-pages')),
+      const Offset(-500, 0),
+    );
+    await tester.pumpAndSettle();
+
+    expect(find.byKey(const Key('following-history-empty')), findsOneWidget);
+    final historyTab = tester.widget<AnimatedDefaultTextStyle>(
+      find.descendant(
+        of: find.byKey(const Key('following-tab-history')),
+        matching: find.byType(AnimatedDefaultTextStyle),
+      ),
+    );
+    expect(historyTab.style.fontWeight, FontWeight.w600);
+    expect(historyTab.style.color, AppColors.textPrimary);
+  });
+
+  testWidgets('should_open_home_from_add_card', (tester) async {
+    _signIn();
+    await tester.pumpWidget(_app(catalog: FakeCatalogRepository()));
+    await tester.pumpAndSettle();
+    await tester.tap(find.byKey(const Key('tab-follow')));
+    await tester.pumpAndSettle();
+
+    await tester.tap(find.byKey(const Key('following-add-card')));
+    await tester.pumpAndSettle();
+
+    expect(find.byKey(const Key('home-grid')), findsOneWidget);
+  });
+
+  testWidgets('should_reset_edit_state_when_switching_tabs', (tester) async {
+    _signIn();
+    final catalog = FakeCatalogRepository();
+    await tester.pumpWidget(
+      _app(
+        catalog: catalog,
+        favorites: InMemoryFavoriteRepository(
+          cards: catalog.dramas,
+          saved: catalog.dramas.map((drama) => drama.id).toSet(),
+        ),
+      ),
+    );
+    await tester.pumpAndSettle();
+    await tester.tap(find.byKey(const Key('tab-follow')));
+    await tester.pumpAndSettle();
+    await tester.tap(find.byKey(const Key('following-edit')));
+    await tester.pumpAndSettle();
+
+    await tester.tap(find.byKey(const Key('following-tab-history')));
+    await tester.pumpAndSettle();
+    await tester.tap(find.byKey(const Key('following-tab-favorites')));
+    await tester.pumpAndSettle();
+
+    expect(
+      find.byKey(const Key('following-card-the-signal-demo')),
+      findsOneWidget,
+    );
+    expect(find.byIcon(Icons.edit_outlined), findsOneWidget);
+  });
+
+  testWidgets('should_fit_following_cards_on_compact_viewport', (tester) async {
+    tester.view.physicalSize = const Size(320, 640);
+    tester.view.devicePixelRatio = 1;
+    addTearDown(tester.view.resetPhysicalSize);
+    addTearDown(tester.view.resetDevicePixelRatio);
+    _signIn();
+    final catalog = FakeCatalogRepository();
+    await tester.pumpWidget(
+      _app(
+        catalog: catalog,
+        favorites: InMemoryFavoriteRepository(
+          cards: catalog.dramas.take(1).toList(),
+          saved: {catalog.dramas.first.id},
+        ),
+      ),
+    );
+    await tester.pumpAndSettle();
+    await tester.tap(find.byKey(const Key('tab-follow')));
+    await tester.pumpAndSettle();
+
+    expect(
+      find.byKey(const Key('following-card-the-signal-demo')),
+      findsOneWidget,
+    );
+    expect(tester.takeException(), isNull);
+  });
+}
+
+void _signIn() {
+  SharedPreferencesAsyncPlatform.instance =
+      InMemorySharedPreferencesAsync.withData({
+        'auth.accessToken': 'access',
+        'auth.refreshToken': 'refresh',
+        'auth.user': '{"uid":"9","nickname":"Viewer","avatarUrl":""}',
+      });
+}
+
+Widget _app({
+  required FakeCatalogRepository catalog,
+  FavoriteRepository? favorites,
+  WatchHistoryRepository? history,
+}) {
+  return LumaDramaApp(
+    playerFactory: createWidgetPlayer,
+    catalogRepository: catalog,
+    categoryRepository: FakeCategoryRepository(catalog: catalog),
+    watchHistoryRepository: history ?? InMemoryWatchHistoryRepository(),
+    favoriteRepository: favorites ?? InMemoryFavoriteRepository(),
+    playbackRepository: FakePlaybackRepository(),
+    commentRepository: FakeCommentRepository(),
+    interactionRepository: FakeInteractionRepository(),
+  );
+}
+
+class _CountingCatalogRepository extends FakeCatalogRepository {
+  int detailFetches = 0;
+
+  @override
+  Future<Drama> fetchDrama(String dramaId) {
+    detailFetches += 1;
+    return super.fetchDrama(dramaId);
+  }
+}
diff --git a/test/home/app_bottom_nav_test.dart b/test/home/app_bottom_nav_test.dart
index f019a17..c457535 100644
--- a/test/home/app_bottom_nav_test.dart
+++ b/test/home/app_bottom_nav_test.dart
@@ -7,14 +7,22 @@ import 'package:fruitshorts/core/theme/app_dimens.dart';
 import 'package:fruitshorts/core/widgets/app_bottom_nav.dart';
 
 void main() {
-  testWidgets('should_render_four_slots_with_orange_selected_state', (
+  test('should_use_exact_root_navigation_colors', () {
+    expect(AppColors.navBackground, const Color(0xFF000000));
+    expect(AppColors.navSelected, const Color(0xFFFFFFFF));
+    expect(AppColors.navUnselected, const Color(0xFF8E8E93));
+  });
+
+  testWidgets('should_render_four_slots_with_white_selected_state', (
     tester,
   ) async {
     var theaterTaps = 0;
+    const barKey = Key('nav-bar');
     await tester.pumpWidget(
       MaterialApp(
         home: Scaffold(
           bottomNavigationBar: AppBottomNav(
+            barKey: barKey,
             items: [
               AppBottomNavItem(
                 tabKey: const Key('tab-home'),
@@ -25,17 +33,17 @@ void main() {
                 onTap: () {},
               ),
               AppBottomNavItem(
-                tabKey: const Key('tab-theater'),
-                icon: Icons.explore_outlined,
-                selectedIcon: Icons.explore_rounded,
-                label: 'Theater',
+                tabKey: const Key('tab-recommend'),
+                icon: Icons.smart_display_outlined,
+                selectedIcon: Icons.smart_display_rounded,
+                label: 'Recommend',
                 onTap: () => theaterTaps++,
               ),
               AppBottomNavItem(
-                tabKey: const Key('tab-create'),
-                icon: Icons.add_box_outlined,
-                selectedIcon: Icons.add_box_rounded,
-                label: 'Create',
+                tabKey: const Key('tab-follow'),
+                icon: Icons.bookmark_border_rounded,
+                selectedIcon: Icons.bookmark_rounded,
+                label: 'Following',
                 onTap: () {},
               ),
               AppBottomNavItem(
@@ -52,34 +60,57 @@ void main() {
     );
 
     expect(find.byKey(const Key('tab-home')), findsOneWidget);
-    expect(find.byKey(const Key('tab-theater')), findsOneWidget);
-    expect(find.byKey(const Key('tab-create')), findsOneWidget);
+    expect(find.byKey(const Key('tab-recommend')), findsOneWidget);
+    expect(find.byKey(const Key('tab-follow')), findsOneWidget);
     expect(find.byKey(const Key('tab-mine')), findsOneWidget);
     expect(find.byKey(const Key('nav-center-action')), findsNothing);
     expect(find.text('Home'), findsOneWidget);
+    final selectedLabel = tester.widget<Text>(find.text('Home'));
+    expect(selectedLabel.style?.color, AppColors.navSelected);
+    expect(selectedLabel.style?.fontWeight, FontWeight.w600);
+    expect(selectedLabel.style?.fontSize, AppDimens.navLabel);
+    expect(selectedLabel.style?.letterSpacing, 0);
+    final unselectedLabel = tester.widget<Text>(find.text('Recommend'));
+    expect(unselectedLabel.style?.color, AppColors.navUnselected);
+    expect(unselectedLabel.style?.fontWeight, FontWeight.w400);
     final centers = [
       Key('tab-home'),
-      Key('tab-theater'),
-      Key('tab-create'),
+      Key('tab-recommend'),
+      Key('tab-follow'),
       Key('tab-mine'),
     ].map((key) => tester.getCenter(find.byKey(key)).dx).toList();
     expect(centers, orderedEquals(centers.toList()..sort()));
+    final widths = [
+      Key('tab-home'),
+      Key('tab-recommend'),
+      Key('tab-follow'),
+      Key('tab-mine'),
+    ].map((key) => tester.getSize(find.byKey(key)).width).toList();
+    expect(widths.toSet(), hasLength(1));
     expect(
       tester.getSize(find.byType(AppBottomNav)).height,
       AppDimens.navHeight,
     );
-    expect(
-      tester
-          .widget<Icon>(
-            find.descendant(
-              of: find.byKey(const Key('tab-home')),
-              matching: find.byIcon(Icons.movie_rounded),
-            ),
-          )
-          .color,
-      AppColors.blue,
+    final bar = tester.widget<Container>(find.byKey(barKey));
+    expect(bar.color, AppColors.navBackground);
+    expect(bar.decoration, isNull);
+    final selectedIcon = tester.widget<Icon>(
+      find.descendant(
+        of: find.byKey(const Key('tab-home')),
+        matching: find.byIcon(Icons.movie_rounded),
+      ),
     );
-    await tester.tap(find.byKey(const Key('tab-theater')));
+    expect(selectedIcon.color, AppColors.navSelected);
+    expect(
+      tester.getSize(find.byIcon(Icons.movie_rounded)),
+      const Size.square(AppDimens.navIcon),
+    );
+    expect(
+      tester.getTopLeft(find.text('Home')).dy -
+          tester.getBottomLeft(find.byIcon(Icons.movie_rounded)).dy,
+      AppDimens.navLabelGap,
+    );
+    await tester.tap(find.byKey(const Key('tab-recommend')));
     expect(theaterTaps, 1);
   });
 
@@ -93,7 +124,6 @@ void main() {
           data: const MediaQueryData(padding: EdgeInsets.only(bottom: 34)),
           child: Scaffold(
             bottomNavigationBar: AppBottomNav(
-              dark: true,
               barKey: barKey,
               items: [
                 AppBottomNavItem(
@@ -105,17 +135,17 @@ void main() {
                   onTap: () {},
                 ),
                 AppBottomNavItem(
-                  tabKey: const Key('tab-theater'),
-                  icon: Icons.explore_outlined,
-                  selectedIcon: Icons.explore_rounded,
-                  label: 'Theater',
+                  tabKey: const Key('tab-recommend'),
+                  icon: Icons.smart_display_outlined,
+                  selectedIcon: Icons.smart_display_rounded,
+                  label: 'Recommend',
                   onTap: () {},
                 ),
                 AppBottomNavItem(
-                  tabKey: const Key('tab-create'),
-                  icon: Icons.add_box_outlined,
-                  selectedIcon: Icons.add_box_rounded,
-                  label: 'Create',
+                  tabKey: const Key('tab-follow'),
+                  icon: Icons.bookmark_border_rounded,
+                  selectedIcon: Icons.bookmark_rounded,
+                  label: 'Following',
                   onTap: () {},
                 ),
                 AppBottomNavItem(
@@ -138,12 +168,46 @@ void main() {
     );
     expect(tester.getSize(find.byKey(barKey)).height, AppDimens.navHeight);
 
-    final coloredBox = tester.widget<ColoredBox>(
+    expect(
       find.descendant(
         of: find.byType(AppBottomNav),
-        matching: find.byType(ColoredBox),
+        matching: find.byWidgetPredicate(
+          (widget) =>
+              widget is ColoredBox && widget.color == AppColors.navBackground,
+        ),
       ),
+      findsWidgets,
     );
-    expect(coloredBox.color, Colors.black);
+  });
+
+  testWidgets('should_fallback_when_asset_icon_is_missing', (tester) async {
+    Widget navigation({required bool selected}) {
+      return MaterialApp(
+        home: Scaffold(
+          bottomNavigationBar: AppBottomNav(
+            items: [
+              AppBottomNavItem(
+                tabKey: const Key('tab-home'),
+                icon: Icons.theaters_outlined,
+                selectedIcon: Icons.theaters,
+                assetPath: 'assets/icon/missing_film_reel.png',
+                selectedAssetPath: 'assets/icon/missing_film_reel_filled.png',
+                label: 'Home',
+                selected: selected,
+                onTap: () {},
+              ),
+            ],
+          ),
+        ),
+      );
+    }
+
+    await tester.pumpWidget(navigation(selected: true));
+    await tester.pumpAndSettle();
+    expect(find.byIcon(Icons.theaters), findsOneWidget);
+
+    await tester.pumpWidget(navigation(selected: false));
+    await tester.pumpAndSettle();
+    expect(find.byIcon(Icons.theaters_outlined), findsOneWidget);
   });
 }
diff --git a/test/home/catalog_diagnostics_test.dart b/test/home/catalog_diagnostics_test.dart
index 4c6aefc..80be4fa 100644
--- a/test/home/catalog_diagnostics_test.dart
+++ b/test/home/catalog_diagnostics_test.dart
@@ -10,7 +10,7 @@ import 'package:fruitshorts/core/data/services/catalog_retry.dart';
 import 'package:fruitshorts/core/theme/app_colors.dart';
 import 'package:fruitshorts/core/widgets/catalog_endpoint_editor.dart';
 import 'package:fruitshorts/l10n/app_localizations.dart';
-import 'package:fruitshorts/pages/home/home_view.dart';
+import 'package:fruitshorts/pages/home/widgets/home_failure_view.dart';
 
 void main() {
   tearDown(AppConfig.clearRuntimeBaseUrl);
diff --git a/test/home/home_card_style_test.dart b/test/home/home_card_style_test.dart
index c205ebd..551cfd0 100644
--- a/test/home/home_card_style_test.dart
+++ b/test/home/home_card_style_test.dart
@@ -7,91 +7,214 @@ import 'package:fruitshorts/core/theme/app_colors.dart';
 import 'package:fruitshorts/core/theme/app_dimens.dart';
 import 'package:fruitshorts/core/theme/app_theme.dart';
 import 'package:fruitshorts/l10n/app_localizations.dart';
-import 'package:fruitshorts/pages/home/widgets/home_drama_grid.dart';
+import 'package:fruitshorts/pages/home/widgets/home_feed_card.dart';
 
 void main() {
-  testWidgets('should_render_compact_cover_badges_without_plus_action', (
+  testWidgets('should_render_grid_card_cover_badge_views_title_and_tags', (
     tester,
   ) async {
+    var taps = 0;
+    await _pumpCard(
+      tester,
+      drama: _drama(
+        id: 'anime-card',
+        title: 'A very long home grid drama title that must wrap',
+        dramaType: 'ANIME',
+        viewCount: 444500,
+      ),
+      onTap: () => taps++,
+    );
+
+    final card = find.byKey(const Key('home-feed-card-anime-card'));
+    expect(tester.widget<Material>(card).color, AppColors.transparent);
+    expect(
+      tester
+          .widgetList<Container>(
+            find.descendant(of: card, matching: find.byType(Container)),
+          )
+          .map((container) => container.decoration)
+          .whereType<BoxDecoration>()
+          .every((decoration) => decoration.border == null),
+      isTrue,
+    );
+
+    final cover = find.byKey(const Key('home-feed-cover-anime-card'));
+    final coverSize = tester.getSize(cover);
+    expect(
+      coverSize.height / coverSize.width,
+      closeTo(1 / AppDimens.cardCoverAspectRatio, 0.02),
+    );
+    final coverClip = tester.widget<ClipRRect>(
+      find.byKey(const Key('home-feed-cover-clip-anime-card')),
+    );
+    expect(
+      coverClip.borderRadius,
+      BorderRadius.circular(AppDimens.cardCoverRadius),
+    );
+    final badge = find.byKey(
+      const Key('drama-cover-badge-ribbon-anime-card-anime'),
+    );
+    expect(badge, findsOneWidget);
+    expect(
+      tester
+          .widget<Text>(find.descendant(of: badge, matching: find.byType(Text)))
+          .style
+          ?.fontSize,
+      AppDimens.cardBadgeFont,
+    );
+    expect(
+      tester.getTopRight(badge).dx,
+      closeTo(tester.getTopRight(cover).dx, 1),
+    );
+    expect(
+      tester.getTopRight(badge).dy,
+      closeTo(tester.getTopRight(cover).dy, 1),
+    );
+    expect(find.text('Anime'), findsOneWidget);
+    expect(find.byKey(const Key('home-feed-views-anime-card')), findsOneWidget);
+    final views = find.byKey(const Key('home-feed-views-anime-card'));
+    final viewsText = tester.widget<Text>(
+      find.descendant(of: views, matching: find.byType(Text)),
+    );
+    expect(viewsText.data, '44.5w');
+    expect(viewsText.style?.fontSize, AppDimens.cardPlayCountFont);
+    expect(viewsText.style?.fontWeight, FontWeight.w400);
+    expect(viewsText.style?.color, AppColors.navSelected);
+    expect(find.descendant(of: cover, matching: views), findsOneWidget);
+    expect(
+      tester.getTopRight(cover).dx - tester.getTopRight(views).dx,
+      AppDimens.cardPlayCountRight,
+    );
+    expect(
+      tester.getBottomLeft(cover).dy - tester.getBottomLeft(views).dy,
+      AppDimens.cardPlayCountBottom,
+    );
+    expect(
+      find.descendant(of: views, matching: find.byType(Container)),
+      findsNothing,
+    );
+    expect(
+      find.descendant(
+        of: views,
+        matching: find.byIcon(Icons.local_fire_department_rounded),
+      ),
+      findsOneWidget,
+    );
+    final titleFinder = find.byKey(
+      const Key('home-feed-title-anime-card'),
+    );
+    final title = tester.widget<Text>(titleFinder);
+    expect(title.maxLines, 2);
+    expect(title.style?.fontSize, AppDimens.cardTitleFont);
+    expect(title.style?.fontWeight, FontWeight.w500);
+    expect(title.style?.height, AppDimens.cardTitleLineHeight);
+    final tagsFinder = find.byKey(const Key('home-feed-tags-anime-card'));
+    final tags = tester.widget<Text>(tagsFinder);
+    expect(tags.data, 'Romance | Urban');
+    expect(tags.style?.fontSize, AppDimens.cardTagFont);
+    expect(tags.style?.color, AppColors.textTertiary);
+    expect(tester.getTopLeft(titleFinder).dx, tester.getTopLeft(cover).dx);
+    expect(tester.getTopLeft(tagsFinder).dx, tester.getTopLeft(cover).dx);
+
+    await tester.tap(card);
+    expect(taps, 1);
+  });
+
+  testWidgets('should_choose_anime_new_and_hot_badges_from_real_data', (
+    tester,
+  ) async {
+    final now = DateTime(2026, 10, 22, 12);
     await tester.pumpWidget(
       MaterialApp(
-        theme: AppTheme.light(),
+        theme: AppTheme.dark(),
         locale: const Locale('en'),
         supportedLocales: AppLocalizations.supportedLocales,
         localizationsDelegates: AppLocalizations.localizationsDelegates,
         home: Scaffold(
-          body: SingleChildScrollView(
-            child: Builder(
-              builder: (context) => SizedBox(
-                width: 180,
-                child: HomeDramaCard(
-                  l10n: AppLocalizations.of(context)!,
-                  drama: _drama,
-                  onTap: () {},
+          body: Row(
+            children: [
+              for (final drama in [
+                _drama(id: 'anime', title: 'Anime', dramaType: 'ANIME'),
+                _drama(
+                  id: 'new',
+                  title: 'New',
+                  createdAt: now.subtract(const Duration(days: 2)),
                 ),
-              ),
-            ),
+                _drama(id: 'hot', title: 'Hot', isHot: true),
+              ])
+                SizedBox(
+                  width: 130,
+                  height: 240,
+                  child: HomeFeedCard(drama: drama, onTap: () {}, now: now),
+                ),
+            ],
           ),
         ),
       ),
     );
     await tester.pumpAndSettle();
 
-    final card = find.byKey(const Key('home-drama-card-style-drama'));
-    final cardContainer = tester.widget<Container>(
-      find.ancestor(of: card, matching: find.byType(Container)).last,
-    );
-    final cardDecoration = cardContainer.decoration! as BoxDecoration;
-    expect(cardDecoration.color, AppColors.card);
     expect(
-      cardDecoration.borderRadius,
-      BorderRadius.circular(AppDimens.cardRadius),
-    );
-    expect(cardDecoration.boxShadow, const [AppTheme.cardShadow]);
-
-    final tag = tester.widget<Container>(
-      find.byKey(const Key('home-drama-tag-style-drama')),
-    );
-    expect((tag.decoration! as BoxDecoration).color, AppColors.badgePink);
-    expect(find.text('Free'), findsOneWidget);
-    expect(find.text('All 24'), findsOneWidget);
-    expect(
-      find.byKey(const Key('home-drama-locked-style-drama')),
-      findsNothing,
-    );
-    expect(find.byKey(const Key('home-drama-add-style-drama')), findsNothing);
-
-    // 播放次数角标落在封面内，并按万位格式化。
-    final views = find.byKey(const Key('home-drama-views-style-drama'));
-    expect(
-      find.descendant(
-        of: find.byKey(const Key('home-drama-cover-style-drama')),
-        matching: views,
-      ),
+      find.byKey(const Key('drama-cover-badge-ribbon-anime-anime')),
       findsOneWidget,
     );
     expect(
-      find.descendant(of: views, matching: find.text('1.2万')),
+      find.byKey(const Key('drama-cover-badge-ribbon-new-newRelease')),
       findsOneWidget,
     );
-
-    // 压缩后卡片高度接近「卡宽 × 1.5」，明显矮于旧版 3:4 封面。
-    final cardSize = tester.getSize(card);
-    expect(cardSize.height, lessThan(cardSize.width * 1.6));
-    final coverSize = tester.getSize(
-      find.byKey(const Key('home-drama-cover-style-drama')),
+    expect(
+      find.byKey(const Key('drama-cover-badge-ribbon-hot-hot')),
+      findsOneWidget,
     );
-    expect(coverSize.height / coverSize.width, closeTo(6 / 5, 0.02));
   });
 }
 
-const _drama = Drama(
-  id: 'style-drama',
-  title: 'Warm Orange Story',
-  synopsis: '暖橙短剧',
-  posterUrl: '/files/style.jpg',
-  genre: 'Romance',
-  totalEpisodes: 24,
-  freeEpisodes: 6,
-  viewCount: 12400,
-);
+Drama _drama({
+  required String id,
+  required String title,
+  String dramaType = 'LIVE',
+  int viewCount = 0,
+  bool isHot = false,
+  DateTime? createdAt,
+}) {
+  return Drama(
+    id: id,
+    title: title,
+    synopsis: 'synopsis',
+    posterUrl: '/files/$id.jpg',
+    genre: 'Romance',
+    category: 'Urban',
+    viewCount: viewCount,
+    isHot: isHot,
+    dramaType: dramaType,
+    createdAt: createdAt,
+  );
+}
+
+Future<void> _pumpCard(
+  WidgetTester tester, {
+  required Drama drama,
+  required VoidCallback onTap,
+}) {
+  return tester.pumpWidget(
+    MaterialApp(
+      theme: AppTheme.dark(),
+      locale: const Locale('en'),
+      supportedLocales: AppLocalizations.supportedLocales,
+      localizationsDelegates: AppLocalizations.localizationsDelegates,
+      home: Scaffold(
+        body: Center(
+          child: SizedBox(
+            width: 130,
+            height: 240,
+            child: HomeFeedCard(
+              drama: drama,
+              onTap: onTap,
+              now: DateTime(2026, 10, 22, 12),
+            ),
+          ),
+        ),
+      ),
+    ),
+  );
+}
diff --git a/test/home/home_grid_layout_test.dart b/test/home/home_grid_layout_test.dart
new file mode 100644
index 0000000..54509ac
--- /dev/null
+++ b/test/home/home_grid_layout_test.dart
@@ -0,0 +1,336 @@
+// Author: fruit.com.cn
+
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:fruitshorts/app.dart';
+import 'package:fruitshorts/core/data/models/content_category.dart';
+import 'package:fruitshorts/core/data/models/drama.dart';
+import 'package:fruitshorts/core/data/models/feed_page.dart';
+import 'package:fruitshorts/core/data/models/home_feed.dart';
+import 'package:fruitshorts/core/data/repositories/catalog_repository.dart';
+import 'package:fruitshorts/core/data/repositories/favorite_repository.dart';
+import 'package:fruitshorts/core/data/repositories/playback_repository.dart';
+import 'package:fruitshorts/core/data/repositories/watch_history_repository.dart';
+import 'package:fruitshorts/core/theme/app_dimens.dart';
+import 'package:fruitshorts/core/theme/app_theme.dart';
+import 'package:fruitshorts/pages/home/widgets/home_feed_card.dart';
+import 'package:fruitshorts/pages/player/player_view.dart';
+import 'package:shared_preferences_platform_interface/in_memory_shared_preferences_async.dart';
+import 'package:shared_preferences_platform_interface/shared_preferences_async_platform_interface.dart';
+
+import '../support/fake_category.dart';
+import '../support/fake_haptics.dart';
+import '../support/fake_interaction_repositories.dart';
+import '../support/widget_player.dart';
+
+const _categories = [
+  ContentCategory(id: 'costume', name: '古装'),
+  ContentCategory(id: 'community', name: '社群'),
+  ContentCategory(id: 'uplifting', name: '爽剧'),
+  ContentCategory(id: 'sweet', name: '甜宠'),
+  ContentCategory(id: 'face-slap', name: '打脸虐渣'),
+  ContentCategory(id: 'angst', name: '虐恋'),
+];
+
+void main() {
+  setUp(() {
+    SharedPreferencesAsyncPlatform.instance =
+        InMemorySharedPreferencesAsync.empty();
+  });
+
+  testWidgets('should_render_primary_sections_and_secondary_tags_in_order', (
+    tester,
+  ) async {
+    final repository = _PagedCatalogRepository();
+    await _pumpApp(tester, repository);
+
+    final sectionKeys = [
+      const Key('home-section-featured'),
+      const Key('home-section-new'),
+      const Key('home-section-categories'),
+      const Key('home-section-ranking'),
+      const Key('home-section-category-古装'),
+      const Key('home-section-category-社群'),
+    ];
+    final sectionCenters = sectionKeys
+        .map((key) => tester.getCenter(find.byKey(key)).dx)
+        .toList();
+    expect(sectionCenters, orderedEquals(sectionCenters.toList()..sort()));
+    expect(find.byKey(const Key('home-secondary-tags')), findsNothing);
+    expect(find.text('Featured'), findsOneWidget);
+    expect(find.text('New'), findsOneWidget);
+    expect(find.text('Categories'), findsOneWidget);
+    expect(find.text('Charts'), findsOneWidget);
+    expect(find.text('Costume'), findsOneWidget);
+    expect(find.text('Community'), findsOneWidget);
+    expect(find.byKey(const Key('mine-mini-player')), findsNothing);
+    expect(find.byType(FloatingActionButton), findsNothing);
+  });
+
+  testWidgets('should_hide_unmatched_content_sections', (tester) async {
+    final repository = _PagedCatalogRepository();
+    await _pumpApp(
+      tester,
+      repository,
+      categories: const [ContentCategory(id: 'romance', name: 'Romance')],
+    );
+
+    expect(find.byKey(const Key('home-section-category-古装')), findsNothing);
+    expect(find.byKey(const Key('home-section-category-社群')), findsNothing);
+    expect(find.byKey(const Key('home-tag-uplifting')), findsNothing);
+  });
+
+  testWidgets('should_switch_home_sections_without_pushing_pages', (
+    tester,
+  ) async {
+    final repository = _PagedCatalogRepository();
+    await _pumpApp(tester, repository);
+
+    String firstDramaId() {
+      return tester
+          .widget<HomeFeedCard>(find.byType(HomeFeedCard).first)
+          .drama
+          .id;
+    }
+
+    expect(find.byKey(const Key('home-grid')), findsOneWidget);
+    expect(firstDramaId(), 'page1-0');
+
+    await tester.tap(find.byKey(const Key('home-section-new')));
+    await tester.pumpAndSettle();
+    expect(find.byKey(const Key('new-releases-page')), findsNothing);
+    expect(find.byKey(const Key('home-secondary-tags')), findsNothing);
+    expect(firstDramaId(), 'page1-9');
+
+    await tester.tap(find.byKey(const Key('home-section-ranking')));
+    await tester.pumpAndSettle();
+    expect(find.byKey(const Key('ranking-page')), findsOneWidget);
+    expect(find.byKey(const Key('ranking-hero')), findsOneWidget);
+    expect(find.byKey(const Key('home-grid-cards')), findsNothing);
+    final home = tester.widget<DecoratedBox>(find.byKey(const Key('home-grid')));
+    expect(
+      (home.decoration as BoxDecoration).gradient,
+      AppTheme.pageGradient,
+    );
+
+    await tester.tap(find.byKey(const Key('home-section-categories')));
+    await tester.pumpAndSettle();
+    expect(find.byKey(const Key('filter-page')), findsNothing);
+    expect(find.byKey(const Key('home-secondary-tags')), findsNothing);
+    expect(find.byKey(const Key('home-grid-cards')), findsOneWidget);
+
+    await tester.tap(find.byKey(const Key('home-section-category-古装')));
+    await tester.pumpAndSettle();
+    expect(firstDramaId(), 'page1-0');
+
+    await tester.tap(find.byKey(const Key('home-section-category-社群')));
+    await tester.pumpAndSettle();
+    expect(find.byKey(const Key('home-grid-empty')), findsOneWidget);
+    expect(find.byKey(const Key('filter-page')), findsNothing);
+  });
+
+  testWidgets('should_keep_scroll_position_when_switching_sections', (
+    tester,
+  ) async {
+    final repository = _PagedCatalogRepository();
+    await _pumpApp(tester, repository);
+
+    await tester.drag(
+      find.byKey(const Key('home-grid-scroll')),
+      const Offset(0, -320),
+    );
+    await tester.pumpAndSettle();
+    final scrollable = find
+        .descendant(
+          of: find.byKey(const Key('home-grid-scroll')),
+          matching: find.byType(Scrollable),
+        )
+        .first;
+    final before = tester.state<ScrollableState>(scrollable).position.pixels;
+    expect(before, greaterThan(0));
+
+    await tester.tap(find.byKey(const Key('home-section-new')));
+    await tester.pumpAndSettle();
+    await tester.tap(find.byKey(const Key('home-section-featured')));
+    await tester.pumpAndSettle();
+    expect(find.byKey(const Key('home-secondary-tags')), findsNothing);
+
+    final afterScrollable = find
+        .descendant(
+          of: find.byKey(const Key('home-grid-scroll')),
+          matching: find.byType(Scrollable),
+        )
+        .first;
+    expect(
+      tester.state<ScrollableState>(afterScrollable).position.pixels,
+      closeTo(before, 0.1),
+    );
+  });
+
+  testWidgets('should_swipe_between_primary_sections', (tester) async {
+    final repository = _PagedCatalogRepository();
+    await _pumpApp(tester, repository);
+
+    expect(find.byKey(const Key('home-secondary-tags')), findsNothing);
+    await tester.drag(
+      find.byKey(const Key('home-primary-page-view')),
+      const Offset(-320, 0),
+    );
+    await tester.pumpAndSettle();
+
+    expect(find.byKey(const Key('home-secondary-tags')), findsNothing);
+    final selected = tester.widget<AnimatedDefaultTextStyle>(
+      find.byKey(const Key('home-primary-label-newReleases')),
+    );
+    expect(selected.style.fontSize, AppDimens.homePrimaryTabSelectedFont);
+    expect(selected.style.fontWeight, FontWeight.w700);
+
+    await tester.drag(
+      find.byKey(const Key('home-primary-page-view')),
+      const Offset(320, 0),
+    );
+    await tester.pumpAndSettle();
+    expect(find.byKey(const Key('home-secondary-tags')), findsNothing);
+  });
+
+  testWidgets('should_load_next_page_without_expanding_page_size', (
+    tester,
+  ) async {
+    final repository = _PagedCatalogRepository();
+    await _pumpApp(tester, repository);
+
+    expect(find.byKey(const Key('home-feed-card-page1-0')), findsOneWidget);
+    await tester.drag(
+      find.byKey(const Key('home-grid-scroll')),
+      const Offset(0, -1200),
+    );
+    await tester.pumpAndSettle();
+    expect(repository.cursors, contains('page1'));
+    expect(repository.requestedSizes.every((size) => size <= 20), isTrue);
+
+    await tester.scrollUntilVisible(
+      find.byKey(const Key('home-feed-card-page2-1')),
+      260,
+      scrollable: find
+          .descendant(
+            of: find.byKey(const Key('home-grid-refresh')),
+            matching: find.byType(Scrollable),
+          )
+          .first,
+    );
+    expect(find.byKey(const Key('home-feed-card-page2-1')), findsOneWidget);
+  });
+
+  testWidgets('should_open_player_when_grid_card_is_tapped', (tester) async {
+    final repository = _PagedCatalogRepository();
+    await _pumpApp(tester, repository);
+
+    await tester.tap(find.byKey(const Key('home-feed-card-page1-0')));
+    await tester.pumpAndSettle();
+
+    final player = tester.widget<PlayerPage>(find.byType(PlayerPage).last);
+    expect(player.homeMode, isFalse);
+  });
+}
+
+Future<void> _pumpApp(
+  WidgetTester tester,
+  _PagedCatalogRepository repository, {
+  List<ContentCategory> categories = _categories,
+}) async {
+  tester.view.physicalSize = const Size(390, 844);
+  tester.view.devicePixelRatio = 1;
+  addTearDown(tester.view.resetPhysicalSize);
+  addTearDown(tester.view.resetDevicePixelRatio);
+  await tester.pumpWidget(
+    LumaDramaApp(
+      playerFactory: createWidgetPlayer,
+      catalogRepository: repository,
+      categoryRepository: FakeCategoryRepository(
+        catalog: repository,
+        categories: categories,
+      ),
+      watchHistoryRepository: InMemoryWatchHistoryRepository(),
+      favoriteRepository: InMemoryFavoriteRepository(
+        cards: repository.allDramas,
+      ),
+      playbackRepository: FakePlaybackRepository(),
+      commentRepository: FakeCommentRepository(),
+      interactionRepository: FakeInteractionRepository(),
+      haptics: FakeHaptics(),
+    ),
+  );
+  await tester.pumpAndSettle();
+}
+
+class _PagedCatalogRepository implements CatalogRepository {
+  _PagedCatalogRepository()
+    : pageOne = List.generate(10, (index) => _drama('page1-$index')),
+      pageTwo = List.generate(2, (index) => _drama('page2-$index'));
+
+  final List<Drama> pageOne;
+  final List<Drama> pageTwo;
+  final List<String?> cursors = [];
+  final List<int> requestedSizes = [];
+
+  List<Drama> get allDramas => [...pageOne, ...pageTwo];
+
+  @override
+  Future<HomeFeed> fetchHomeFeed() async => _feed(pageOne);
+
+  @override
+  Future<HomeFeed> fetchDiscoverFeed() async => _feed(pageOne);
+
+  @override
+  Future<FeedPage> fetchFeed({
+    List<String> types = const [],
+    String? categoryId,
+    String? cursor,
+    int size = 10,
+  }) async {
+    requestedSizes.add(size);
+    if (types.isNotEmpty) {
+      return const FeedPage(dramas: []);
+    }
+    cursors.add(cursor);
+    if (cursor == 'page1') {
+      return FeedPage(dramas: pageTwo, hasMore: false);
+    }
+    return FeedPage(dramas: pageOne, nextCursor: 'page1', hasMore: true);
+  }
+
+  @override
+  Future<Drama> fetchDrama(String dramaId) async {
+    return allDramas.firstWhere((drama) => drama.id == dramaId);
+  }
+
+  HomeFeed _feed(List<Drama> dramas) {
+    return HomeFeed(
+      sections: [FeedSection(code: 'hot', title: 'Hot', dramas: dramas)],
+    );
+  }
+}
+
+Drama _drama(String id) {
+  final index = int.tryParse(id.split('-').last) ?? 0;
+  return Drama(
+    id: id,
+    title: 'Grid Drama $id',
+    synopsis: 'synopsis',
+    posterUrl: '',
+    genre: 'Romance',
+    category: index.isEven ? '古装' : 'Urban',
+    viewCount: (10 - index) * 10000,
+    createdAt: DateTime(2026, 10, 1).add(Duration(days: index)),
+    detailLoaded: true,
+    episodes: [
+      Episode(
+        id: '$id-1',
+        number: 1,
+        title: 'Episode 1',
+        isFree: true,
+        videoUrl: 'https://example.test/$id.mp4',
+      ),
+    ],
+  );
+}
diff --git a/test/home/home_logic_test.dart b/test/home/home_logic_test.dart
index c23a029..2f58977 100644
--- a/test/home/home_logic_test.dart
+++ b/test/home/home_logic_test.dart
@@ -23,15 +23,17 @@ void main() {
   test('should_make_first_catalog_entry_current_when_catalog_loads', () {
     final logic = HomeLogic(dramas);
 
-    expect(logic.currentDrama.id, 'signal');
+    expect(logic.currentDrama?.id, 'signal');
     expect(logic.tab, 0);
     expect(logic.drawerOpen, isFalse);
     expect(logic.videoImmersive, isFalse);
     logic.dispose();
   });
 
-  test('should_not_build_shell_when_catalog_is_empty', () {
-    expect(() => HomeLogic(const []), throwsStateError);
+  test('should_allow_empty_catalog_for_startup_skeleton', () {
+    final logic = HomeLogic(const []);
+    expect(logic.currentDrama, isNull);
+    logic.dispose();
   });
 
   test('should_not_raise_request_counter_when_only_tab_switches', () {
@@ -42,23 +44,17 @@ void main() {
     logic.select(1);
 
     expect(logic.tab, 1);
-    expect(logic.searchRequest, 0);
     expect(logic.resumeRequest, 0);
     expect(logic.backRequest, 0);
     expect(notifications, 1);
     logic.dispose();
   });
 
-  test('should_raise_only_its_own_counter_when_each_select_flag_is_used', () {
+  test('should_raise_only_resume_counter_when_select_flag_is_used', () {
     final logic = HomeLogic(dramas);
 
-    logic.select(1, search: true);
-    expect(logic.searchRequest, 1);
-    expect(logic.resumeRequest, 0);
-
     logic.select(0, resume: true);
     expect(logic.resumeRequest, 1);
-    expect(logic.searchRequest, 1);
     logic.dispose();
   });
 
@@ -115,7 +111,7 @@ void main() {
     final logic = HomeLogic(dramas);
 
     logic.onDramaChanged(dramas[1]);
-    expect(logic.currentDrama.id, 'city');
+    expect(logic.currentDrama?.id, 'city');
 
     logic.onImmersiveChanged(true);
     expect(logic.videoImmersive, isTrue);
@@ -149,7 +145,7 @@ void main() {
 
     expect(immediateNotifications, 0);
     expect(tester.takeException(), isNull);
-    expect(logic.currentDrama.id, 'city');
+    expect(logic.currentDrama?.id, 'city');
     await tester.pump();
     expect(notifications, 1);
     expect(tester.takeException(), isNull);
@@ -159,13 +155,16 @@ void main() {
   test('should_map_onto_root_tabs_when_my_page_actions_fire', () {
     final logic = HomeLogic(dramas);
 
-    logic.myAction(MyPageAction.discover);
+    logic.myAction(MyPageAction.recommend);
     expect(logic.tab, 1);
-    expect(logic.searchRequest, 1);
 
-    logic.myAction(MyPageAction.create);
+    logic.myAction(MyPageAction.following);
     expect(logic.tab, 2);
 
+    logic.openFollowingHistory();
+    expect(logic.tab, 2);
+    expect(logic.followingHistoryRequest, 1);
+
     logic.myAction(MyPageAction.resume);
     expect(logic.tab, 0);
     expect(logic.resumeRequest, 1);
@@ -179,10 +178,10 @@ void main() {
   test('should_map_onto_root_tabs_when_discover_actions_fire', () {
     final logic = HomeLogic(dramas);
 
-    logic.discoverAction(DiscoverPageAction.my);
+    logic.discoverAction(DiscoverPageAction.mine);
     expect(logic.tab, 3);
 
-    logic.discoverAction(DiscoverPageAction.create);
+    logic.discoverAction(DiscoverPageAction.following);
     expect(logic.tab, 2);
 
     logic.discoverAction(DiscoverPageAction.home);
diff --git a/test/home/home_nav_ui_test.dart b/test/home/home_nav_ui_test.dart
index 1b61ce0..354fc46 100644
--- a/test/home/home_nav_ui_test.dart
+++ b/test/home/home_nav_ui_test.dart
@@ -3,10 +3,15 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:fruitshorts/app.dart';
+import 'package:fruitshorts/core/data/models/wallet.dart';
+import 'package:fruitshorts/core/data/repositories/commerce_repository.dart';
 import 'package:fruitshorts/core/data/repositories/favorite_repository.dart';
 import 'package:fruitshorts/core/data/repositories/playback_repository.dart';
 import 'package:fruitshorts/core/data/repositories/watch_history_repository.dart';
 import 'package:fruitshorts/core/theme/app_colors.dart';
+import 'package:fruitshorts/core/theme/app_dimens.dart';
+import 'package:fruitshorts/core/widgets/app_bottom_nav.dart';
+import 'package:fruitshorts/pages/following/following_page.dart';
 import 'package:shared_preferences_platform_interface/in_memory_shared_preferences_async.dart';
 import 'package:shared_preferences_platform_interface/shared_preferences_async_platform_interface.dart';
 
@@ -19,8 +24,8 @@ import '../support/widget_player.dart';
 const _keys = [
   Key('home-tabs-bar'),
   Key('tab-home'),
-  Key('tab-theater'),
-  Key('tab-create'),
+  Key('tab-recommend'),
+  Key('tab-follow'),
   Key('tab-mine'),
 ];
 
@@ -44,28 +49,133 @@ void main() {
     for (final key in _keys) {
       expect(find.byKey(key), findsOneWidget);
     }
+    expect(find.byKey(const Key('home-wallet-entry')), findsOneWidget);
+    expect(find.byKey(const Key('home-wallet-badge')), findsOneWidget);
+    final searchEntry = find.byKey(const Key('home-search-entry'));
+    final vipEntry = find.byKey(const Key('home-vip-entry'));
+    final walletEntry = find.byKey(const Key('home-wallet-entry'));
+    expect(
+      tester.getSize(vipEntry),
+      const Size.square(AppDimens.homeActionSlot),
+    );
+    expect(
+      tester.getSize(walletEntry),
+      const Size.square(AppDimens.homeActionSlot),
+    );
+    expect(
+      tester.getSize(find.byKey(const Key('home-vip-icon-frame'))),
+      const Size.square(AppDimens.homeActionIcon),
+    );
+    expect(
+      tester.getSize(find.byKey(const Key('home-wallet-icon-frame'))),
+      const Size.square(AppDimens.homeActionIcon),
+    );
+    expect(
+      tester.getCenter(find.byKey(const Key('home-vip-icon-frame'))).dy,
+      tester.getCenter(find.byKey(const Key('home-wallet-icon-frame'))).dy,
+    );
+    final crownImage = tester.widget<Image>(
+      find.byKey(const Key('home-vip-image')),
+    );
+    final giftImage = tester.widget<Image>(
+      find.byKey(const Key('home-wallet-image')),
+    );
+    expect((crownImage.image as AssetImage).assetName, 'assets/icon/crown.png');
+    expect((giftImage.image as AssetImage).assetName, 'assets/icon/gift.png');
+    expect(
+      tester.getCenter(vipEntry).dy,
+      closeTo(tester.getCenter(searchEntry).dy, 0.1),
+    );
+    expect(
+      tester.getCenter(walletEntry).dy,
+      closeTo(tester.getCenter(searchEntry).dy, 0.1),
+    );
+    expect(
+      tester.getTopLeft(walletEntry).dx - tester.getTopRight(vipEntry).dx,
+      AppDimens.homeActionGap,
+    );
+    expect(
+      tester.getTopRight(walletEntry).dx,
+      closeTo(390 - AppDimens.feedPageHorizontal, 0.1),
+    );
+    final crown = tester.widget<Icon>(
+      find.descendant(
+        of: vipEntry,
+        matching: find.byIcon(Icons.workspace_premium_outlined),
+      ),
+    );
+    final gift = tester.widget<Icon>(
+      find.descendant(
+        of: walletEntry,
+        matching: find.byIcon(Icons.card_giftcard_rounded),
+      ),
+    );
+    expect(crown.size, AppDimens.homeActionIcon);
+    expect(crown.color, AppColors.homeCrownGold);
+    expect(gift.size, AppDimens.homeActionIcon);
+    expect(gift.color, AppColors.homeGiftPink);
+    expect(
+      tester
+          .widget<Material>(
+            find.ancestor(of: vipEntry, matching: find.byType(Material)).first,
+          )
+          .color,
+      AppColors.transparent,
+    );
+    expect(find.byKey(const Key('mine-mini-player')), findsNothing);
+    expect(find.byType(FloatingActionButton), findsNothing);
     for (final key in _keys.skip(1)) {
       expect(tester.getSize(find.byKey(key)).height, greaterThanOrEqualTo(48));
     }
+    final tabCenters = _keys
+        .skip(1)
+        .map((key) => tester.getCenter(find.byKey(key)).dx)
+        .toList();
+    expect(tabCenters, orderedEquals(tabCenters.toList()..sort()));
+    expect(
+      find.descendant(
+        of: find.byKey(const Key('tab-home')),
+        matching: find.text('Home'),
+      ),
+      findsOneWidget,
+    );
+    expect(
+      find.descendant(
+        of: find.byKey(const Key('tab-recommend')),
+        matching: find.text('Recommend'),
+      ),
+      findsOneWidget,
+    );
+    expect(
+      find.descendant(
+        of: find.byKey(const Key('tab-follow')),
+        matching: find.text('Following'),
+      ),
+      findsOneWidget,
+    );
+    expect(
+      find.descendant(
+        of: find.byKey(const Key('tab-mine')),
+        matching: find.text('My'),
+      ),
+      findsOneWidget,
+    );
 
     final barFinder = find.byKey(const Key('home-tabs-bar'));
     final bar = tester.widget<Container>(barFinder);
-    final decoration = bar.decoration as BoxDecoration;
-    final border = decoration.border as Border;
-    // 首页 feed 用深色导航。
-    expect(decoration.color, Colors.black);
-    expect(border.top.color, Colors.white12);
+    expect(bar.color, AppColors.navBackground);
+    expect(bar.decoration, isNull);
     expect(
       tester
           .widget<Text>(
             find.descendant(
-              of: find.byKey(const Key('tab-theater')),
-              matching: find.text('Theater'),
+              of: find.byKey(const Key('tab-recommend')),
+              matching: find.text('Recommend'),
             ),
           )
           .style
           ?.color,
-      Colors.white70,
+      AppColors.navUnselected,
     );
     expect(
       tester
@@ -81,36 +191,70 @@ void main() {
     expect(
       find.descendant(
         of: find.byKey(const Key('tab-home')),
-        matching: find.byIcon(Icons.home_rounded),
+        matching: find.byType(Image),
+      ),
+      findsOneWidget,
+    );
+    expect(
+      find.descendant(
+        of: find.byKey(const Key('tab-recommend')),
+        matching: find.byIcon(Icons.smart_display_outlined),
+      ),
+      findsOneWidget,
+    );
+    expect(
+      find.descendant(
+        of: find.byKey(const Key('tab-follow')),
+        matching: find.byIcon(Icons.bookmark_border_rounded),
+      ),
+      findsOneWidget,
+    );
+    expect(
+      find.descendant(
+        of: find.byKey(const Key('tab-mine')),
+        matching: find.byIcon(Icons.person_outline_rounded),
       ),
       findsOneWidget,
     );
     expect(
       tester
-          .widget<Icon>(
+          .widget<ColorFiltered>(
             find.descendant(
               of: find.byKey(const Key('tab-home')),
-              matching: find.byIcon(Icons.home_rounded),
+              matching: find.byType(ColorFiltered),
             ),
           )
-          .color,
-      AppColors.blue,
+          .colorFilter,
+      const ColorFilter.mode(AppColors.navSelected, BlendMode.srcIn),
+    );
+    final selectedHomeImage = tester.widget<Image>(
+      find.descendant(
+        of: find.byKey(const Key('tab-home')),
+        matching: find.byType(Image),
+      ),
+    );
+    expect(
+      (selectedHomeImage.image as AssetImage).assetName,
+      'assets/icon/film_reel_filled.png',
+    );
+    expect(
+      Size(selectedHomeImage.width!, selectedHomeImage.height!),
+      const Size.square(AppDimens.navIcon),
     );
 
-    await tester.tap(find.byKey(const Key('tab-theater')));
+    await tester.tap(find.byKey(const Key('tab-recommend')));
     await tester.pumpAndSettle();
     expect(haptics.selectionClicks, 1);
-    final lightBar = tester.widget<Container>(barFinder);
-    final lightDecoration = lightBar.decoration as BoxDecoration;
-    expect(lightDecoration.color, AppColors.bar.withValues(alpha: 0.95));
-    expect((lightDecoration.border as Border).top.color, AppColors.border);
-    await tester.tap(find.byKey(const Key('tab-theater')));
+    final theaterBar = tester.widget<Container>(barFinder);
+    expect(theaterBar.color, AppColors.navBackground);
+    expect(theaterBar.decoration, isNull);
+    await tester.tap(find.byKey(const Key('tab-recommend')));
     await tester.pumpAndSettle();
     expect(haptics.selectionClicks, 1);
     expect(
       find.descendant(
-        of: find.byKey(const Key('tab-theater')),
-        matching: find.byIcon(Icons.explore_rounded),
+        of: find.byKey(const Key('tab-recommend')),
+        matching: find.byIcon(Icons.smart_display_rounded),
       ),
       findsOneWidget,
     );
@@ -118,13 +262,13 @@ void main() {
       tester
           .widget<Text>(
             find.descendant(
-              of: find.byKey(const Key('tab-theater')),
-              matching: find.text('Theater'),
+              of: find.byKey(const Key('tab-recommend')),
+              matching: find.text('Recommend'),
             ),
           )
           .style
           ?.color,
-      AppColors.blue,
+      AppColors.navSelected,
     );
     expect(
       tester
@@ -141,41 +285,88 @@ void main() {
     expect(
       find.descendant(
         of: find.byKey(const Key('tab-home')),
-        matching: find.byIcon(Icons.home_outlined),
+        matching: find.byType(Image),
       ),
       findsOneWidget,
     );
+    expect(
+      tester
+          .widget<ColorFiltered>(
+            find.descendant(
+              of: find.byKey(const Key('tab-home')),
+              matching: find.byType(ColorFiltered),
+            ),
+          )
+          .colorFilter,
+      const ColorFilter.mode(AppColors.navUnselected, BlendMode.srcIn),
+    );
+    final unselectedHomeImage = tester.widget<Image>(
+      find.descendant(
+        of: find.byKey(const Key('tab-home')),
+        matching: find.byType(Image),
+      ),
+    );
+    expect(
+      (unselectedHomeImage.image as AssetImage).assetName,
+      'assets/icon/film_reel.png',
+    );
   });
 
-  testWidgets('should_map_four_tabs_to_home_theater_create_and_me', (
+  testWidgets('should_map_four_tabs_to_home_recommend_following_and_me', (
     tester,
   ) async {
     await _pumpApp(tester);
 
     expect(find.byKey(const Key('tab-home')), findsOneWidget);
-    expect(find.byKey(const Key('tab-theater')), findsOneWidget);
-    expect(find.byKey(const Key('tab-create')), findsOneWidget);
+    expect(find.byKey(const Key('tab-recommend')), findsOneWidget);
+    expect(find.byKey(const Key('tab-follow')), findsOneWidget);
     expect(find.byKey(const Key('tab-mine')), findsOneWidget);
-    expect(find.byKey(const Key('home-feed-title')), findsOneWidget);
+    expect(find.byKey(const Key('tab-create')), findsNothing);
+    expect(find.byKey(const Key('home-grid')), findsOneWidget);
 
-    await tester.tap(find.byKey(const Key('tab-theater')));
+    await tester.tap(find.byKey(const Key('tab-recommend')));
     await tester.pumpAndSettle();
-    expect(find.byKey(const Key('home-all-dramas-grid')), findsOneWidget);
+    expect(find.byKey(const Key('recommend-page')), findsOneWidget);
+    _expectNoFloatingOverlays();
 
-    await tester.tap(find.byKey(const Key('tab-create')));
+    await tester.tap(find.byKey(const Key('tab-follow')));
     await tester.pumpAndSettle();
-    expect(find.byKey(const Key('create-page')), findsOneWidget);
+    final favorites = find.byType(FollowingPage);
+    expect(favorites, findsOneWidget);
+    expect(find.byKey(const Key('following-page')), findsOneWidget);
+    expect(find.byType(AppBottomNav), findsOneWidget);
+    expect(
+      find.descendant(of: favorites, matching: find.byType(Scaffold)),
+      findsNothing,
+    );
+    expect(Navigator.canPop(tester.element(favorites)), isFalse);
+    _expectNoFloatingOverlays();
+    expect(
+      find.descendant(
+        of: find.byKey(const Key('tab-follow')),
+        matching: find.byIcon(Icons.bookmark_rounded),
+      ),
+      findsOneWidget,
+    );
 
     await tester.tap(find.byKey(const Key('tab-mine')));
     await tester.pumpAndSettle();
     expect(find.text('Viewer'), findsOneWidget);
     expect(find.byKey(const Key('mine-menu')), findsOneWidget);
-    expect(find.byKey(const Key('mine-watchlist')), findsOneWidget);
+    expect(find.byKey(const Key('mine-wallet')), findsOneWidget);
+    expect(find.byKey(const Key('mine-edit')), findsOneWidget);
     expect(find.byKey(const Key('mine-library-tab-0')), findsNothing);
+    _expectNoFloatingOverlays();
+
+    await tester.tap(find.byKey(const Key('tab-follow')));
+    await tester.pumpAndSettle();
+    expect(favorites, findsOneWidget);
+    expect(find.byType(AppBottomNav), findsOneWidget);
+    expect(Navigator.canPop(tester.element(favorites)), isFalse);
 
     await tester.tap(find.byKey(const Key('tab-home')));
     await tester.pumpAndSettle();
-    expect(find.byKey(const Key('home-feed-title')), findsOneWidget);
+    expect(find.byKey(const Key('home-grid')), findsOneWidget);
   });
 
   testWidgets('should_not_haptic_when_ordinary_list_item_is_opened', (
@@ -212,6 +403,7 @@ Future<void> _pumpApp(WidgetTester tester, [FakeHaptics? haptics]) async {
       playbackRepository: FakePlaybackRepository(),
       commentRepository: FakeCommentRepository(),
       interactionRepository: FakeInteractionRepository(),
+      commerceRepository: const _WalletCommerceRepository(),
       haptics: haptics ?? FakeHaptics(),
     ),
   );
@@ -219,3 +411,34 @@ Future<void> _pumpApp(WidgetTester tester, [FakeHaptics? haptics]) async {
   await tester.tap(find.byKey(const Key('tab-home')));
   await tester.pumpAndSettle();
 }
+
+class _WalletCommerceRepository implements CommerceRepository {
+  const _WalletCommerceRepository();
+
+  @override
+  Future<WalletSnapshot> fetchWallet() async {
+    return const WalletSnapshot(
+      wallet: CoinWallet(
+        coinBalance: 320,
+        totalRechargedCoin: 500,
+        totalConsumedCoin: 180,
+        totalRefundedCoin: 0,
+      ),
+    );
+  }
+
+  @override
+  Future<UnlockResult> unlock(String episodeId) async {
+    return const UnlockResult(
+      unlocked: true,
+      accessType: 'UNLOCKED',
+      coinCost: 0,
+      coinBalance: 320,
+    );
+  }
+}
+
+void _expectNoFloatingOverlays() {
+  expect(find.byKey(const Key('mine-mini-player')), findsNothing);
+  expect(find.byType(FloatingActionButton), findsNothing);
+}
diff --git a/test/home/home_preview_layout_test.dart b/test/home/home_preview_layout_test.dart
index 4064f01..901e7bf 100644
--- a/test/home/home_preview_layout_test.dart
+++ b/test/home/home_preview_layout_test.dart
@@ -1,23 +1,30 @@
 // Author: fruit.com.cn
 
 import 'dart:async';
+import 'dart:typed_data';
 
+import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:shared_preferences_platform_interface/in_memory_shared_preferences_async.dart';
 import 'package:shared_preferences_platform_interface/shared_preferences_async_platform_interface.dart';
 
 import 'package:fruitshorts/app.dart';
+import 'package:fruitshorts/core/data/models/content_category.dart';
 import 'package:fruitshorts/core/data/models/drama.dart';
 import 'package:fruitshorts/core/data/models/home_feed.dart';
 import 'package:fruitshorts/core/data/repositories/favorite_repository.dart';
 import 'package:fruitshorts/core/data/repositories/playback_repository.dart';
 import 'package:fruitshorts/core/data/repositories/watch_history_repository.dart';
+import 'package:fruitshorts/core/data/services/playback_thumbnail_service.dart';
+import 'package:fruitshorts/core/theme/app_colors.dart';
+import 'package:fruitshorts/core/theme/app_dimens.dart';
 import 'package:fruitshorts/core/theme/app_theme.dart';
 import 'package:fruitshorts/l10n/app_localizations.dart';
 import 'package:fruitshorts/pages/home/home_feed_channel.dart';
 import 'package:fruitshorts/pages/player/widgets/home_feed_header.dart';
 import 'package:fruitshorts/pages/player/widgets/home_feed_overlay.dart';
+import 'package:fruitshorts/pages/player/player_view.dart';
 import 'package:video_player/video_player.dart';
 
 import '../support/fake_catalog.dart';
@@ -28,7 +35,9 @@ import '../support/fake_notice_repository.dart';
 import '../support/widget_player.dart';
 
 void main() {
-  testWidgets('should_render_immersive_feed_on_home', (tester) async {
+  testWidgets('should_render_three_column_explorer_grid_on_home', (
+    tester,
+  ) async {
     SharedPreferencesAsyncPlatform.instance =
         InMemorySharedPreferencesAsync.empty();
     tester.view.physicalSize = const Size(390, 844);
@@ -46,6 +55,105 @@ void main() {
         ),
       ],
     );
+    await tester.pumpWidget(
+      LumaDramaApp(
+        playerFactory: createWidgetPlayer,
+        catalogRepository: catalog,
+        categoryRepository: FakeCategoryRepository(
+          catalog: catalog,
+          categories: const [
+            ContentCategory(id: 'costume', name: '古装'),
+            ContentCategory(id: 'community', name: '社群'),
+          ],
+        ),
+        watchHistoryRepository: InMemoryWatchHistoryRepository(),
+        favoriteRepository: InMemoryFavoriteRepository(cards: catalog.dramas),
+        playbackRepository: FakePlaybackRepository(),
+        commentRepository: FakeCommentRepository(),
+        interactionRepository: FakeInteractionRepository(),
+        noticeRepository: FakeNoticeRepository(),
+        haptics: FakeHaptics(),
+      ),
+    );
+    await tester.pumpAndSettle();
+
+    expect(find.byKey(const Key('home-grid')), findsOneWidget);
+    expect(find.byKey(const Key('home-grid-cards')), findsOneWidget);
+    final grid = tester.widget<SliverGrid>(
+      find.byKey(const Key('home-grid-cards')),
+    );
+    final delegate =
+        grid.gridDelegate as SliverGridDelegateWithFixedCrossAxisCount;
+    expect(delegate.crossAxisCount, 3);
+    expect(delegate.crossAxisSpacing, AppDimens.homeGridGap);
+    expect(delegate.mainAxisSpacing, AppDimens.homeGridRowGap);
+    expect(find.byKey(const Key('home-section-featured')), findsOneWidget);
+    expect(find.byKey(const Key('home-section-new')), findsOneWidget);
+    expect(find.byKey(const Key('home-section-categories')), findsOneWidget);
+    expect(find.byKey(const Key('home-section-ranking')), findsOneWidget);
+    expect(find.byKey(const Key('home-section-category-古装')), findsOneWidget);
+    expect(find.byKey(const Key('home-section-category-社群')), findsOneWidget);
+    expect(find.byKey(const Key('home-secondary-tags')), findsNothing);
+    expect(find.byKey(const Key('home-grid-filter')), findsNothing);
+    final searchBox = find.descendant(
+      of: find.byKey(const Key('home-search-entry')),
+      matching: find.byType(Container),
+    );
+    expect(tester.getSize(searchBox).height, AppDimens.searchHeight);
+    expect(
+      (tester.widget<Container>(searchBox).decoration! as BoxDecoration)
+          .borderRadius,
+      BorderRadius.circular(AppDimens.searchRadius),
+    );
+    final placeholder = tester.widget<Text>(
+      find.text('Search dramas, actors, genres...'),
+    );
+    expect(placeholder.style?.fontSize, AppDimens.searchPlaceholderFont);
+    expect(placeholder.style?.color, AppColors.textSecondary);
+    final selectedPrimary = tester.widget<AnimatedDefaultTextStyle>(
+      find.byKey(const Key('home-primary-label-featured')),
+    );
+    final unselectedPrimary = tester.widget<AnimatedDefaultTextStyle>(
+      find.byKey(const Key('home-primary-label-newReleases')),
+    );
+    expect(
+      selectedPrimary.style.fontSize,
+      AppDimens.homePrimaryTabSelectedFont,
+    );
+    expect(selectedPrimary.style.fontWeight, FontWeight.w700);
+    expect(selectedPrimary.style.color, AppColors.navSelected);
+    expect(selectedPrimary.duration, AppDimens.homePrimaryTabAnimationDuration);
+    expect(unselectedPrimary.style.fontSize, AppDimens.homePrimaryTabFont);
+    expect(unselectedPrimary.style.fontWeight, FontWeight.w400);
+    expect(unselectedPrimary.style.color, AppColors.textTabInactive);
+    expect(
+      find.descendant(
+        of: find.byKey(const Key('home-section-featured')),
+        matching: find.byType(Container),
+      ),
+      findsNothing,
+    );
+    final primaryStart = tester.getTopLeft(find.text('Featured'));
+    final pageStart = tester.getTopLeft(searchBox);
+    expect(primaryStart.dx, pageStart.dx);
+    final primaryGap =
+        tester.getTopLeft(find.text('New')).dx -
+        tester.getBottomRight(find.text('Featured')).dx;
+    expect(primaryGap, closeTo(AppDimens.homePrimaryCategoryGap, 0.1));
+    expect(find.byType(PageView), findsNothing);
+    expect(tester.takeException(), isNull);
+  });
+
+  testWidgets('should_show_immersive_player_and_open_playlist_in_recommend', (
+    tester,
+  ) async {
+    SharedPreferencesAsyncPlatform.instance =
+        InMemorySharedPreferencesAsync.empty();
+    tester.view.physicalSize = const Size(390, 844);
+    tester.view.devicePixelRatio = 1;
+    addTearDown(tester.view.resetPhysicalSize);
+    addTearDown(tester.view.resetDevicePixelRatio);
+    final catalog = FakeCatalogRepository();
     await tester.pumpWidget(
       LumaDramaApp(
         playerFactory: createWidgetPlayer,
@@ -61,14 +169,28 @@ void main() {
       ),
     );
     await tester.pumpAndSettle();
-    await tester.tap(find.byKey(const Key('tab-home')));
+    await tester.tap(find.byKey(const Key('tab-recommend')));
     await tester.pumpAndSettle();
 
-    expect(find.byKey(const Key('home-feed-title')), findsOneWidget);
-    expect(find.byKey(const Key('home-feed-full-series')), findsOneWidget);
-    expect(find.byType(PageView), findsOneWidget);
-    expect(find.byKey(const Key('home-browse-page')), findsNothing);
-    expect(tester.takeException(), isNull);
+    expect(find.byKey(const Key('home-grid')), findsNothing);
+    expect(find.byKey(const Key('recommend-page')), findsOneWidget);
+    expect(find.byKey(const Key('recommend-feed-player')), findsOneWidget);
+    expect(find.byType(PlayerPage), findsOneWidget);
+    expect(tester.widget<PlayerPage>(find.byType(PlayerPage)).homeMode, isTrue);
+    expect(find.byKey(const Key('recommend-section-hits')), findsNothing);
+
+    await tester.tap(find.byKey(const Key('recommend-tab-playlist')));
+    await tester.pumpAndSettle();
+    expect(find.byKey(const Key('recommend-section-hits')), findsOneWidget);
+
+    await tester.tap(
+      find.byKey(const Key('recommend-card-hits-the-signal-demo')),
+    );
+    await tester.pumpAndSettle();
+    expect(
+      tester.widget<PlayerPage>(find.byType(PlayerPage).last).homeMode,
+      isFalse,
+    );
   });
 
   testWidgets('should_render_new_feed_structure_with_formatted_counts', (
@@ -77,7 +199,10 @@ void main() {
     const drama = Drama(
       id: 'feed-drama',
       title: 'Feed Drama',
-      synopsis: 'synopsis',
+      synopsis:
+          'A long synopsis follows the heroine through a dangerous city, '
+          'a hidden identity, and a final choice that changes everyone around '
+          'her forever.',
       posterUrl: '',
       genre: 'Romance',
       category: 'Urban',
@@ -88,6 +213,7 @@ void main() {
       favoriteCount: 32000,
       commentCount: 12,
     );
+    var episodesOpened = 0;
     await tester.pumpWidget(
       MaterialApp(
         theme: AppTheme.light(),
@@ -102,10 +228,11 @@ void main() {
               episode: const Episode(
                 id: 'feed-episode',
                 number: 2,
-                title: 'Ignored Episode Title',
+                title: 'Episode 2',
                 isFree: true,
               ),
               controller: null,
+              locked: false,
               liked: true,
               saved: false,
               visible: true,
@@ -122,6 +249,7 @@ void main() {
               onShare: () {},
               onDetail: () {},
               onOpenFullPlayer: () {},
+              onEpisodes: () => episodesOpened++,
               onMore: () {},
             ),
           ),
@@ -130,15 +258,66 @@ void main() {
     );
     await tester.pumpAndSettle();
 
+    final seriesTitle = tester.widget<Text>(
+      find.byKey(const Key('home-feed-series-title')),
+    );
+    expect(seriesTitle.data, 'Feed Drama');
+    expect(find.text('Episode 2'), findsNothing);
+    expect(seriesTitle.style?.fontSize, 19);
+    expect(seriesTitle.style?.fontWeight, FontWeight.w600);
+    expect(seriesTitle.style?.color, AppColors.textPrimary);
+    final seriesChevron = tester.widget<Icon>(
+      find.descendant(
+        of: find.byKey(const Key('home-feed-series-name')),
+        matching: find.byIcon(Icons.chevron_right_rounded),
+      ),
+    );
+    expect(seriesChevron.size, 20);
+    expect(seriesChevron.color, AppColors.textPrimary);
     expect(
-      tester.widget<Text>(find.byKey(const Key('home-feed-title'))).data,
-      'Feed Drama',
+      tester.getTopLeft(find.byIcon(Icons.chevron_right_rounded)).dx -
+          tester
+              .getTopRight(find.byKey(const Key('home-feed-series-title')))
+              .dx,
+      4,
     );
     expect(find.byKey(const Key('home-feed-info-card')), findsNothing);
     expect(find.byKey(const Key('home-feed-full-series')), findsOneWidget);
     expect(find.byKey(const Key('home-feed-tags')), findsOneWidget);
-    expect(find.text('Episode 2'), findsOneWidget);
-    expect(find.textContaining('41.9万'), findsOneWidget);
+    expect(find.byKey(const Key('home-feed-synopsis-more')), findsOneWidget);
+    await tester.tap(find.byKey(const Key('home-feed-synopsis-more')));
+    await tester.pump();
+    expect(
+      tester.widget<Text>(find.byKey(const Key('home-feed-synopsis'))).maxLines,
+      isNull,
+    );
+    expect(
+      tester
+          .widget<Text>(find.byKey(const Key('home-feed-episode-progress')))
+          .data,
+      'Episode 2 / 8 total',
+    );
+    expect(find.byKey(const Key('home-feed-meta-pills')), findsNothing);
+    expect(find.byKey(const Key('home-feed-ranking-pill')), findsNothing);
+    expect(find.byKey(const Key('home-feed-view-pill')), findsNothing);
+    expect(find.text('Romance Urban'), findsOneWidget);
+    final genreText = tester.widget<Text>(find.text('Romance Urban'));
+    expect(genreText.style?.fontSize, 13);
+    expect(genreText.style?.color, AppColors.overlayLabel);
+    final episodeProgress = tester.widget<Text>(
+      find.byKey(const Key('home-feed-episode-progress')),
+    );
+    expect(episodeProgress.maxLines, 1);
+    expect(episodeProgress.softWrap, isFalse);
+    expect(episodeProgress.style?.fontSize, 13);
+    expect(episodeProgress.style?.color, AppColors.overlayLabel);
+    expect(
+      tester
+              .getTopLeft(find.byKey(const Key('home-feed-episode-progress')))
+              .dx -
+          tester.getTopRight(find.text('Romance Urban')).dx,
+      8,
+    );
     expect(
       tester.widget<Text>(find.byKey(const Key('rail-like-count'))).data,
       '1006',
@@ -148,44 +327,186 @@ void main() {
       '3.2万',
     );
     expect(
-      tester.widget<Text>(find.byKey(const Key('rail-comments-count'))).data,
-      '12',
+      find.descendant(
+        of: find.byKey(const Key('rail-like')),
+        matching: find.byIcon(Icons.favorite_rounded),
+      ),
+      findsOneWidget,
     );
-    String railAsset(Key key) {
-      final image = tester.widget<Image>(
-        find.descendant(of: find.byKey(key), matching: find.byType(Image)),
-      );
-      return (image.image as AssetImage).assetName;
-    }
+    expect(
+      find.descendant(
+        of: find.byKey(const Key('rail-save')),
+        matching: find.byIcon(Icons.bookmark_border_rounded),
+      ),
+      findsOneWidget,
+    );
+    expect(find.byKey(const Key('rail-episodes')), findsOneWidget);
+    expect(
+      find.descendant(
+        of: find.byKey(const Key('rail-episodes')),
+        matching: find.byIcon(Icons.layers_rounded),
+      ),
+      findsOneWidget,
+    );
+    expect(find.byKey(const Key('rail-comments')), findsNothing);
+    expect(find.byKey(const Key('rail-share')), findsNothing);
+    expect(find.text('Comments'), findsNothing);
+    expect(
+      tester.getRect(find.byKey(const Key('home-feed-action-rail'))).right,
+      closeTo(
+        tester.getRect(find.byKey(const Key('home-feed-gesture'))).right - 8,
+        0.1,
+      ),
+    );
+    expect(find.byKey(const Key('progress-loading')), findsNothing);
+    expect(
+      find.byKey(const Key('home-feed-progress-inactive')),
+      findsOneWidget,
+    );
+    expect(find.byKey(const Key('home-feed-progress-thumb')), findsNothing);
+    await tester.tap(find.byKey(const Key('rail-episodes')));
+    expect(episodesOpened, 1);
+  });
 
-    expect(railAsset(const Key('rail-save')), 'assets/icon/rail/rail_save.png');
-    expect(
-      railAsset(const Key('rail-comments')),
-      'assets/icon/rail/rail_comment.png',
+  testWidgets('should_show_static_track_without_seek_when_feed_is_locked', (
+    tester,
+  ) async {
+    var scrubStarts = 0;
+    var seeks = 0;
+    await tester.pumpWidget(
+      MaterialApp(
+        theme: AppTheme.light(),
+        locale: const Locale('en'),
+        supportedLocales: AppLocalizations.supportedLocales,
+        localizationsDelegates: AppLocalizations.localizationsDelegates,
+        home: Builder(
+          builder: (context) => Scaffold(
+            body: HomeFeedOverlay(
+              l10n: AppLocalizations.of(context)!,
+              drama: const Drama(
+                id: 'locked-feed',
+                title: 'Locked Feed',
+                synopsis: 'synopsis',
+                posterUrl: '',
+              ),
+              episode: const Episode(
+                id: 'locked-feed-1',
+                number: 1,
+                title: 'Locked',
+                isFree: false,
+                locked: true,
+              ),
+              controller: null,
+              locked: true,
+              liked: false,
+              saved: false,
+              visible: true,
+              boosting: false,
+              onTogglePlay: () {},
+              onBoostStart: () {},
+              onBoostEnd: () {},
+              onLike: () {},
+              onSave: () {},
+              onComments: () {},
+              onShare: () {},
+              onDetail: () {},
+              onOpenFullPlayer: () {},
+              onMore: () {},
+              onScrubStart: () => scrubStarts++,
+              onSeek: (_) => seeks++,
+            ),
+          ),
+        ),
+      ),
     );
-    expect(railAsset(const Key('rail-like')), 'assets/icon/rail/rail_like.png');
+
+    expect(find.byKey(const Key('progress-loading')), findsNothing);
+    expect(find.byKey(const Key('progress-loading-highlight')), findsNothing);
     expect(
-      railAsset(const Key('rail-share')),
-      'assets/icon/rail/rail_share.png',
+      find.byKey(const Key('home-feed-progress-inactive')),
+      findsOneWidget,
     );
     expect(
       tester
-          .widget<Image>(
-            find.descendant(
-              of: find.byKey(const Key('rail-share')),
-              matching: find.byType(Image),
+          .getSize(find.byKey(const Key('home-feed-progress-inactive')))
+          .height,
+      2,
+    );
+
+    await tester.drag(
+      find.byKey(const Key('home-feed-progress')),
+      const Offset(120, 0),
+    );
+    await tester.pumpAndSettle();
+    expect(scrubStarts, 0);
+    expect(seeks, 0);
+  });
+
+  testWidgets('should_show_static_track_when_feed_video_is_uninitialized', (
+    tester,
+  ) async {
+    final controller = ValueNotifier<VideoPlayerValue>(
+      const VideoPlayerValue.uninitialized(),
+    );
+    addTearDown(controller.dispose);
+    await tester.pumpWidget(
+      MaterialApp(
+        theme: AppTheme.light(),
+        locale: const Locale('en'),
+        supportedLocales: AppLocalizations.supportedLocales,
+        localizationsDelegates: AppLocalizations.localizationsDelegates,
+        home: Builder(
+          builder: (context) => Scaffold(
+            body: HomeFeedOverlay(
+              l10n: AppLocalizations.of(context)!,
+              drama: const Drama(
+                id: 'loading-feed',
+                title: 'Loading Feed',
+                synopsis: 'synopsis',
+                posterUrl: '',
+              ),
+              episode: const Episode(
+                id: 'loading-feed-1',
+                number: 1,
+                title: 'Loading',
+                isFree: true,
+              ),
+              controller: controller,
+              locked: false,
+              liked: false,
+              saved: false,
+              visible: true,
+              boosting: false,
+              onTogglePlay: () {},
+              onBoostStart: () {},
+              onBoostEnd: () {},
+              onLike: () {},
+              onSave: () {},
+              onComments: () {},
+              onShare: () {},
+              onDetail: () {},
+              onOpenFullPlayer: () {},
+              onMore: () {},
+              onSeek: (_) {},
             ),
-          )
-          .colorBlendMode,
-      BlendMode.srcIn,
+          ),
+        ),
+      ),
+    );
+
+    expect(find.byKey(const Key('progress-loading')), findsNothing);
+    expect(
+      find.byKey(const Key('home-feed-progress-inactive')),
+      findsOneWidget,
     );
-    expect(find.byKey(const Key('progress-loading')), findsOneWidget);
-    expect(find.byKey(const Key('home-feed-progress-thumb')), findsNothing);
   });
 
   testWidgets('should_seek_and_open_player_from_feed_actions', (tester) async {
     var opened = 0;
     Duration? seeked;
+    final scrubVisibility = <bool>[];
+    final thumbnailService = _nullThumbnailService();
+    addTearDown(thumbnailService.dispose);
     final controller = ValueNotifier<VideoPlayerValue>(
       VideoPlayerValue(
         duration: const Duration(seconds: 100),
@@ -219,6 +540,7 @@ void main() {
                 isFree: true,
               ),
               controller: controller,
+              locked: false,
               liked: false,
               saved: false,
               visible: true,
@@ -234,7 +556,9 @@ void main() {
               onOpenFullPlayer: () => opened++,
               onMore: () {},
               onScrubStart: () {},
+              onScrubVisibilityChanged: scrubVisibility.add,
               onSeek: (value) => seeked = value,
+              thumbnailService: thumbnailService,
             ),
           ),
         ),
@@ -244,14 +568,29 @@ void main() {
 
     final bar = tester.getRect(find.byKey(const Key('home-feed-full-series')));
     expect(bar.height, 44);
-    expect(
-      tester
-          .widget<Container>(find.byKey(const Key('home-feed-full-series-bg')))
-          .color,
-      const Color(0x4D000000),
+    final overlayRect = tester.getRect(
+      find.byKey(const Key('home-feed-gesture')),
     );
+    expect(bar.left, closeTo(overlayRect.left + 14, 0.1));
+    expect(bar.width, closeTo(overlayRect.width * 0.7, 1));
     expect(
-      tester.getRect(find.textContaining('Watch full series')).center.dy,
+      tester.getCenter(find.byKey(const Key('home-feed-progress-track'))).dy -
+          bar.bottom,
+      greaterThanOrEqualTo(20),
+    );
+    final buttonBackground =
+        tester
+                .widget<DecoratedBox>(
+                  find.byKey(const Key('home-feed-full-series-bg')),
+                )
+                .decoration
+            as BoxDecoration;
+    expect((buttonBackground.gradient! as LinearGradient).colors, [
+      AppColors.actionRed,
+      AppColors.blue,
+    ]);
+    expect(
+      tester.getRect(find.text('Watch all')).center.dy,
       closeTo(bar.center.dy, 2),
     );
     expect(
@@ -260,8 +599,18 @@ void main() {
     );
     expect(
       tester.getSize(find.byKey(const Key('home-feed-progress'))).height,
-      greaterThanOrEqualTo(24),
+      greaterThanOrEqualTo(32),
     );
+    expect(
+      tester
+          .widget<GestureDetector>(find.byKey(const Key('home-feed-progress')))
+          .dragStartBehavior,
+      DragStartBehavior.down,
+    );
+    final idleTrackCenter = tester
+        .getRect(find.byKey(const Key('home-feed-progress-track')))
+        .center
+        .dy;
     expect(
       tester
           .getRect(find.byKey(const Key('home-feed-progress-thumb')))
@@ -281,6 +630,74 @@ void main() {
     );
     await gesture.moveBy(const Offset(120, 0));
     await tester.pump();
+    expect(scrubVisibility.last, isTrue);
+    expect(find.byKey(const Key('home-feed-series-title')), findsOneWidget);
+    expect(find.byKey(const Key('rail-save')), findsOneWidget);
+    expect(
+      tester
+          .widget<AnimatedOpacity>(
+            find.byKey(const Key('home-feed-content-opacity')),
+          )
+          .opacity,
+      0,
+    );
+    expect(
+      tester
+          .widget<IgnorePointer>(
+            find.byKey(const Key('home-feed-content-ignore')),
+          )
+          .ignoring,
+      isTrue,
+    );
+    expect(find.byKey(const Key('scrub-preview-time-bubble')), findsOneWidget);
+    final bubbleRect = tester.getRect(
+      find.byKey(const Key('scrub-preview-time-bubble')),
+    );
+    expect(bubbleRect.left, greaterThanOrEqualTo(12));
+    expect(
+      bubbleRect.right,
+      lessThanOrEqualTo(
+        tester.getRect(find.byKey(const Key('home-feed-gesture'))).right - 12,
+      ),
+    );
+    expect(
+      tester
+              .getRect(find.byKey(const Key('home-feed-progress-track')))
+              .center
+              .dy -
+          bubbleRect.bottom,
+      closeTo(16, 0.1),
+    );
+    final bubbleContainer = tester.widget<Container>(
+      find.descendant(
+        of: find.byKey(const Key('scrub-preview-time-bubble')),
+        matching: find.byType(Container),
+      ),
+    );
+    expect(
+      (bubbleContainer.decoration! as BoxDecoration).color,
+      AppColors.timeBubbleScrim,
+    );
+    expect(
+      bubbleContainer.padding,
+      const EdgeInsets.symmetric(horizontal: 6, vertical: 3),
+    );
+    await gesture.moveBy(const Offset(-600, 0));
+    await tester.pump();
+    expect(
+      tester.getRect(find.byKey(const Key('scrub-preview-time-bubble'))).left,
+      closeTo(12, 0.1),
+    );
+    await gesture.moveBy(const Offset(1200, 0));
+    await tester.pump();
+    expect(
+      tester.getRect(find.byKey(const Key('scrub-preview-time-bubble'))).right,
+      closeTo(
+        tester.getRect(find.byKey(const Key('home-feed-gesture'))).right - 12,
+        0.1,
+      ),
+    );
+    await tester.pump(const Duration(milliseconds: 130));
     expect(
       tester.getSize(find.byKey(const Key('home-feed-progress-thumb'))),
       const Size(14, 14),
@@ -289,6 +706,13 @@ void main() {
       tester.getSize(find.byKey(const Key('home-feed-progress-track'))).height,
       6,
     );
+    expect(
+      tester
+          .getRect(find.byKey(const Key('home-feed-progress-track')))
+          .center
+          .dy,
+      closeTo(idleTrackCenter, 0.1),
+    );
     expect(
       tester
           .getRect(find.byKey(const Key('home-feed-progress-thumb')))
@@ -304,6 +728,16 @@ void main() {
     );
     await gesture.up();
     await tester.pumpAndSettle();
+    expect(scrubVisibility.last, isFalse);
+    expect(find.byKey(const Key('home-feed-series-title')), findsOneWidget);
+    expect(
+      tester
+          .widget<AnimatedOpacity>(
+            find.byKey(const Key('home-feed-content-opacity')),
+          )
+          .opacity,
+      1,
+    );
     expect(seeked, isNotNull);
     expect(seeked!.inSeconds, greaterThan(0));
     expect(
@@ -355,6 +789,7 @@ void main() {
                 isFree: true,
               ),
               controller: controller,
+              locked: false,
               liked: false,
               saved: false,
               visible: true,
@@ -469,6 +904,83 @@ void main() {
     expect(find.byIcon(Icons.refresh_rounded), findsOneWidget);
   });
 
+  testWidgets('should_show_scrub_preview_card_from_home_progress', (
+    tester,
+  ) async {
+    final controller = ValueNotifier<VideoPlayerValue>(
+      const VideoPlayerValue(
+        duration: Duration(seconds: 100),
+        position: Duration(seconds: 10),
+        isInitialized: true,
+      ),
+    );
+    final service = _nullThumbnailService();
+    addTearDown(controller.dispose);
+    addTearDown(service.dispose);
+    await tester.pumpWidget(
+      MaterialApp(
+        theme: AppTheme.light(),
+        locale: const Locale('en'),
+        supportedLocales: AppLocalizations.supportedLocales,
+        localizationsDelegates: AppLocalizations.localizationsDelegates,
+        home: Builder(
+          builder: (context) => Scaffold(
+            body: HomeFeedOverlay(
+              l10n: AppLocalizations.of(context)!,
+              drama: const Drama(
+                id: 'preview-drama',
+                title: 'Preview Drama',
+                synopsis: 'synopsis',
+                posterUrl: '',
+                totalEpisodes: 8,
+              ),
+              episode: const Episode(
+                id: 'preview-episode',
+                number: 1,
+                title: 'Episode 1',
+                isFree: true,
+              ),
+              controller: controller,
+              locked: false,
+              liked: false,
+              saved: false,
+              visible: true,
+              boosting: false,
+              thumbnailService: service,
+              onTogglePlay: () {},
+              onBoostStart: () {},
+              onBoostEnd: () {},
+              onLike: () {},
+              onSave: () {},
+              onComments: () {},
+              onShare: () {},
+              onDetail: () {},
+              onOpenFullPlayer: () {},
+              onMore: () {},
+              onScrubStart: () {},
+              onSeek: (_) {},
+            ),
+          ),
+        ),
+      ),
+    );
+    await tester.pumpAndSettle();
+
+    final gesture = await tester.startGesture(
+      tester.getCenter(find.byKey(const Key('home-feed-progress'))),
+    );
+    await gesture.moveBy(const Offset(60, 0));
+    await tester.pump();
+
+    expect(find.byKey(const Key('scrub-preview-card')), findsOneWidget);
+    expect(find.byKey(const Key('scrub-preview-poster')), findsOneWidget);
+    expect(find.textContaining('/ 01:40'), findsOneWidget);
+
+    await gesture.up();
+    await tester.pump();
+    expect(find.byKey(const Key('scrub-preview-card')), findsNothing);
+  });
+
   testWidgets('should_seek_from_series_bar_when_overlay_is_cleared', (
     tester,
   ) async {
@@ -505,6 +1017,7 @@ void main() {
                 isFree: true,
               ),
               controller: controller,
+              locked: false,
               liked: false,
               saved: false,
               visible: false,
@@ -542,3 +1055,20 @@ void main() {
     expect(seeked!.inSeconds, greaterThan(0));
   });
 }
+
+PlaybackThumbnailService _nullThumbnailService() {
+  return PlaybackThumbnailService(
+    frameLoader: _NullThumbnailLoader(),
+    sourceResolver: (_) =>
+        const PlaybackThumbnailSource(remoteUrl: 'https://example/video.mp4'),
+    prefetchDelay: const Duration(hours: 1),
+  );
+}
+
+class _NullThumbnailLoader implements PlaybackThumbnailFrameLoader {
+  @override
+  Future<ByteData?> load(PlaybackThumbnailFrameRequest request) async => null;
+
+  @override
+  void dispose() {}
+}
diff --git a/test/home/home_server_setting_test.dart b/test/home/home_server_setting_test.dart
index 3278287..d751e85 100644
--- a/test/home/home_server_setting_test.dart
+++ b/test/home/home_server_setting_test.dart
@@ -4,7 +4,7 @@ import 'package:shared_preferences_platform_interface/in_memory_shared_preferenc
 import 'package:shared_preferences_platform_interface/shared_preferences_async_platform_interface.dart';
 
 import 'package:fruitshorts/l10n/app_localizations.dart';
-import 'package:fruitshorts/pages/home/home_view.dart';
+import 'package:fruitshorts/pages/home/widgets/home_failure_view.dart';
 
 void main() {
   setUp(() {
diff --git a/test/home/home_startup_splash_test.dart b/test/home/home_startup_splash_test.dart
index d5f4666..1119423 100644
--- a/test/home/home_startup_splash_test.dart
+++ b/test/home/home_startup_splash_test.dart
@@ -2,13 +2,8 @@
 
 import 'dart:async';
 
-import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_test/flutter_test.dart';
-import 'package:provider/provider.dart';
-import 'package:shared_preferences_platform_interface/in_memory_shared_preferences_async.dart';
-import 'package:shared_preferences_platform_interface/shared_preferences_async_platform_interface.dart';
-
 import 'package:fruitshorts/app.dart';
 import 'package:fruitshorts/core/config/app_config.dart';
 import 'package:fruitshorts/core/data/models/drama.dart';
@@ -18,10 +13,8 @@ import 'package:fruitshorts/core/data/repositories/catalog_repository.dart';
 import 'package:fruitshorts/core/data/repositories/favorite_repository.dart';
 import 'package:fruitshorts/core/data/repositories/playback_repository.dart';
 import 'package:fruitshorts/core/data/repositories/watch_history_repository.dart';
-import 'package:fruitshorts/core/data/services/catalog_controller.dart';
-import 'package:fruitshorts/core/theme/app_theme.dart';
-import 'package:fruitshorts/l10n/app_localizations.dart';
-import 'package:fruitshorts/pages/home/home_view.dart';
+import 'package:shared_preferences_platform_interface/in_memory_shared_preferences_async.dart';
+import 'package:shared_preferences_platform_interface/shared_preferences_async_platform_interface.dart';
 
 import '../support/fake_catalog.dart';
 import '../support/fake_category.dart';
@@ -39,108 +32,68 @@ void main() {
   });
 
   tearDown(() {
-    debugDefaultTargetPlatformOverride = null;
     AppConfig.clearRuntimeBaseUrl();
     AppConfig.ready = Future<void>.value();
   });
 
-  testWidgets('should_show_platform_startup_image_before_catalog_settles', (
+  testWidgets('should_show_grid_skeleton_without_an_in_app_splash', (
     tester,
   ) async {
-    final controller = CatalogController(_EmptyCatalogRepository())
-      ..loading = true
-      ..settled = false;
-    addTearDown(controller.dispose);
-
-    for (final platform in [TargetPlatform.android, TargetPlatform.iOS]) {
-      debugDefaultTargetPlatformOverride = platform;
-      await _pumpHomePage(tester, controller);
-
-      final image = tester.widget<Image>(
-        find.byKey(const Key('startup-splash')),
-      );
-      final expectedAsset = platform == TargetPlatform.android
-          ? 'assets/icon/splash_logo_android12.png'
-          : 'assets/icon/splash_logo.png';
-      final expectedSize = platform == TargetPlatform.android ? 288.0 : 384.0;
-
-      expect(
-        image.image,
-        isA<AssetImage>().having(
-          (asset) => asset.assetName,
-          'assetName',
-          expectedAsset,
-        ),
-      );
-      expect(
-        tester.getSize(find.byKey(const Key('startup-splash'))),
-        Size.square(expectedSize),
-      );
-      expect(find.byType(CircularProgressIndicator), findsNothing);
-    }
-    debugDefaultTargetPlatformOverride = null;
-  });
-
-  testWidgets('should_show_spinner_when_retry_loads_after_catalog_settled', (
-    tester,
-  ) async {
-    final controller = CatalogController(_EmptyCatalogRepository())
-      ..loading = true
-      ..settled = true;
-    addTearDown(controller.dispose);
-
-    await _pumpHomePage(tester, controller);
-
-    expect(find.byType(CircularProgressIndicator), findsOneWidget);
-    expect(find.byKey(const Key('startup-splash')), findsNothing);
-  });
-
-  testWidgets('should_enter_home_and_remove_startup_image_when_data_is_ready', (
-    tester,
-  ) async {
-    AppConfig.ready = Future<void>.value();
-    final catalog = _PendingCatalogRepository();
-    await tester.pumpWidget(
-      LumaDramaApp(
-        playerFactory: createWidgetPlayer,
-        catalogRepository: catalog,
-        categoryRepository: FakeCategoryRepository(catalog: catalog),
-        watchHistoryRepository: InMemoryWatchHistoryRepository(),
-        favoriteRepository: InMemoryFavoriteRepository(cards: catalog.dramas),
-        playbackRepository: FakePlaybackRepository(),
-        commentRepository: FakeCommentRepository(),
-        interactionRepository: FakeInteractionRepository(),
-        noticeRepository: FakeNoticeRepository(),
-        haptics: FakeHaptics(),
-      ),
-    );
+    final repository = _PendingCatalogRepository();
+    await _pumpApp(tester, repository);
     await tester.pump();
 
-    expect(find.byKey(const Key('startup-splash')), findsOneWidget);
+    expect(find.byKey(const Key('home-tabs')), findsOneWidget);
+    expect(find.byKey(const Key('home-grid-header')), findsOneWidget);
+    expect(find.byKey(const Key('home-grid-skeleton')), findsOneWidget);
+    expect(find.byKey(const Key('home-tabs-bar')), findsOneWidget);
+    expect(find.byKey(const Key('startup-splash')), findsNothing);
     expect(find.byType(CircularProgressIndicator), findsNothing);
 
-    catalog.complete(_feed);
+    repository.complete(_feed);
     await tester.pumpAndSettle();
 
     expect(find.byKey(const Key('startup-splash')), findsNothing);
-    expect(find.byKey(const Key('home-feed-title')), findsOneWidget);
+    expect(find.byKey(const Key('home-grid-skeleton')), findsNothing);
+    expect(find.byKey(const Key('home-grid')), findsOneWidget);
+  });
+
+  testWidgets('should_show_catalog_error_inside_grid_without_full_overlay', (
+    tester,
+  ) async {
+    await _pumpApp(tester, _FailingCatalogRepository());
+    await tester.pumpAndSettle();
+
+    expect(find.byKey(const Key('home-grid-header')), findsOneWidget);
+    expect(find.byKey(const Key('home-grid-error')), findsOneWidget);
+    expect(find.byKey(const Key('home-tabs-bar')), findsOneWidget);
+    expect(find.byType(CircularProgressIndicator), findsNothing);
+  });
+
+  testWidgets('should_show_catalog_empty_state_inside_grid', (tester) async {
+    await _pumpApp(tester, _EmptyCatalogRepository());
+    await tester.pumpAndSettle();
+
+    expect(find.byKey(const Key('home-grid-header')), findsOneWidget);
+    expect(find.byKey(const Key('home-grid-empty')), findsOneWidget);
+    expect(find.byKey(const Key('home-tabs-bar')), findsOneWidget);
   });
 }
 
-Future<void> _pumpHomePage(
-  WidgetTester tester,
-  CatalogController controller,
-) async {
+Future<void> _pumpApp(WidgetTester tester, CatalogRepository repository) async {
+  final catalog = FakeCatalogRepository();
   await tester.pumpWidget(
-    ChangeNotifierProvider<CatalogController>.value(
-      value: controller,
-      child: MaterialApp(
-        theme: AppTheme.light(),
-        locale: const Locale('en'),
-        supportedLocales: AppLocalizations.supportedLocales,
-        localizationsDelegates: AppLocalizations.localizationsDelegates,
-        home: const HomePage(),
-      ),
+    LumaDramaApp(
+      playerFactory: createWidgetPlayer,
+      catalogRepository: repository,
+      categoryRepository: FakeCategoryRepository(catalog: repository),
+      watchHistoryRepository: InMemoryWatchHistoryRepository(),
+      favoriteRepository: InMemoryFavoriteRepository(cards: catalog.dramas),
+      playbackRepository: FakePlaybackRepository(),
+      commentRepository: FakeCommentRepository(),
+      interactionRepository: FakeInteractionRepository(),
+      noticeRepository: FakeNoticeRepository(),
+      haptics: FakeHaptics(),
     ),
   );
   await tester.pump();
@@ -174,8 +127,6 @@ class _EmptyCatalogRepository implements CatalogRepository {
 class _PendingCatalogRepository implements CatalogRepository {
   final Completer<HomeFeed> _home = Completer<HomeFeed>();
 
-  List<Drama> get dramas => _feed.dramas;
-
   void complete(HomeFeed feed) {
     if (!_home.isCompleted) _home.complete(feed);
   }
@@ -197,3 +148,22 @@ class _PendingCatalogRepository implements CatalogRepository {
   @override
   Future<Drama> fetchDrama(String dramaId) async => _feed.dramas.first;
 }
+
+class _FailingCatalogRepository implements CatalogRepository {
+  @override
+  Future<HomeFeed> fetchHomeFeed() async => throw StateError('offline');
+
+  @override
+  Future<HomeFeed> fetchDiscoverFeed() async => throw StateError('offline');
+
+  @override
+  Future<FeedPage> fetchFeed({
+    List<String> types = const [],
+    String? categoryId,
+    String? cursor,
+    int size = 10,
+  }) async => throw StateError('offline');
+
+  @override
+  Future<Drama> fetchDrama(String dramaId) async => throw StateError('offline');
+}
diff --git a/test/home/k28_a_navigation_test.dart b/test/home/k28_a_navigation_test.dart
index 0998a3e..ae8b830 100644
--- a/test/home/k28_a_navigation_test.dart
+++ b/test/home/k28_a_navigation_test.dart
@@ -1,16 +1,13 @@
 // Author: fruit.com.cn
 
-import 'dart:async';
-
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:fruitshorts/app.dart';
-import 'package:fruitshorts/core/data/models/feed_page.dart';
 import 'package:fruitshorts/core/data/repositories/favorite_repository.dart';
 import 'package:fruitshorts/core/data/repositories/playback_repository.dart';
 import 'package:fruitshorts/core/data/repositories/watch_history_repository.dart';
-import 'package:fruitshorts/pages/home/home_feed_channel.dart';
+import 'package:fruitshorts/core/widgets/app_bottom_nav.dart';
 import 'package:fruitshorts/pages/player/player_view.dart';
 import 'package:shared_preferences_platform_interface/in_memory_shared_preferences_async.dart';
 import 'package:shared_preferences_platform_interface/shared_preferences_async_platform_interface.dart';
@@ -27,7 +24,7 @@ void main() {
         InMemorySharedPreferencesAsync.empty();
   });
 
-  testWidgets('should_render_four_tabs_and_open_create_placeholder', (
+  testWidgets('should_render_four_tabs_and_open_following_page', (
     tester,
   ) async {
     await _pumpApp(tester);
@@ -35,68 +32,31 @@ void main() {
     for (final key in _tabKeys) {
       expect(find.byKey(key), findsOneWidget);
     }
-
-    await tester.tap(find.byKey(const Key('tab-create')));
+    expect(find.byKey(const Key('tab-create')), findsNothing);
+    await tester.tap(find.byKey(const Key('tab-follow')));
     await tester.pumpAndSettle();
 
-    expect(find.byKey(const Key('create-page')), findsOneWidget);
-    expect(find.text('Create'), findsWidgets);
-    expect(find.text('Stories become short dramas'), findsOneWidget);
-    expect(find.byKey(const Key('create-ai')), findsOneWidget);
-    expect(find.byKey(const Key('create-upload')), findsOneWidget);
-    expect(tester.getSize(find.byKey(const Key('create-ai'))).height, 196);
-    expect(find.byKey(const Key('create-motto-primary')), findsOneWidget);
-    expect(find.byKey(const Key('create-motto-secondary')), findsOneWidget);
-    expect(
-      tester.getSize(find.byKey(const Key('create-motto-line'))),
-      const Size(96, 2),
-    );
-
-    await tester.tap(find.byKey(const Key('create-ai')));
-    await tester.pumpAndSettle();
-    expect(find.byKey(const Key('create-placeholder-page')), findsOneWidget);
-    expect(find.text('Coming soon'), findsOneWidget);
+    expect(find.byKey(const Key('following-page')), findsOneWidget);
+    expect(find.byType(AppBottomNav), findsOneWidget);
   });
 
-  testWidgets('should_start_home_on_immersive_feed', (tester) async {
+  testWidgets('should_start_home_on_explorer_grid', (tester) async {
     await _pumpApp(tester);
 
-    expect(find.byKey(const Key('home-feed-title')), findsOneWidget);
-    expect(find.byKey(const Key('home-feed-full-series')), findsOneWidget);
-    expect(find.byKey(const Key('home-feed-black-background')), findsOneWidget);
-    expect(find.byType(PageView), findsOneWidget);
-    expect(find.byKey(const Key('home-browse-page')), findsNothing);
-    expect(
-      tester.widget<Text>(find.byKey(const Key('rail-like-count'))).data,
-      '41.9万',
-    );
-    expect(
-      tester.widget<Text>(find.byKey(const Key('rail-save-count'))).data,
-      '1006',
-    );
-    expect(
-      tester.widget<Text>(find.byKey(const Key('rail-comments-count'))).data,
-      '3.2万',
-    );
-    expect(find.byKey(const Key('home-feed-refresh')), findsOneWidget);
-    expect(find.byKey(const Key('home-feed-danmaku')), findsNothing);
-    expect(find.byKey(const Key('home-feed-fullscreen')), findsNothing);
-    expect(
-      tester.widget<Scaffold>(find.byType(Scaffold).first).backgroundColor,
-      Colors.transparent,
-    );
+    expect(find.byKey(const Key('home-grid')), findsOneWidget);
+    expect(find.byKey(const Key('home-grid-cards')), findsOneWidget);
+    expect(find.byType(PageView), findsNothing);
     expect(find.byKey(const Key('home-page-gradient')), findsNothing);
     expect(_hasLightStatusBar(tester), isTrue);
-    expect(tester.widget<PlayerPage>(find.byType(PlayerPage)).homeMode, isTrue);
   });
 
-  testWidgets('should_keep_home_feed_size_when_keyboard_insets_change', (
+  testWidgets('should_keep_home_grid_when_keyboard_insets_change', (
     tester,
   ) async {
     addTearDown(tester.view.resetViewInsets);
     await _pumpApp(tester);
-    final feed = find.byKey(const Key('home-feed-black-background'));
-    final before = tester.getRect(feed);
+    final grid = find.byKey(const Key('home-grid'));
+    final before = tester.getRect(grid);
 
     tester.view.viewInsets = const FakeViewPadding(bottom: 300);
     await tester.pump();
@@ -107,378 +67,128 @@ void main() {
           .resizeToAvoidBottomInset,
       isFalse,
     );
-    expect(tester.getRect(feed), before);
+    expect(tester.getRect(grid), before);
   });
 
-  testWidgets('should_open_full_player_from_full_series_bar', (tester) async {
-    await _pumpApp(tester);
-
-    await tester.tap(find.byKey(const Key('home-feed-full-series')));
-    await tester.pumpAndSettle();
-
-    final player = tester.widget<PlayerPage>(find.byType(PlayerPage).last);
-    expect(player.homeMode, isFalse);
-  });
-
-  testWidgets('should_switch_to_anime_channel', (tester) async {
-    await _pumpApp(tester);
-
-    await tester.tap(find.byKey(const Key('home-feed-tab-anime')));
-    await tester.pumpAndSettle();
-
-    expect(find.text('Coming soon'), findsNothing);
-    expect(
-      tester.widget<Text>(find.text('Anime')).style?.fontWeight,
-      FontWeight.w800,
-    );
-    expect(find.byKey(const Key('home-feed-title')), findsOneWidget);
-  });
-
-  testWidgets('should_keep_player_when_first_anime_switch_is_loading', (
+  testWidgets('should_render_recommend_immersive_player_and_inner_top_nav', (
     tester,
   ) async {
-    final catalog = _PendingAnimeCatalog();
-    await _pumpApp(tester, catalog: catalog);
-    for (var attempt = 0; attempt < 5 && catalog.animeCalls == 0; attempt++) {
-      await tester.pump();
+    await _pumpApp(tester);
+    await tester.tap(find.byKey(const Key('tab-recommend')));
+    await tester.pumpAndSettle();
+
+    expect(find.byKey(const Key('recommend-page')), findsOneWidget);
+    expect(find.byKey(const Key('recommend-tab-recommend')), findsOneWidget);
+    expect(find.byKey(const Key('recommend-tab-playlist')), findsOneWidget);
+    expect(find.byKey(const Key('recommend-tab-all')), findsOneWidget);
+    expect(find.byKey(const Key('recommend-feed-player')), findsOneWidget);
+    _expectNoFloatingOverlays();
+
+    await tester.tap(find.byKey(const Key('recommend-tab-playlist')));
+    await tester.pumpAndSettle();
+    expect(find.byKey(const Key('recommend-section-hits')), findsOneWidget);
+    expect(find.byKey(const Key('recommend-section-new')), findsOneWidget);
+    expect(find.byKey(const Key('recommend-section-costume')), findsOneWidget);
+    _expectNoFloatingOverlays();
+  });
+
+  testWidgets('should_switch_playlist_and_all_dramas_in_recommend', (
+    tester,
+  ) async {
+    await _pumpApp(tester);
+    await tester.tap(find.byKey(const Key('tab-recommend')));
+    await tester.pumpAndSettle();
+
+    await tester.tap(find.byKey(const Key('recommend-tab-playlist')));
+    await tester.pumpAndSettle();
+    expect(find.byKey(const Key('recommend-section-hits')), findsOneWidget);
+    expect(find.byType(AppBottomNav), findsOneWidget);
+    _expectNoFloatingOverlays();
+
+    await tester.tap(find.byKey(const Key('recommend-tab-all')));
+    await tester.pumpAndSettle();
+    expect(find.byKey(const Key('all-dramas-grid')), findsOneWidget);
+    for (var row = 0; row < 4; row++) {
+      expect(find.byKey(Key('all-filter-row-$row')), findsOneWidget);
     }
-    expect(catalog.animeCalls, 1);
+    _expectNoFloatingOverlays();
+  });
 
-    await tester.tap(find.byKey(const Key('home-feed-tab-anime')));
-    await tester.pump();
-
-    expect(find.byType(PlayerPage), findsOneWidget);
-    expect(find.byKey(const Key('home-feed-channel-loading')), findsOneWidget);
-
-    catalog.anime.complete(FeedPage(dramas: [demoDramas[1]]));
+  testWidgets('should_open_search_from_home_and_recommend', (tester) async {
+    await _pumpApp(tester);
+    await tester.tap(find.byKey(const Key('home-search-entry')));
     await tester.pumpAndSettle();
-
-    expect(find.byKey(const Key('home-feed-channel-loading')), findsNothing);
+    expect(find.byKey(const Key('search-page')), findsOneWidget);
+    expect(find.byKey(const Key('search-back')), findsOneWidget);
+    expect(find.byKey(const Key('search-cancel')), findsOneWidget);
+    expect(find.byType(AppBottomNav), findsNothing);
     expect(
-      tester.widget<PlayerPage>(find.byType(PlayerPage)).feedChannel,
-      HomeFeedChannel.anime,
+      tester
+          .widget<TextField>(find.byKey(const Key('discover-search')))
+          .focusNode
+          ?.hasFocus,
+      isTrue,
     );
-  });
-
-  testWidgets('should_show_empty_state_when_anime_has_no_dramas', (
-    tester,
-  ) async {
-    await _pumpApp(tester, catalog: _EmptyAnimeCatalog());
-
-    await tester.tap(find.byKey(const Key('home-feed-tab-anime')));
+    await tester.tap(find.byKey(const Key('search-cancel')));
     await tester.pumpAndSettle();
 
-    expect(find.byType(PlayerPage), findsNothing);
-    expect(find.text('No stories available yet.'), findsOneWidget);
-  });
-
-  testWidgets('should_refresh_feed_without_blank_loading', (tester) async {
-    await _pumpApp(tester);
-
-    await tester.tap(find.byKey(const Key('home-feed-refresh')));
-    await tester.pump();
-
-    expect(find.byType(CircularProgressIndicator), findsNothing);
-    expect(find.byKey(const Key('home-feed-title')), findsOneWidget);
+    await tester.tap(find.byKey(const Key('tab-recommend')));
     await tester.pumpAndSettle();
-    expect(find.byKey(const Key('home-feed-title')), findsOneWidget);
-  });
-
-  testWidgets('should_keep_feed_rail_above_bottom_panels', (tester) async {
-    await _pumpApp(tester);
-    final railTop = tester.getCenter(find.byKey(const Key('rail-save'))).dy;
-    final railBottom = tester
-        .getRect(find.byKey(const Key('rail-share')))
-        .bottom;
-    final seriesTop = tester
-        .getRect(find.byKey(const Key('home-feed-full-series')))
-        .top;
-    final titleRight = tester
-        .getRect(find.byKey(const Key('home-feed-title')))
-        .right;
-    final railLeft = tester.getRect(find.byKey(const Key('rail-save'))).left;
-
-    expect(railTop, greaterThan(844 * 0.45));
-    expect(seriesTop - railBottom, closeTo(12, 1));
-    expect(titleRight, lessThanOrEqualTo(railLeft + 2));
-  });
-
-  testWidgets('should_keep_feed_header_and_progress_after_clear', (
-    tester,
-  ) async {
-    await _pumpApp(tester);
-    final gesture = await tester.startGesture(const Offset(195, 300));
-    await tester.pump(const Duration(milliseconds: 700));
-    await tester.pump();
-    await gesture.up();
+    await tester.tap(find.byKey(const Key('recommend-search')));
     await tester.pumpAndSettle();
-    await tester.tap(find.byKey(const Key('player-more-clear')));
-    await tester.pumpAndSettle();
-
-    expect(find.byKey(const Key('home-feed-refresh')), findsOneWidget);
-    expect(find.byKey(const Key('home-feed-tab-recommend')), findsOneWidget);
-    expect(find.byKey(const Key('home-feed-search')), findsOneWidget);
-    expect(find.byKey(const Key('home-feed-full-series')), findsOneWidget);
-    expect(find.byKey(const Key('home-feed-progress')), findsOneWidget);
-    expect(find.byKey(const Key('rail-save')), findsNothing);
-    expect(find.byKey(const Key('home-feed-title')), findsNothing);
-    final exit = tester.getRect(
-      find.byKey(const Key('home-feed-exit-clear-screen')),
-    );
-    expect(exit.right, greaterThan(340));
-    expect(exit.center.dy, greaterThan(600));
-
-    await tester.tap(find.byKey(const Key('home-feed-exit-clear-screen')));
-    await tester.pumpAndSettle();
-    expect(find.byKey(const Key('rail-save')), findsOneWidget);
-    expect(find.byKey(const Key('home-feed-title')), findsOneWidget);
-  });
-
-  testWidgets('should_boost_feed_on_side_long_press', (tester) async {
-    await _pumpApp(tester);
-    expect(find.byKey(const Key('home-feed-title')), findsOneWidget);
-
-    final gesture = await tester.startGesture(const Offset(60, 300));
-    await tester.pump(const Duration(milliseconds: 700));
-    await tester.pump();
-
-    expect(find.byKey(const Key('home-feed-speed-boost-hint')), findsOneWidget);
-    expect(find.byKey(const Key('home-feed-full-series')), findsOneWidget);
-    expect(find.byKey(const Key('home-feed-title')), findsNothing);
-    expect(find.byKey(const Key('rail-save')), findsNothing);
-    expect(find.byKey(const Key('home-feed-search')), findsNothing);
-
-    await gesture.up();
-    await tester.pumpAndSettle();
-    expect(find.byKey(const Key('home-feed-speed-boost-hint')), findsNothing);
-    expect(find.byKey(const Key('home-feed-title')), findsOneWidget);
-    expect(find.byKey(const Key('rail-save')), findsOneWidget);
-    expect(find.byKey(const Key('home-feed-search')), findsOneWidget);
-  });
-
-  testWidgets('should_hide_exit_clear_button_while_boosting', (tester) async {
-    await _pumpApp(tester);
-    final moreGesture = await tester.startGesture(const Offset(195, 300));
-    await tester.pump(const Duration(milliseconds: 700));
-    await tester.pump();
-    await moreGesture.up();
-    await tester.pumpAndSettle();
-    await tester.tap(find.byKey(const Key('player-more-clear')));
-    await tester.pumpAndSettle();
-    expect(
-      find.byKey(const Key('home-feed-exit-clear-screen')),
-      findsOneWidget,
-    );
-
-    final boostGesture = await tester.startGesture(const Offset(60, 300));
-    await tester.pump(const Duration(milliseconds: 700));
-    await tester.pump();
-
-    expect(find.byKey(const Key('home-feed-speed-boost-hint')), findsOneWidget);
-    expect(find.byKey(const Key('home-feed-full-series')), findsOneWidget);
-    expect(find.byKey(const Key('home-feed-progress')), findsOneWidget);
-    expect(find.byKey(const Key('home-feed-exit-clear-screen')), findsNothing);
-    expect(find.byKey(const Key('home-feed-search')), findsNothing);
-
-    await boostGesture.up();
-    await tester.pumpAndSettle();
-
-    expect(find.byKey(const Key('home-feed-speed-boost-hint')), findsNothing);
-    expect(
-      find.byKey(const Key('home-feed-exit-clear-screen')),
-      findsOneWidget,
-    );
-    expect(find.byKey(const Key('home-feed-search')), findsOneWidget);
-  });
-
-  testWidgets('should_resume_playback_when_boosting_while_paused', (
-    tester,
-  ) async {
-    await _pumpApp(tester);
-    await tester.tap(find.byKey(const Key('home-feed-video-toggle')));
-    await tester.pump();
-    expect(find.byKey(const Key('home-feed-center-play')), findsOneWidget);
-
-    final gesture = await tester.startGesture(const Offset(60, 300));
-    await tester.pump(const Duration(milliseconds: 700));
-    await tester.pump();
-
-    expect(find.byKey(const Key('home-feed-speed-boost-hint')), findsOneWidget);
-    expect(find.textContaining('2.0'), findsWidgets);
-    expect(find.byKey(const Key('home-feed-center-play')), findsNothing);
-
-    await gesture.up();
-    await tester.pumpAndSettle();
-    expect(find.byKey(const Key('home-feed-speed-boost-hint')), findsNothing);
-    expect(find.byKey(const Key('home-feed-center-play')), findsNothing);
-  });
-
-  testWidgets('should_open_more_sheet_on_center_long_press', (tester) async {
-    await _pumpApp(tester);
-
-    final gesture = await tester.startGesture(const Offset(195, 300));
-    await tester.pump(const Duration(milliseconds: 700));
-    await tester.pump();
-    await gesture.up();
-    await tester.pumpAndSettle();
-
-    expect(find.byKey(const Key('player-more-sheet')), findsOneWidget);
-    expect(find.byKey(const Key('home-feed-clear')), findsNothing);
-    expect(find.byKey(const Key('home-feed-download')), findsNothing);
-    expect(find.byKey(const Key('home-feed-pip')), findsNothing);
-  });
-
-  testWidgets('should_restore_light_theme_after_leaving_feed_tab', (
-    tester,
-  ) async {
-    await _pumpApp(tester);
-    expect(_hasLightStatusBar(tester), isTrue);
-
-    await tester.tap(find.byKey(const Key('tab-theater')));
-    await tester.pumpAndSettle();
-
-    expect(find.byKey(const Key('home-page-gradient')), findsOneWidget);
-    expect(_hasLightStatusBar(tester), isFalse);
-  });
-
-  testWidgets('should_switch_feed_drama_when_swiped_up', (tester) async {
-    await _pumpApp(tester);
-    final before = tester
-        .widget<Text>(find.byKey(const Key('home-feed-title')))
-        .data;
-
-    await tester.drag(find.byType(PageView).first, const Offset(0, -600));
-    await tester.pumpAndSettle();
-
-    final after = tester
-        .widget<Text>(find.byKey(const Key('home-feed-title')))
-        .data;
-    expect(after, isNot(before));
-  });
-
-  testWidgets('should_keep_feed_header_fixed_when_swiping', (tester) async {
-    await _pumpApp(tester);
-    final before = tester.getRect(find.byKey(const Key('home-feed-search')));
-
-    await tester.drag(find.byType(PageView).first, const Offset(0, -600));
-    await tester.pumpAndSettle();
-
-    final after = tester.getRect(find.byKey(const Key('home-feed-search')));
-    expect(after.top, closeTo(before.top, 0.5));
-    expect(find.byKey(const Key('home-feed-tab-recommend')), findsOneWidget);
-    expect(find.byKey(const Key('home-feed-refresh')), findsOneWidget);
-  });
-
-  testWidgets('should_resume_feed_after_returning_from_full_player', (
-    tester,
-  ) async {
-    await _pumpApp(tester);
-    await tester.tap(find.byKey(const Key('home-feed-video-toggle')));
-    await tester.pump();
-    expect(find.byKey(const Key('home-feed-center-play')), findsOneWidget);
-
-    await tester.tap(find.byKey(const Key('home-feed-full-series')));
-    await tester.pumpAndSettle();
-    expect(
-      tester.widget<PlayerPage>(find.byType(PlayerPage).last).homeMode,
-      isFalse,
-    );
-
-    await tester.tap(find.byKey(const Key('player-back')));
-    await tester.pumpAndSettle();
-
-    expect(find.byKey(const Key('home-feed-title')), findsOneWidget);
-    expect(find.byKey(const Key('home-feed-center-play')), findsNothing);
-  });
-
-  testWidgets('should_hide_feed_when_switching_to_theater', (tester) async {
-    await _pumpApp(tester);
-    expect(find.byKey(const Key('home-feed-title')), findsOneWidget);
-
-    await tester.tap(find.byKey(const Key('tab-theater')));
-    await tester.pumpAndSettle();
-
-    expect(find.byKey(const Key('home-feed-title')), findsNothing);
     expect(find.byKey(const Key('discover-search')), findsOneWidget);
+    await tester.enterText(find.byKey(const Key('discover-search')), 'signal');
+    await tester.pump(const Duration(milliseconds: 400));
+    await tester.pumpAndSettle();
+    expect(find.byKey(const Key('search-results-grid')), findsOneWidget);
+    final results = tester.widget<GridView>(
+      find.byKey(const Key('search-results-grid')),
+    );
+    final delegate =
+        results.gridDelegate as SliverGridDelegateWithFixedCrossAxisCount;
+    expect(delegate.crossAxisCount, 2);
+    expect(delegate.crossAxisSpacing, 12);
+    expect(delegate.mainAxisSpacing, 16);
+    expect(results.padding, const EdgeInsets.fromLTRB(14, 12, 14, 24));
+    await tester.tap(find.byKey(const Key('search-back')));
+    await tester.pumpAndSettle();
+    expect(find.byKey(const Key('recommend-page')), findsOneWidget);
+    expect(find.byKey(const Key('recommend-tab-recommend')), findsOneWidget);
   });
 
-  testWidgets('should_open_theater_search_when_feed_search_is_tapped', (
-    tester,
-  ) async {
+  testWidgets('should_open_player_from_home_grid_card', (tester) async {
     await _pumpApp(tester);
-
-    await tester.tap(find.byKey(const Key('home-feed-search')));
-    await tester.pumpAndSettle();
-
-    final field = tester.widget<TextField>(
-      find.byKey(const Key('discover-search')),
-    );
-    expect(field.focusNode?.hasFocus, isTrue);
-  });
-
-  testWidgets('should_not_render_theater_language_filters', (tester) async {
-    await _pumpApp(tester);
-    await tester.tap(find.byKey(const Key('tab-theater')));
-    await tester.pumpAndSettle();
-
-    expect(find.byKey(const Key('theater-language-chips')), findsNothing);
-    expect(find.byKey(const Key('theater-category-chips')), findsOneWidget);
-    expect(find.byKey(const Key('discover-search')), findsOneWidget);
-    expect(find.byKey(const Key('discover-refresh')), findsOneWidget);
-    expect(
-      find.byKey(const Key('home-drama-card-the-signal-demo')),
-      findsOneWidget,
-    );
-  });
-
-  testWidgets('should_open_fullscreen_player_when_theater_card_is_tapped', (
-    tester,
-  ) async {
-    await _pumpApp(tester);
-    await tester.tap(find.byKey(const Key('tab-theater')));
-    await tester.pumpAndSettle();
-
-    final card = find.byKey(const Key('home-drama-card-the-signal-demo'));
-    await tester.scrollUntilVisible(
-      card,
-      220,
-      scrollable: find
-          .descendant(
-            of: find.byKey(const Key('discover-refresh')),
-            matching: find.byType(Scrollable),
-          )
-          .first,
-    );
-    await tester.ensureVisible(card);
-    await tester.pumpAndSettle();
-    await tester.tap(card);
+    await tester.tap(find.byKey(const Key('home-feed-card-the-signal-demo')));
     await tester.pumpAndSettle();
 
     final player = tester.widget<PlayerPage>(find.byType(PlayerPage).last);
     expect(player.homeMode, isFalse);
   });
 
-  testWidgets('should_fit_home_feed_and_theater_on_320_width', (tester) async {
+  testWidgets('should_fit_home_and_recommend_on_320_width', (tester) async {
     await _pumpApp(tester, size: const Size(320, 568));
-
-    expect(find.byKey(const Key('home-feed-title')), findsOneWidget);
+    expect(find.byKey(const Key('home-grid-cards')), findsOneWidget);
     expect(tester.takeException(), isNull);
 
-    await tester.tap(find.byKey(const Key('tab-theater')));
+    await tester.tap(find.byKey(const Key('tab-recommend')));
     await tester.pumpAndSettle();
-    expect(find.byKey(const Key('theater-category-chips')), findsOneWidget);
-    expect(find.byKey(const Key('theater-language-chips')), findsNothing);
+    expect(find.byKey(const Key('recommend-feed-player')), findsOneWidget);
     expect(tester.takeException(), isNull);
   });
 }
 
 const _tabKeys = [
   Key('tab-home'),
-  Key('tab-theater'),
-  Key('tab-create'),
+  Key('tab-recommend'),
+  Key('tab-follow'),
   Key('tab-mine'),
 ];
 
+void _expectNoFloatingOverlays() {
+  expect(find.byKey(const Key('mine-mini-player')), findsNothing);
+  expect(find.byType(FloatingActionButton), findsNothing);
+}
+
 bool _hasLightStatusBar(WidgetTester tester) => tester
     .widgetList<AnnotatedRegion<SystemUiOverlayStyle>>(
       find.byType(AnnotatedRegion<SystemUiOverlayStyle>),
@@ -488,20 +198,20 @@ bool _hasLightStatusBar(WidgetTester tester) => tester
 Future<void> _pumpApp(
   WidgetTester tester, {
   Size size = const Size(390, 844),
-  FakeCatalogRepository? catalog,
 }) async {
   tester.view.physicalSize = size;
   tester.view.devicePixelRatio = 1;
   addTearDown(tester.view.resetPhysicalSize);
   addTearDown(tester.view.resetDevicePixelRatio);
-  final repository = catalog ?? FakeCatalogRepository();
+  final catalog = FakeCatalogRepository();
   await tester.pumpWidget(
     LumaDramaApp(
       playerFactory: createWidgetPlayer,
-      catalogRepository: repository,
-      categoryRepository: FakeCategoryRepository(catalog: repository),
+      catalogRepository: catalog,
+      categoryRepository: FakeCategoryRepository(catalog: catalog),
+      searchRepository: catalog,
       watchHistoryRepository: InMemoryWatchHistoryRepository(),
-      favoriteRepository: InMemoryFavoriteRepository(cards: repository.dramas),
+      favoriteRepository: InMemoryFavoriteRepository(cards: catalog.dramas),
       playbackRepository: FakePlaybackRepository(),
       commentRepository: FakeCommentRepository(),
       interactionRepository: FakeInteractionRepository(),
@@ -510,47 +220,3 @@ Future<void> _pumpApp(
   );
   await tester.pumpAndSettle();
 }
-
-class _PendingAnimeCatalog extends FakeCatalogRepository {
-  final anime = Completer<FeedPage>();
-  int animeCalls = 0;
-
-  @override
-  Future<FeedPage> fetchFeed({
-    List<String> types = const [],
-    String? categoryId,
-    String? cursor,
-    int size = 10,
-  }) {
-    if (types.contains('ANIME')) {
-      animeCalls++;
-      return anime.future;
-    }
-    return super.fetchFeed(
-      types: types,
-      categoryId: categoryId,
-      cursor: cursor,
-      size: size,
-    );
-  }
-}
-
-class _EmptyAnimeCatalog extends FakeCatalogRepository {
-  @override
-  Future<FeedPage> fetchFeed({
-    List<String> types = const [],
-    String? categoryId,
-    String? cursor,
-    int size = 10,
-  }) {
-    if (types.contains('ANIME')) {
-      return Future.value(const FeedPage(dramas: []));
-    }
-    return super.fetchFeed(
-      types: types,
-      categoryId: categoryId,
-      cursor: cursor,
-      size: size,
-    );
-  }
-}
diff --git a/test/integration/live_watch_flow_test.dart b/test/integration/live_watch_flow_test.dart
index aafd8df..ffa5c08 100644
--- a/test/integration/live_watch_flow_test.dart
+++ b/test/integration/live_watch_flow_test.dart
@@ -14,7 +14,8 @@ import 'package:fruitshorts/core/data/remote/watch_api.dart';
 /// 用一个一次性邮箱注册（需要登录态的接口才会通）；服务没起时自动跳过。
 void main() {
   const baseUrl = 'http://127.0.0.1:8081';
-  final email = 'k1.selftest.${DateTime.now().millisecondsSinceEpoch}@example.com';
+  final email =
+      'k1.selftest.${DateTime.now().millisecondsSinceEpoch}@example.com';
   const password = 'Passw0rd!23';
 
   AuthSession? session;
@@ -57,6 +58,20 @@ void main() {
     }
     expect(session?.user.uid, isNotEmpty);
 
+    final recentProbe = await client.get(
+      '/app/watch/recent',
+      query: {'pageIndex': '1', 'pageSize': '1'},
+    );
+    final favoriteProbe = await client.get(
+      '/app/favorites',
+      query: {'pageIndex': '1', 'pageSize': '1'},
+    );
+    if (recentProbe is! Map<String, dynamic> ||
+        favoriteProbe is! Map<String, dynamic>) {
+      markTestSkipped('运行中的后端仍返回旧版 List，分页契约联调已跳过');
+      return;
+    }
+
     // 1) 首页 → 取第一部剧
     final feed = await catalog.homeFeed();
     expect(feed.dramas, isNotEmpty);
@@ -98,17 +113,17 @@ void main() {
     expect(resume?.position, position);
 
     // 最近观看里能看到这部剧
-    final recent = await watch.recent(limit: 20);
-    expect(recent.map((item) => item.dramaId), contains(card.id));
+    final recent = await watch.recent(pageSize: 20);
+    expect(recent.list.map((item) => item.dramaId), contains(card.id));
 
     // 5) 收藏 → 出现在收藏列表 → 取消收藏
     final savedState = await library.toggleFavorite(card.id);
     expect(savedState, isTrue);
     final favorites = await library.favorites();
-    expect(favorites.map((drama) => drama.id), contains(card.id));
+    expect(favorites.list.map((drama) => drama.id), contains(card.id));
 
     await library.removeFavorite(card.id);
     final afterRemove = await library.favorites();
-    expect(afterRemove.map((drama) => drama.id), isNot(contains(card.id)));
+    expect(afterRemove.list.map((drama) => drama.id), isNot(contains(card.id)));
   });
 }
diff --git a/test/library/favorite_controller_test.dart b/test/library/favorite_controller_test.dart
index 0e5a96c..b02b89d 100644
--- a/test/library/favorite_controller_test.dart
+++ b/test/library/favorite_controller_test.dart
@@ -2,6 +2,7 @@
 
 import 'package:flutter_test/flutter_test.dart';
 import 'package:fruitshorts/core/data/models/drama.dart';
+import 'package:fruitshorts/core/data/models/page_result.dart';
 import 'package:fruitshorts/core/data/repositories/favorite_repository.dart';
 import 'package:fruitshorts/core/data/services/favorite_controller.dart';
 
@@ -49,7 +50,7 @@ void main() {
   });
 
   test('should_expose_error_and_keep_old_state_when_list_fails', () async {
-    final repository = InMemoryFavoriteRepository()..failList = true;
+    final repository = InMemoryFavoriteRepository()..failPage = true;
     final controller = FavoriteController(repository);
 
     await controller.load();
@@ -115,4 +116,66 @@ void main() {
     expect(controller.savedIds, isEmpty);
     expect(controller.cards, isEmpty);
   });
+
+  test('should_append_unique_cards_and_stop_when_no_more_pages', () async {
+    final repository = _PagedFavoriteRepository({
+      1: PageResult(total: 3, list: [_card('a'), _card('b')]),
+      2: PageResult(total: 3, list: [_card('b'), _card('c')]),
+    });
+    final controller = FavoriteController(repository, pageSize: 2);
+
+    await controller.load();
+    await controller.loadMore();
+    await controller.loadMore();
+
+    expect(controller.cards.map((card) => card.id), ['a', 'b', 'c']);
+    expect(controller.total, 3);
+    expect(controller.hasMore, isFalse);
+    expect(repository.pageRequests, [1, 2]);
+  });
+
+  test('should_retry_next_page_when_load_more_fails', () async {
+    final repository = _PagedFavoriteRepository({
+      1: PageResult(total: 2, list: [_card('a')]),
+      2: PageResult(total: 2, list: [_card('b')]),
+    })..failPages.add(2);
+    final controller = FavoriteController(repository, pageSize: 1);
+
+    await controller.load();
+    await controller.loadMore();
+
+    expect(controller.cards.map((card) => card.id), ['a']);
+    expect(controller.loadMoreError, 'favoritesError');
+    expect(controller.hasMore, isTrue);
+
+    repository.failPages.clear();
+    await controller.loadMore();
+
+    expect(controller.cards.map((card) => card.id), ['a', 'b']);
+    expect(controller.loadMoreError, isNull);
+    expect(repository.pageRequests, [1, 2, 2]);
+  });
+}
+
+class _PagedFavoriteRepository implements FavoriteRepository {
+  _PagedFavoriteRepository(this.pages);
+
+  final Map<int, PageResult<Drama>> pages;
+  final List<int> pageRequests = [];
+  final Set<int> failPages = {};
+
+  @override
+  Future<PageResult<Drama>> page({int pageIndex = 1, int pageSize = 20}) async {
+    pageRequests.add(pageIndex);
+    if (failPages.contains(pageIndex)) {
+      throw StateError('page unavailable');
+    }
+    return pages[pageIndex] ?? const PageResult();
+  }
+
+  @override
+  Future<void> remove(String dramaId) async {}
+
+  @override
+  Future<bool> toggle(String dramaId) async => true;
 }
diff --git a/test/library/favorites_page_test.dart b/test/library/favorites_page_test.dart
index 2091e85..4599f42 100644
--- a/test/library/favorites_page_test.dart
+++ b/test/library/favorites_page_test.dart
@@ -32,10 +32,10 @@ import '../support/fake_interaction_repositories.dart';
 import '../support/fake_notice_repository.dart';
 import '../support/widget_player.dart';
 
-Drama _card(String id) => Drama(
+Drama _card(String id, {String synopsis = 'synopsis'}) => Drama(
   id: id,
   title: 'Drama $id',
-  synopsis: 'synopsis',
+  synopsis: synopsis,
   posterUrl: '/files/$id.png',
   totalEpisodes: 12,
 );
@@ -73,6 +73,14 @@ void main() {
     );
     expect(title.style?.color, AppColors.onSurface);
     expect(title.style?.fontSize, 15);
+    final synopsis = tester.widget<Text>(
+      find.byKey(const Key('favorite-synopsis-signal')),
+    );
+    expect(synopsis.data, 'synopsis');
+    expect(synopsis.maxLines, 2);
+    expect(synopsis.overflow, TextOverflow.ellipsis);
+    expect(synopsis.style?.color, AppColors.muted);
+    expect(synopsis.style?.fontSize, 12);
     expect(
       tester.getSize(find.byKey(const Key('favorite-cover-signal'))),
       const Size(80, 106),
@@ -91,7 +99,8 @@ void main() {
     );
     await tester.drag(find.byType(ListView), const Offset(0, 240));
     await tester.pump();
-    expect(find.text('Refreshing…'), findsOneWidget);
+    expect(find.byKey(const Key('pull-refresh-indicator')), findsOneWidget);
+    expect(find.text('Refreshing…'), findsNothing);
     await tester.pumpAndSettle();
 
     await tester.tap(find.byKey(const Key('favorite-remove-signal')));
@@ -100,6 +109,38 @@ void main() {
     expect(find.byKey(const Key('favorite-card-signal')), findsNothing);
   });
 
+  testWidgets('should_hide_blank_synopsis_without_changing_card_height', (
+    tester,
+  ) async {
+    final auth = await _auth(signedIn: true);
+    final longSynopsis = List.filled(12, '很长的剧情简介').join();
+    final favorites = FavoriteController(
+      InMemoryFavoriteRepository(
+        saved: {'with-synopsis', 'without-synopsis'},
+        cards: [
+          _card('with-synopsis', synopsis: longSynopsis),
+          _card('without-synopsis', synopsis: '   '),
+        ],
+      ),
+    );
+
+    await _pumpPage(tester, auth: auth, favorites: favorites);
+
+    final withSynopsis = tester.widget<Text>(
+      find.byKey(const Key('favorite-synopsis-with-synopsis')),
+    );
+    expect(withSynopsis.maxLines, 2);
+    expect(withSynopsis.overflow, TextOverflow.ellipsis);
+    expect(
+      find.byKey(const Key('favorite-synopsis-without-synopsis')),
+      findsNothing,
+    );
+    expect(
+      tester.getSize(find.byKey(const Key('favorite-card-with-synopsis'))),
+      tester.getSize(find.byKey(const Key('favorite-card-without-synopsis'))),
+    );
+  });
+
   testWidgets('should_keep_card_and_show_failure_when_remove_fails', (
     tester,
   ) async {
@@ -137,7 +178,7 @@ void main() {
 
   testWidgets('should_show_retry_when_favorite_list_fails', (tester) async {
     final auth = await _auth(signedIn: true);
-    final repository = InMemoryFavoriteRepository()..failList = true;
+    final repository = InMemoryFavoriteRepository()..failPage = true;
     final favorites = FavoriteController(repository);
 
     await _pumpPage(tester, auth: auth, favorites: favorites);
@@ -159,7 +200,7 @@ void main() {
       await _pumpPage(tester, auth: auth, favorites: favorites);
 
       expect(find.byKey(const Key('auth-gate-panel')), findsOneWidget);
-      expect(repository.listCalls, 0);
+      expect(repository.pageCalls, 0);
     },
   );
 
@@ -188,12 +229,10 @@ void main() {
       ),
     );
     await tester.pumpAndSettle();
-    await tester.tap(find.byKey(const Key('tab-mine')));
-    await tester.pumpAndSettle();
-    await tester.tap(find.byKey(const Key('mine-watchlist')));
+    await tester.tap(find.byKey(const Key('tab-follow')));
     await tester.pumpAndSettle();
 
-    await tester.tap(find.byKey(Key('favorite-card-${drama.id}')));
+    await tester.tap(find.byKey(Key('following-card-${drama.id}')));
     await tester.pumpAndSettle();
 
     expect(find.byType(PlayerPage), findsOneWidget);
diff --git a/test/library/library_api_test.dart b/test/library/library_api_test.dart
new file mode 100644
index 0000000..2dbe0e9
--- /dev/null
+++ b/test/library/library_api_test.dart
@@ -0,0 +1,104 @@
+// Author: fruit.com.cn
+
+import 'dart:convert';
+
+import 'package:flutter_test/flutter_test.dart';
+import 'package:fruitshorts/core/data/remote/api_client.dart';
+import 'package:fruitshorts/core/data/remote/library_api.dart';
+
+import '../support/fake_http_adapter.dart';
+
+void main() {
+  test('should_request_favorites_with_page_and_parse_page_result', () async {
+    final adapter = FakeHttpAdapter(
+      (_) async => FakeHttpResponse(
+        jsonEncode({
+          'code': 0,
+          'message': 'ok',
+          'data': {
+            'total': '21',
+            'list': [
+              {'id': '9', 'title': '收藏剧', 'cover': '/files/9.png'},
+            ],
+          },
+        }),
+      ),
+    );
+    final api = LibraryApi(
+      ApiClient(baseUrl: 'http://127.0.0.1:8081', adapter: adapter),
+    );
+
+    final page = await api.favorites(pageIndex: 2, pageSize: 10);
+
+    final request = adapter.requests.single;
+    expect(request.uri.path, '/app/favorites');
+    expect(request.queryParameters['pageIndex'], '2');
+    expect(request.queryParameters['pageSize'], '10');
+    expect(page.total, 21);
+    expect(page.list.single.id, '9');
+    expect(page.list.single.title, '收藏剧');
+  });
+
+  test('should_parse_favorites_when_server_returns_legacy_list', () async {
+    final adapter = FakeHttpAdapter(
+      (_) async => FakeHttpResponse(
+        jsonEncode({
+          'code': 0,
+          'message': 'ok',
+          'data': [
+            {'id': '5', 'title': '闪婚后', 'cover': '/files/5.png'},
+            {'id': '4', 'title': '另一部', 'cover': '/files/4.png'},
+          ],
+        }),
+      ),
+    );
+    final api = LibraryApi(
+      ApiClient(baseUrl: 'http://127.0.0.1:8081', adapter: adapter),
+    );
+
+    final page = await api.favorites();
+
+    expect(page.total, 2);
+    expect(page.list.map((drama) => drama.id), ['5', '4']);
+    expect(page.list.first.title, '闪婚后');
+  });
+
+  test('should_return_empty_favorites_when_data_is_null', () async {
+    final adapter = FakeHttpAdapter(
+      (_) async => FakeHttpResponse(
+        jsonEncode({'code': 0, 'message': 'ok', 'data': null}),
+      ),
+    );
+    final api = LibraryApi(
+      ApiClient(baseUrl: 'http://127.0.0.1:8081', adapter: adapter),
+    );
+
+    final page = await api.favorites();
+
+    expect(page.total, 0);
+    expect(page.list, isEmpty);
+  });
+
+  test('should_throw_api_exception_when_favorites_business_code_failed', () async {
+    final adapter = FakeHttpAdapter(
+      (_) async => FakeHttpResponse(
+        jsonEncode({'code': 401, 'message': '未登录或登录已过期', 'data': null}),
+      ),
+    );
+    final api = LibraryApi(
+      ApiClient(
+        baseUrl: 'http://127.0.0.1:8081',
+        adapter: adapter,
+        // 无刷新回调时，401 直接抛业务异常，避免重试逻辑。
+        tokenRefresher: null,
+      ),
+    );
+
+    await expectLater(
+      () => api.favorites(),
+      throwsA(
+        isA<ApiException>().having((e) => e.code, 'code', 401),
+      ),
+    );
+  });
+}
diff --git a/test/mine/mine_logic_test.dart b/test/mine/mine_logic_test.dart
index 30cb8d5..536fc1a 100644
--- a/test/mine/mine_logic_test.dart
+++ b/test/mine/mine_logic_test.dart
@@ -27,6 +27,7 @@ void main() {
     await pumpEventQueue();
 
     expect(logic.recent.single.dramaId, 'signal');
+    expect(logic.watchRecordTotal, 1);
     expect(logic.recentLoading, isFalse);
     expect(logic.recentError, isNull);
     logic.dispose();
@@ -91,11 +92,11 @@ void main() {
 
     logic.act(
       pageContext,
-      MyPageAction.discover,
+      MyPageAction.recommend,
       embedded: true,
       onAction: forwarded.add,
     );
-    expect(forwarded, [MyPageAction.discover]);
+    expect(forwarded, [MyPageAction.recommend]);
 
     logic.act(pageContext, MyPageAction.resume, embedded: false);
     await tester.pumpAndSettle();
diff --git a/test/mine/mine_preview_layout_test.dart b/test/mine/mine_preview_layout_test.dart
index 62eb05a..53cebb9 100644
--- a/test/mine/mine_preview_layout_test.dart
+++ b/test/mine/mine_preview_layout_test.dart
@@ -3,72 +3,475 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:fruitshorts/app.dart';
+import 'package:fruitshorts/core/data/models/wallet.dart';
+import 'package:fruitshorts/core/data/models/watch_progress.dart';
+import 'package:fruitshorts/core/data/repositories/commerce_repository.dart';
 import 'package:fruitshorts/core/data/repositories/favorite_repository.dart';
 import 'package:fruitshorts/core/data/repositories/playback_repository.dart';
 import 'package:fruitshorts/core/data/repositories/watch_history_repository.dart';
+import 'package:fruitshorts/core/theme/app_colors.dart';
+import 'package:fruitshorts/core/theme/app_dimens.dart';
+import 'package:fruitshorts/core/theme/app_theme.dart';
+import 'package:fruitshorts/l10n/app_localizations.dart';
+import 'package:fruitshorts/pages/auth/auth_view.dart';
+import 'package:fruitshorts/pages/mine/about_page.dart';
+import 'package:fruitshorts/pages/mine/mine_types.dart';
+import 'package:fruitshorts/pages/mine/widgets/mine_menu.dart';
+import 'package:fruitshorts/pages/store/vip_page.dart';
 import 'package:shared_preferences_platform_interface/in_memory_shared_preferences_async.dart';
 import 'package:shared_preferences_platform_interface/shared_preferences_async_platform_interface.dart';
 
 import '../support/fake_catalog.dart';
 import '../support/fake_category.dart';
-import '../support/fake_haptics.dart';
 import '../support/fake_interaction_repositories.dart';
 import '../support/fake_notice_repository.dart';
 import '../support/widget_player.dart';
 
 void main() {
-  testWidgets('should_render_minimal_profile_shortcuts_wallet_vip_and_menu', (
+  testWidgets('should_render_visitor_user_vip_and_seven_grid_entries', (
     tester,
   ) async {
-    SharedPreferencesAsyncPlatform.instance =
-        InMemorySharedPreferencesAsync.empty();
-    tester.view.physicalSize = const Size(390, 844);
+    await _pumpApp(tester, signedIn: false);
+    await _openMine(tester);
+
+    expect(find.byKey(const Key('mine-user-row')), findsOneWidget);
+    expect(find.byKey(const Key('mine-avatar')), findsOneWidget);
+    expect(find.text('Visitor'), findsOneWidget);
+    expect(find.text('UID: --'), findsOneWidget);
+    expect(find.byKey(const Key('mine-uid-copy')), findsOneWidget);
+    final uidRowSize = tester.getSize(find.byKey(const Key('mine-uid')));
+    expect(uidRowSize.height, closeTo(AppDimens.mineUidRowHeight, 0.1));
+    final nicknameRect = tester.getRect(find.byKey(const Key('mine-nickname')));
+    final uidRect = tester.getRect(find.byKey(const Key('mine-uid')));
+    expect(uidRect.top - nicknameRect.bottom, lessThanOrEqualTo(6));
+    final nickname = tester.widget<Text>(
+      find.byKey(const Key('mine-nickname')),
+    );
+    expect(nickname.style?.fontSize, AppDimens.mineUserName);
+    expect(nickname.style?.fontWeight, FontWeight.w700);
+    expect(nickname.style?.height, AppDimens.mineUserNameLineHeight);
+    final uid = tester.widget<Text>(find.text('UID: --'));
+    expect(uid.style?.fontSize, AppDimens.mineUid);
+    expect(uid.style?.color, AppColors.textTertiary);
+    final copyIcon = tester.widget<Icon>(
+      find.descendant(
+        of: find.byKey(const Key('mine-uid-copy')),
+        matching: find.byType(Icon),
+      ),
+    );
+    expect(copyIcon.size, AppDimens.mineCopyIcon);
+    expect(copyIcon.color, AppColors.textTertiary);
+    expect(find.byKey(const Key('mine-login')), findsOneWidget);
+    expect(find.byKey(const Key('mine-edit')), findsNothing);
+    expect(find.byKey(const Key('mine-vip')), findsOneWidget);
+    expect(find.byKey(const Key('mine-vip-open')), findsOneWidget);
+    expect(find.byKey(const Key('mine-continue-watching')), findsNothing);
+    expect(find.byKey(const Key('mine-stats')), findsOneWidget);
+    expect(find.text('—'), findsNWidgets(3));
+    expect(find.byKey(const Key('mine-menu')), findsOneWidget);
+    expect(find.byKey(const Key('mine-more-services')), findsOneWidget);
+    expect(find.byKey(const Key('mine-mini-player')), findsNothing);
+    final surface = tester.widget<DecoratedBox>(
+      find.byKey(const Key('mine-page-surface')),
+    );
+    final surfaceDecoration = surface.decoration as BoxDecoration;
+    final background = surfaceDecoration.gradient! as LinearGradient;
+    expect(background.begin, Alignment.topCenter);
+    expect(background.end, Alignment.bottomCenter);
+    expect(background.colors, const [
+      AppColors.mineGradientTop,
+      AppColors.mineGradientMiddle,
+      AppColors.mineGradientBottom,
+    ]);
+    expect(background.stops, const [0, 0.4, 0.75]);
+    expect(
+      find.descendant(
+        of: find.byKey(const Key('mine-page-surface')),
+        matching: find.text('My'),
+      ),
+      findsNothing,
+    );
+    final glow = tester.widget<DecoratedBox>(
+      find.byKey(const Key('mine-page-glow')),
+    );
+    final glowDecoration = glow.decoration as BoxDecoration;
+    final radialGlow = glowDecoration.gradient! as RadialGradient;
+    expect(radialGlow.center, const Alignment(0, -0.95));
+    expect(radialGlow.radius, 0.9);
+    expect(radialGlow.colors, const [
+      AppColors.mineGradientGlow,
+      AppColors.transparent,
+    ]);
+    for (final oldShortcut in const [
+      Key('mine-watchlist'),
+      Key('mine-history-shortcut'),
+      Key('mine-downloads-shortcut'),
+    ]) {
+      expect(find.byKey(oldShortcut), findsNothing);
+    }
+
+    const entryKeys = [
+      Key('mine-wallet'),
+      Key('mine-downloads'),
+      Key('mine-history'),
+      Key('mine-watch-preferences'),
+      Key('mine-help'),
+      Key('mine-language'),
+      Key('mine-settings'),
+    ];
+    expect(entryKeys, hasLength(7));
+    for (final entryKey in entryKeys) {
+      expect(find.byKey(entryKey), findsOneWidget);
+    }
+    const coloredIcons = [
+      (
+        Key('mine-wallet'),
+        Icons.account_balance_wallet_outlined,
+        AppColors.mineIconWallet,
+      ),
+      (
+        Key('mine-downloads'),
+        Icons.download_outlined,
+        AppColors.mineIconDownloads,
+      ),
+      (Key('mine-history'), Icons.history_rounded, AppColors.mineIconHistory),
+      (
+        Key('mine-watch-preferences'),
+        Icons.tune_rounded,
+        AppColors.mineIconPreferences,
+      ),
+      (
+        Key('mine-help'),
+        Icons.support_agent_rounded,
+        AppColors.mineIconSupport,
+      ),
+      (
+        Key('mine-language'),
+        Icons.language_rounded,
+        AppColors.mineIconLanguage,
+      ),
+      (
+        Key('mine-settings'),
+        Icons.settings_outlined,
+        AppColors.mineIconSettings,
+      ),
+    ];
+    for (final entry in coloredIcons) {
+      final icon = tester.widget<Icon>(
+        find.descendant(
+          of: find.byKey(entry.$1),
+          matching: find.byIcon(entry.$2),
+        ),
+      );
+      expect(icon.color, entry.$3);
+      expect(icon.size, AppDimens.mineGridIcon);
+    }
+    for (var index = 0; index < 8; index++) {
+      expect(find.byKey(Key('mine-menu-cell-$index')), findsOneWidget);
+    }
+    expect(
+      find.descendant(
+        of: find.byKey(const Key('mine-menu-cell-7')),
+        matching: find.byType(Icon),
+      ),
+      findsNothing,
+    );
+    expect(
+      find.descendant(
+        of: find.byKey(const Key('mine-menu')),
+        matching: find.byType(ListTile),
+      ),
+      findsNothing,
+    );
+    final positions = [
+      for (final entryKey in entryKeys) tester.getTopLeft(find.byKey(entryKey)),
+    ];
+    expect(
+      positions.take(4).map((position) => position.dy).toSet(),
+      hasLength(1),
+    );
+    expect(
+      positions.skip(4).map((position) => position.dy).toSet(),
+      hasLength(1),
+    );
+    expect(positions[1].dx, greaterThan(positions[0].dx));
+    expect(positions[2].dx, greaterThan(positions[1].dx));
+    expect(positions[3].dx, greaterThan(positions[2].dx));
+    expect(positions[5].dx, greaterThan(positions[4].dx));
+    expect(positions[6].dx, greaterThan(positions[5].dx));
+    expect(tester.getTopLeft(find.byKey(const Key('mine-menu'))).dx, 14);
+
+    final menu = tester.widget<Container>(find.byKey(const Key('mine-menu')));
+    final menuDecoration = menu.decoration! as BoxDecoration;
+    expect(menuDecoration.color, AppColors.mineGridSurface);
+    expect(
+      menuDecoration.borderRadius,
+      BorderRadius.circular(AppDimens.mineGridRadius),
+    );
+    expect(menuDecoration.border, isNull);
+    expect(menuDecoration.boxShadow, isNull);
+    final table = tester.widget<Table>(find.byKey(const Key('mine-menu-grid')));
+    final border = table.border!;
+    expect(border.horizontalInside.color, AppColors.mineGridDivider);
+    expect(border.verticalInside.color, AppColors.mineGridDivider);
+    final vip = tester.widget<Container>(find.byKey(const Key('mine-vip')));
+    final vipDecoration = vip.decoration! as BoxDecoration;
+    expect((vipDecoration.gradient! as LinearGradient).colors, const [
+      AppColors.vipGoldStart,
+      AppColors.vipGoldEnd,
+    ]);
+    expect(vipDecoration.boxShadow, isNull);
+    final order = [
+      tester.getTopLeft(find.byKey(const Key('mine-user-row'))).dy,
+      tester.getTopLeft(find.byKey(const Key('mine-vip'))).dy,
+      tester.getTopLeft(find.byKey(const Key('mine-stats'))).dy,
+      tester.getTopLeft(find.byKey(const Key('mine-menu'))).dy,
+      tester.getTopLeft(find.byKey(const Key('mine-more-services'))).dy,
+    ];
+    expect(order, [...order]..sort());
+    expect(tester.takeException(), isNull);
+
+    await tester.tap(find.byKey(const Key('mine-login')));
+    await tester.pumpAndSettle();
+    expect(find.byType(AuthPage), findsOneWidget);
+  });
+
+  testWidgets('should_render_signed_in_user_without_floating_mini_player', (
+    tester,
+  ) async {
+    await _pumpApp(
+      tester,
+      signedIn: true,
+      history: InMemoryWatchHistoryRepository(seed: [_recent]),
+    );
+    await _openMine(tester);
+
+    expect(find.text('Viewer'), findsOneWidget);
+    expect(find.text('UID: U-100'), findsOneWidget);
+    expect(find.byKey(const Key('mine-edit')), findsOneWidget);
+    expect(find.byKey(const Key('mine-login')), findsNothing);
+    expect(find.byKey(const Key('mine-mini-player')), findsNothing);
+    expect(find.byType(FloatingActionButton), findsNothing);
+    expect(find.byKey(const Key('mine-continue-watching')), findsOneWidget);
+    expect(find.byKey(const Key('mine-continue-all')), findsOneWidget);
+    expect(find.text('Recent drama'), findsOneWidget);
+    expect(find.text('Episode 3'), findsWidgets);
+
+    String statValue(Key key) {
+      return tester
+          .widget<Text>(
+            find
+                .descendant(of: find.byKey(key), matching: find.byType(Text))
+                .first,
+          )
+          .data!;
+    }
+
+    expect(statValue(const Key('mine-stat-following')), '3');
+    expect(statValue(const Key('mine-stat-watch-records')), '1');
+    expect(statValue(const Key('mine-stat-coins')), '320');
+    final signedInOrder = [
+      tester.getTopLeft(find.byKey(const Key('mine-user-row'))).dy,
+      tester.getTopLeft(find.byKey(const Key('mine-vip'))).dy,
+      tester.getTopLeft(find.byKey(const Key('mine-continue-watching'))).dy,
+      tester.getTopLeft(find.byKey(const Key('mine-stats'))).dy,
+      tester.getTopLeft(find.byKey(const Key('mine-menu'))).dy,
+      tester.getTopLeft(find.byKey(const Key('mine-more-services'))).dy,
+    ];
+    expect(signedInOrder, [...signedInOrder]..sort());
+
+    await tester.tap(find.byKey(const Key('mine-edit')));
+    await tester.pumpAndSettle();
+    expect(find.byKey(const Key('mine-edit-profile')), findsOneWidget);
+    expect(find.byKey(const Key('mine-edit-works')), findsOneWidget);
+    expect(find.byKey(const Key('mine-edit-creator')), findsOneWidget);
+    expect(find.byKey(const Key('mine-edit-notices')), findsOneWidget);
+    await tester.tap(find.byKey(const Key('mine-edit-works')));
+    await tester.pumpAndSettle();
+    expect(find.byKey(const Key('mine-placeholder-page')), findsOneWidget);
+    expect(tester.takeException(), isNull);
+  });
+
+  testWidgets('should_open_more_services_and_about_page', (tester) async {
+    await _pumpApp(tester, signedIn: false);
+    await _openMine(tester);
+
+    await tester.tap(find.byKey(const Key('mine-common-questions')));
+    await tester.pumpAndSettle();
+    expect(find.byKey(const Key('mine-placeholder-page')), findsOneWidget);
+    await tester.binding.handlePopRoute();
+    await tester.pumpAndSettle();
+
+    await tester.tap(find.byKey(const Key('mine-about')));
+    await tester.pumpAndSettle();
+    expect(find.byType(MineAboutPage), findsOneWidget);
+    expect(find.byKey(const Key('mine-about-page')), findsOneWidget);
+    expect(find.text('Version 1.0.0'), findsOneWidget);
+    expect(
+      find.text(
+        AppLocalizations.of(
+          tester.element(find.byType(MineAboutPage)),
+        )!.aboutDescription,
+      ),
+      findsOneWidget,
+    );
+  });
+
+  testWidgets('should_open_history_tab_from_continue_watching_all', (
+    tester,
+  ) async {
+    await _pumpApp(
+      tester,
+      signedIn: true,
+      history: InMemoryWatchHistoryRepository(seed: [_recent]),
+    );
+    await _openMine(tester);
+
+    await tester.tap(find.byKey(const Key('mine-continue-all')));
+    await tester.pumpAndSettle();
+
+    expect(find.byKey(const Key('following-page')), findsOneWidget);
+    expect(find.byKey(const Key('following-history-grid')), findsOneWidget);
+  });
+
+  testWidgets('should_open_vip_from_mine_without_floating_player', (
+    tester,
+  ) async {
+    await _pumpApp(
+      tester,
+      signedIn: true,
+      history: InMemoryWatchHistoryRepository(seed: [_recent]),
+    );
+    await _openMine(tester);
+
+    await tester.tap(find.byKey(const Key('mine-vip-open')));
+    await tester.pumpAndSettle();
+    expect(find.byType(VipPage), findsOneWidget);
+    await tester.binding.handlePopRoute();
+    await tester.pumpAndSettle();
+    expect(find.byKey(const Key('mine-mini-player')), findsNothing);
+    expect(find.byType(FloatingActionButton), findsNothing);
+  });
+
+  testWidgets('should_expose_seven_menu_destinations_in_order', (tester) async {
+    tester.view.physicalSize = const Size(390, 900);
     tester.view.devicePixelRatio = 1;
     addTearDown(tester.view.resetPhysicalSize);
     addTearDown(tester.view.resetDevicePixelRatio);
-
-    final catalog = FakeCatalogRepository();
+    final opened = <MineDestination>[];
+    var languageOpened = 0;
     await tester.pumpWidget(
-      LumaDramaApp(
-        playerFactory: createWidgetPlayer,
-        catalogRepository: catalog,
-        categoryRepository: FakeCategoryRepository(catalog: catalog),
-        watchHistoryRepository: InMemoryWatchHistoryRepository(),
-        favoriteRepository: InMemoryFavoriteRepository(cards: catalog.dramas),
-        playbackRepository: FakePlaybackRepository(),
-        commentRepository: FakeCommentRepository(),
-        interactionRepository: FakeInteractionRepository(),
-        noticeRepository: FakeNoticeRepository(),
-        haptics: FakeHaptics(),
+      MaterialApp(
+        theme: AppTheme.dark(),
+        locale: const Locale('en'),
+        supportedLocales: AppLocalizations.supportedLocales,
+        localizationsDelegates: AppLocalizations.localizationsDelegates,
+        home: Scaffold(
+          body: SingleChildScrollView(
+            padding: const EdgeInsets.all(AppDimens.pageHorizontal),
+            child: MineMenuList(
+              onOpen: opened.add,
+              onLanguage: () => languageOpened++,
+            ),
+          ),
+        ),
       ),
     );
-    await tester.pumpAndSettle();
-    await tester.tap(find.byKey(const Key('tab-mine')));
-    await tester.pumpAndSettle();
 
-    expect(find.byKey(const Key('mine-user-row')), findsOneWidget);
-    expect(find.byKey(const Key('mine-continue-watching')), findsNothing);
-    for (final key in const [
-      Key('mine-watchlist'),
-      Key('mine-history'),
-      Key('mine-downloads'),
-      Key('mine-wallet'),
-      Key('mine-wallet-recharge'),
-      Key('mine-vip'),
-      Key('mine-menu'),
-      Key('mine-works'),
-      Key('mine-creator-center'),
-      Key('mine-notices'),
-      Key('mine-settings'),
-      Key('mine-language'),
-      Key('mine-help'),
-    ]) {
-      expect(find.byKey(key), findsOneWidget);
+    const rows = [
+      (Key('mine-wallet'), MineDestination.wallet),
+      (Key('mine-downloads'), MineDestination.downloads),
+      (Key('mine-history'), MineDestination.history),
+      (Key('mine-watch-preferences'), MineDestination.preferences),
+      (Key('mine-help'), MineDestination.help),
+    ];
+    for (final row in rows) {
+      await tester.tap(find.byKey(row.$1));
+      await tester.pump();
+      expect(opened.last, row.$2);
     }
-    expect(find.byKey(const Key('mine-language')), findsOneWidget);
-    expect(find.byKey(const Key('mine-library-tab-0')), findsNothing);
-    expect(find.byKey(const Key('mine-library-tab-1')), findsNothing);
-    expect(find.byKey(const Key('mine-library-tab-2')), findsNothing);
-    expect(tester.takeException(), isNull);
+    await tester.tap(find.byKey(const Key('mine-language')));
+    await tester.pump();
+    expect(languageOpened, 1);
+    await tester.tap(find.byKey(const Key('mine-settings')));
+    await tester.pump();
+    expect(opened.last, MineDestination.settings);
   });
 }
+
+const _recent = WatchProgress(
+  dramaId: 'city-lights-demo',
+  episodeId: 'city-lights-demo-3',
+  dramaTitle: 'Recent drama',
+  dramaCover: '/files/recent.jpg',
+  episodeNumber: 3,
+  totalEpisodes: 8,
+  position: Duration(seconds: 30),
+  duration: Duration(minutes: 2),
+);
+
+Future<void> _openMine(WidgetTester tester) async {
+  await tester.tap(find.byKey(const Key('tab-mine')));
+  await tester.pumpAndSettle();
+}
+
+Future<void> _pumpApp(
+  WidgetTester tester, {
+  required bool signedIn,
+  WatchHistoryRepository? history,
+  CommerceRepository? commerce,
+}) async {
+  tester.view.physicalSize = const Size(390, 1000);
+  tester.view.devicePixelRatio = 1;
+  addTearDown(tester.view.resetPhysicalSize);
+  addTearDown(tester.view.resetDevicePixelRatio);
+  SharedPreferencesAsyncPlatform.instance = signedIn
+      ? InMemorySharedPreferencesAsync.withData({
+          'auth.accessToken': 'access',
+          'auth.refreshToken': 'refresh',
+          'auth.user': '{"uid":"U-100","nickname":"Viewer","avatarUrl":""}',
+        })
+      : InMemorySharedPreferencesAsync.empty();
+  final catalog = FakeCatalogRepository();
+  await tester.pumpWidget(
+    LumaDramaApp(
+      playerFactory: createWidgetPlayer,
+      catalogRepository: catalog,
+      categoryRepository: FakeCategoryRepository(catalog: catalog),
+      watchHistoryRepository: history ?? InMemoryWatchHistoryRepository(),
+      favoriteRepository: InMemoryFavoriteRepository(cards: catalog.dramas),
+      playbackRepository: FakePlaybackRepository(),
+      commentRepository: FakeCommentRepository(),
+      interactionRepository: FakeInteractionRepository(),
+      noticeRepository: FakeNoticeRepository(),
+      commerceRepository: commerce ?? const _MineWalletCommerceRepository(),
+    ),
+  );
+  await tester.pumpAndSettle();
+}
+
+class _MineWalletCommerceRepository implements CommerceRepository {
+  const _MineWalletCommerceRepository();
+
+  @override
+  Future<WalletSnapshot> fetchWallet() async {
+    return const WalletSnapshot(
+      wallet: CoinWallet(
+        coinBalance: 320,
+        totalRechargedCoin: 500,
+        totalConsumedCoin: 180,
+        totalRefundedCoin: 0,
+      ),
+    );
+  }
+
+  @override
+  Future<UnlockResult> unlock(String episodeId) async {
+    return const UnlockResult(
+      unlocked: true,
+      accessType: 'UNLOCKED',
+      coinCost: 0,
+      coinBalance: 320,
+    );
+  }
+}
diff --git a/test/notice/notices_entry_test.dart b/test/notice/notices_entry_test.dart
index 5515a63..f9de1bf 100644
--- a/test/notice/notices_entry_test.dart
+++ b/test/notice/notices_entry_test.dart
@@ -17,7 +17,7 @@ import '../support/fake_notice_repository.dart';
 import '../support/widget_player.dart';
 
 void main() {
-  testWidgets('should_open_notices_from_mine_menu_without_login_gate', (
+  testWidgets('should_open_notices_from_settings_without_login_gate', (
     tester,
   ) async {
     SharedPreferencesAsyncPlatform.instance =
@@ -46,9 +46,11 @@ void main() {
     await tester.pumpAndSettle();
     await tester.tap(find.byKey(const Key('tab-mine')));
     await tester.pumpAndSettle();
-    await tester.ensureVisible(find.byKey(const Key('mine-notices')));
+    await tester.ensureVisible(find.byKey(const Key('mine-settings')));
     await tester.pumpAndSettle();
-    await tester.tap(find.byKey(const Key('mine-notices')));
+    await tester.tap(find.byKey(const Key('mine-settings')));
+    await tester.pumpAndSettle();
+    await tester.tap(find.byKey(const Key('settings-notices')));
     await tester.pumpAndSettle();
 
     expect(find.byKey(const Key('notices-page')), findsOneWidget);
diff --git a/test/notice/notices_page_test.dart b/test/notice/notices_page_test.dart
index 8ec1a6b..d257b4f 100644
--- a/test/notice/notices_page_test.dart
+++ b/test/notice/notices_page_test.dart
@@ -24,9 +24,10 @@ void main() {
     await _pump(tester, repository);
 
     expect(find.text('Notice 1'), findsOneWidget);
-    expect(find.byKey(const Key('notices-load-more')), findsOneWidget);
-
-    await tester.tap(find.byKey(const Key('notices-load-more')));
+    await tester.drag(
+      find.byKey(const Key('notices-list')),
+      const Offset(0, -300),
+    );
     await tester.pumpAndSettle();
 
     expect(find.text('Notice 3'), findsOneWidget);
diff --git a/test/playback/playback_position_cache_test.dart b/test/playback/playback_position_cache_test.dart
new file mode 100644
index 0000000..447a013
--- /dev/null
+++ b/test/playback/playback_position_cache_test.dart
@@ -0,0 +1,105 @@
+// Author: fruit.com.cn
+
+import 'package:flutter_test/flutter_test.dart';
+import 'package:fruitshorts/core/data/services/playback_position_cache.dart';
+
+void main() {
+  test('should_clamp_invalid_or_out_of_range_position_when_caching', () {
+    expect(
+      clampPlaybackPosition(
+        const Duration(seconds: -1),
+        const Duration(seconds: 10),
+      ),
+      Duration.zero,
+    );
+    expect(
+      clampPlaybackPosition(
+        const Duration(seconds: 12),
+        const Duration(seconds: 10),
+      ),
+      const Duration(seconds: 10),
+    );
+    expect(
+      clampPlaybackPosition(
+        const Duration(seconds: 5),
+        const Duration(seconds: 10),
+      ),
+      const Duration(seconds: 5),
+    );
+
+    final cache = PlaybackPositionCache();
+    cache.save(
+      episodeId: 'episode-3',
+      dramaId: 'drama-a',
+      position: const Duration(minutes: 4),
+      duration: const Duration(minutes: 3),
+    );
+    expect(
+      cache.read('episode-3', dramaId: 'drama-a')?.position,
+      const Duration(minutes: 3),
+    );
+  });
+
+  test('should_store_and_read_recent_position_when_drama_matches', () {
+    final now = DateTime(2026, 10, 22, 12);
+    final cache = PlaybackPositionCache(now: () => now);
+
+    cache.save(
+      episodeId: 'episode-3',
+      dramaId: 'drama-a',
+      position: const Duration(minutes: 1, seconds: 20),
+      duration: const Duration(minutes: 3),
+    );
+
+    final entry = cache.read('episode-3', dramaId: 'drama-a');
+    expect(entry, isNotNull);
+    expect(entry!.position, const Duration(minutes: 1, seconds: 20));
+    expect(entry.duration, const Duration(minutes: 3));
+    expect(entry.updatedAt, now);
+  });
+
+  test('should_reject_cached_position_when_drama_does_not_match', () {
+    final cache = PlaybackPositionCache();
+    cache.save(
+      episodeId: 'episode-3',
+      dramaId: 'drama-a',
+      position: const Duration(seconds: 80),
+      duration: const Duration(minutes: 3),
+    );
+
+    expect(cache.read('episode-3', dramaId: 'drama-b'), isNull);
+  });
+
+  test('should_use_latest_saved_episode_when_timestamps_match', () {
+    final now = DateTime(2026, 10, 22, 12);
+    final cache = PlaybackPositionCache(now: () => now);
+    cache.save(
+      episodeId: 'episode-1',
+      dramaId: 'drama-a',
+      position: const Duration(seconds: 30),
+      duration: const Duration(minutes: 3),
+    );
+    cache.save(
+      episodeId: 'episode-2',
+      dramaId: 'drama-a',
+      position: const Duration(seconds: 45),
+      duration: const Duration(minutes: 3),
+    );
+
+    expect(cache.latestForDrama('drama-a')?.episodeId, 'episode-2');
+  });
+
+  test('should_reject_expired_cached_position', () {
+    var now = DateTime(2026, 10, 22, 12);
+    final cache = PlaybackPositionCache(now: () => now);
+    cache.save(
+      episodeId: 'episode-3',
+      dramaId: 'drama-a',
+      position: const Duration(seconds: 80),
+      duration: const Duration(minutes: 3),
+    );
+    now = now.add(const Duration(days: 1));
+
+    expect(cache.read('episode-3', dramaId: 'drama-a'), isNull);
+  });
+}
diff --git a/test/playback/playback_thumbnail_service_test.dart b/test/playback/playback_thumbnail_service_test.dart
new file mode 100644
index 0000000..c04fd86
--- /dev/null
+++ b/test/playback/playback_thumbnail_service_test.dart
@@ -0,0 +1,227 @@
+// Author: fruit.com.cn
+
+import 'dart:async';
+import 'dart:typed_data';
+
+import 'package:flutter_test/flutter_test.dart';
+import 'package:fruitshorts/core/data/services/playback_thumbnail_service.dart';
+
+void main() {
+  test('should_bucket_thumbnail_requests_by_whole_seconds', () {
+    expect(playbackThumbnailBucket(Duration.zero), 0);
+    expect(playbackThumbnailBucket(const Duration(milliseconds: 1999)), 1);
+    expect(playbackThumbnailBucket(const Duration(seconds: 12)), 12);
+    expect(playbackThumbnailBucket(const Duration(milliseconds: -300)), 0);
+  });
+
+  test('should_return_injected_frame_from_loader', () async {
+    final loader = _RecordingLoader((_) async => ByteData(1));
+    final frame = await loader.load(
+      const PlaybackThumbnailFrameRequest(
+        episodeId: 'episode',
+        position: Duration(seconds: 1),
+        source: PlaybackThumbnailSource(remoteUrl: 'https://example/video.mp4'),
+      ),
+    );
+    expect(frame, isNotNull);
+  });
+
+  test('should_evict_least_recently_used_frame_after_24_entries', () async {
+    final loader = _RecordingLoader((_) async => ByteData(1));
+    final service = _service(loader);
+    addTearDown(service.dispose);
+
+    for (var second = 0; second < 25; second++) {
+      final frame = await service.thumbnail(
+        'episode',
+        Duration(seconds: second),
+      );
+      expect(
+        frame,
+        isNotNull,
+        reason: 'bucket $second loader=${loader.buckets}',
+      );
+    }
+    expect(service.cacheSize, 24);
+    expect(loader.buckets.first, 0);
+
+    await service.thumbnail('episode', const Duration(seconds: 1));
+    expect(loader.buckets.where((bucket) => bucket == 1), hasLength(1));
+
+    await service.thumbnail('episode', Duration.zero);
+    expect(loader.buckets.where((bucket) => bucket == 0), hasLength(2));
+  });
+
+  test('should_coalesce_same_bucket_while_frame_is_in_flight', () async {
+    final frame = Completer<ByteData?>();
+    final loader = _RecordingLoader((_) => frame.future);
+    final service = _service(loader);
+    addTearDown(service.dispose);
+
+    final first = service.thumbnail('episode', const Duration(seconds: 8));
+    await Future<void>.delayed(Duration.zero);
+    final second = service.thumbnail(
+      'episode',
+      const Duration(milliseconds: 8999),
+    );
+
+    expect(identical(first, second), isTrue);
+    expect(loader.buckets, [8]);
+    frame.complete(ByteData(2));
+    expect(await first, isNotNull);
+    expect(await second, isNotNull);
+  });
+
+  test('should_drop_superseded_request_and_start_latest_bucket', () async {
+    final frames = <int, Completer<ByteData?>>{};
+    final loader = _RecordingLoader((request) {
+      final completer = Completer<ByteData?>();
+      frames[request.position.inSeconds] = completer;
+      return completer.future;
+    });
+    final service = _service(loader);
+    addTearDown(service.dispose);
+
+    final stale = service.thumbnail('episode', const Duration(seconds: 4));
+    await Future<void>.delayed(Duration.zero);
+    final latest = service.thumbnail('episode', const Duration(seconds: 9));
+    await Future<void>.delayed(Duration.zero);
+
+    expect(loader.buckets, [4]);
+    frames[4]!.complete(ByteData(4));
+    expect(await stale, isNull);
+    await Future<void>.delayed(Duration.zero);
+    expect(loader.buckets, [4, 9]);
+
+    frames[9]!.complete(ByteData(9));
+    expect(await latest, isNotNull);
+  });
+
+  test('should_cancel_unstarted_request_when_scrub_ends', () async {
+    final firstFrame = Completer<ByteData?>();
+    final loader = _RecordingLoader((request) {
+      if (request.position.inSeconds == 3) return firstFrame.future;
+      return Future<ByteData?>.value(ByteData(7));
+    });
+    final service = _service(loader);
+    addTearDown(service.dispose);
+
+    final active = service.thumbnail('episode', const Duration(seconds: 3));
+    await Future<void>.delayed(Duration.zero);
+    final pending = service.thumbnail('episode', const Duration(seconds: 7));
+    service.cancelPending();
+
+    expect(await pending, isNull);
+    firstFrame.complete(ByteData(3));
+    expect(await active, isNull);
+    await Future<void>.delayed(Duration.zero);
+    expect(loader.buckets, [3]);
+  });
+
+  test('should_prefetch_one_neighbor_after_scrub_pause', () async {
+    final loader = _RecordingLoader((_) async => ByteData(1));
+    final service = _service(
+      loader,
+      prefetchDelay: const Duration(milliseconds: 10),
+    );
+    addTearDown(service.dispose);
+
+    await service.thumbnail('episode', const Duration(seconds: 5));
+    expect(loader.buckets, [5]);
+
+    await Future<void>.delayed(const Duration(milliseconds: 5));
+    expect(loader.buckets, [5]);
+
+    await Future<void>.delayed(const Duration(milliseconds: 12));
+    expect(loader.buckets, [5, 6]);
+  });
+
+  test('should_not_prefetch_over_newer_unstarted_bucket', () async {
+    final frames = <int, Completer<ByteData?>>{};
+    final loader = _RecordingLoader((request) {
+      final completer = Completer<ByteData?>();
+      frames[request.position.inSeconds] = completer;
+      return completer.future;
+    });
+    final service = _service(
+      loader,
+      prefetchDelay: const Duration(milliseconds: 10),
+    );
+    addTearDown(service.dispose);
+
+    final first = service.thumbnail('episode', const Duration(seconds: 1));
+    await Future<void>.delayed(Duration.zero);
+    final latest = service.thumbnail('episode', const Duration(seconds: 3));
+    await Future<void>.delayed(const Duration(milliseconds: 20));
+
+    expect(loader.buckets, [1]);
+    frames[1]!.complete(ByteData(1));
+    expect(await first, isNull);
+    await Future<void>.delayed(Duration.zero);
+    expect(loader.buckets, [1, 3]);
+
+    frames[3]!.complete(ByteData(3));
+    expect(await latest, isNotNull);
+  });
+
+  test('should_return_null_once_then_negative_cache_failed_bucket', () async {
+    final loader = _RecordingLoader((_) => Completer<ByteData?>().future);
+    final service = _service(
+      loader,
+      requestTimeout: const Duration(milliseconds: 10),
+    );
+    addTearDown(service.dispose);
+
+    expect(
+      await service.thumbnail('episode', const Duration(seconds: 2)),
+      isNull,
+    );
+    expect(
+      await service.thumbnail('episode', const Duration(seconds: 2)),
+      isNull,
+    );
+    expect(loader.buckets, [2]);
+  });
+
+  test('should_convert_loader_exception_to_null', () async {
+    final loader = _RecordingLoader((_) async => throw StateError('decode'));
+    final service = _service(loader);
+    addTearDown(service.dispose);
+
+    expect(
+      await service.thumbnail('episode', const Duration(seconds: 6)),
+      isNull,
+    );
+  });
+}
+
+PlaybackThumbnailService _service(
+  PlaybackThumbnailFrameLoader loader, {
+  Duration requestTimeout = const Duration(hours: 1),
+  Duration prefetchDelay = const Duration(hours: 1),
+}) {
+  return PlaybackThumbnailService(
+    frameLoader: loader,
+    sourceResolver: (_) =>
+        const PlaybackThumbnailSource(remoteUrl: 'https://example/video.mp4'),
+    requestTimeout: requestTimeout,
+    prefetchDelay: prefetchDelay,
+  );
+}
+
+class _RecordingLoader implements PlaybackThumbnailFrameLoader {
+  _RecordingLoader(this._handler);
+
+  final Future<ByteData?> Function(PlaybackThumbnailFrameRequest request)
+  _handler;
+  final List<int> buckets = [];
+
+  @override
+  Future<ByteData?> load(PlaybackThumbnailFrameRequest request) {
+    buckets.add(request.position.inSeconds);
+    return _handler(request);
+  }
+
+  @override
+  void dispose() {}
+}
diff --git a/test/playback/seek_progress_bar_test.dart b/test/playback/seek_progress_bar_test.dart
index 860423f..d4a2f02 100644
--- a/test/playback/seek_progress_bar_test.dart
+++ b/test/playback/seek_progress_bar_test.dart
@@ -1,7 +1,12 @@
 // Author: fruit.com.cn
 
+import 'dart:typed_data';
+
 import 'package:flutter/material.dart';
 import 'package:flutter_test/flutter_test.dart';
+import 'package:fruitshorts/core/data/services/playback_thumbnail_service.dart';
+import 'package:fruitshorts/core/theme/app_colors.dart';
+import 'package:fruitshorts/pages/player/widgets/scrub_preview_card.dart';
 import 'package:fruitshorts/pages/player/widgets/seek_progress_bar.dart';
 import 'package:video_player/video_player.dart';
 
@@ -16,24 +21,82 @@ void main() {
     expect(seekPositionForFraction(1, duration), lessThan(duration));
   });
 
-  testWidgets('should_show_loading_track_when_controller_is_missing', (
+  test('should_clamp_preview_card_inside_track_safe_margins', () {
+    expect(
+      scrubPreviewLeft(trackWidth: 300, fraction: 0),
+      scrubPreviewSafeMargin,
+    );
+    expect(
+      scrubPreviewLeft(trackWidth: 300, fraction: 1),
+      300 - scrubPreviewWidth - scrubPreviewSafeMargin,
+    );
+    expect(scrubPreviewLeft(trackWidth: 100, fraction: 0.5), 0);
+  });
+
+  testWidgets('should_show_inactive_track_when_video_is_not_initialized', (
     tester,
   ) async {
+    final video = ValueNotifier<VideoPlayerValue>(
+      const VideoPlayerValue.uninitialized(),
+    );
+    addTearDown(video.dispose);
     await tester.pumpWidget(
       MaterialApp(
         home: Scaffold(
           body: SeekProgressBar(
-            valueListenable: null,
+            valueListenable: video,
             semanticsLabel: 'Seek video',
           ),
         ),
       ),
     );
 
-    expect(find.byKey(const Key('progress-loading')), findsOneWidget);
+    expect(find.byKey(const Key('progress-loading')), findsNothing);
+    expect(find.byKey(const Key('progress-inactive')), findsOneWidget);
     expect(find.byType(Slider), findsNothing);
   });
 
+  testWidgets('should_show_inactive_track_and_disable_seek_when_locked', (
+    tester,
+  ) async {
+    final video = ValueNotifier<VideoPlayerValue>(
+      const VideoPlayerValue(
+        duration: Duration(seconds: 12),
+        position: Duration(seconds: 3),
+        isInitialized: true,
+      ),
+    );
+    addTearDown(video.dispose);
+    var seeks = 0;
+    await tester.pumpWidget(
+      MaterialApp(
+        home: Scaffold(
+          body: SeekProgressBar(
+            valueListenable: video,
+            semanticsLabel: 'Seek video',
+            locked: true,
+            onSeek: (_) async => seeks++,
+          ),
+        ),
+      ),
+    );
+
+    expect(find.byKey(const Key('progress-loading')), findsNothing);
+    expect(find.byKey(const Key('progress-loading-highlight')), findsNothing);
+    expect(find.byType(Slider), findsNothing);
+    final inactive = tester.widget<ColoredBox>(
+      find.byKey(const Key('progress-inactive')),
+    );
+    expect(inactive.color, AppColors.border);
+
+    await tester.drag(
+      find.byKey(const Key('progress-inactive')),
+      const Offset(120, 0),
+    );
+    await tester.pumpAndSettle();
+    expect(seeks, 0);
+  });
+
   testWidgets('should_debounce_buffering_before_showing_loading_track', (
     tester,
   ) async {
@@ -186,6 +249,59 @@ void main() {
     },
   );
 
+  testWidgets('should_show_frame_card_with_cover_then_hide_on_release', (
+    tester,
+  ) async {
+    final video = ValueNotifier<VideoPlayerValue>(
+      const VideoPlayerValue(
+        duration: Duration(seconds: 12),
+        position: Duration(seconds: 3),
+        isInitialized: true,
+      ),
+    );
+    final service = _thumbnailService();
+    addTearDown(video.dispose);
+    addTearDown(service.dispose);
+    await tester.pumpWidget(
+      MaterialApp(
+        home: Scaffold(
+          body: Center(
+            child: SizedBox(
+              width: 300,
+              child: SeekProgressBar(
+                valueListenable: video,
+                semanticsLabel: 'Seek video',
+                episodeId: 'episode-1',
+                posterUrl: '',
+                thumbnailService: service,
+                onSeek: (_) async {},
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+
+    final gesture = await tester.startGesture(
+      tester.getCenter(find.byType(Slider)),
+    );
+    await gesture.moveBy(const Offset(80, 0));
+    await tester.pump();
+
+    expect(find.byKey(const Key('scrub-preview-card')), findsOneWidget);
+    expect(find.byKey(const Key('scrub-preview-poster')), findsOneWidget);
+    expect(find.byKey(const Key('scrub-preview-frame')), findsNothing);
+    expect(find.textContaining('/ 00:12'), findsOneWidget);
+    expect(
+      tester.getSize(find.byKey(const Key('scrub-preview-card'))).width,
+      96,
+    );
+
+    await gesture.up();
+    await tester.pump();
+    expect(find.byKey(const Key('scrub-preview-card')), findsNothing);
+  });
+
   testWidgets('should_show_time_only_while_dragging_when_seek_bar_is_compact', (
     tester,
   ) async {
@@ -220,3 +336,20 @@ void main() {
     expect(find.textContaining('00:12'), findsNothing);
   });
 }
+
+PlaybackThumbnailService _thumbnailService() {
+  return PlaybackThumbnailService(
+    frameLoader: _NullThumbnailLoader(),
+    sourceResolver: (_) =>
+        const PlaybackThumbnailSource(remoteUrl: 'https://example/video.mp4'),
+    prefetchDelay: const Duration(hours: 1),
+  );
+}
+
+class _NullThumbnailLoader implements PlaybackThumbnailFrameLoader {
+  @override
+  Future<ByteData?> load(PlaybackThumbnailFrameRequest request) async => null;
+
+  @override
+  void dispose() {}
+}
diff --git a/test/playback/sprite_thumbnail_axis_test.dart b/test/playback/sprite_thumbnail_axis_test.dart
new file mode 100644
index 0000000..663225b
--- /dev/null
+++ b/test/playback/sprite_thumbnail_axis_test.dart
@@ -0,0 +1,233 @@
+// Author: fruit.com.cn
+
+import 'dart:ui' as ui;
+
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:fruitshorts/core/data/models/drama.dart';
+import 'package:fruitshorts/core/data/models/play_ticket.dart';
+import 'package:fruitshorts/core/data/services/sprite_thumbnail_asset_loader.dart';
+import 'package:fruitshorts/core/data/services/sprite_thumbnail_axis.dart';
+
+const String _spriteVtt = '''
+WEBVTT
+
+00:00:00.000 --> 00:00:01.000
+sprite_001.jpg#xywh=0,0,160,90
+
+00:00:01.000 --> 00:00:02.000
+sprite_001.jpg#xywh=160,0,160,90
+
+00:00:02.000 --> 00:00:03.000
+sprite_002.jpg#xywh=0,0,160,90
+
+00:00:03.000 --> 00:00:04.000
+sprite_003.jpg#xywh=0,0,160,90
+''';
+
+void main() {
+  test('should_parse_cue_times_xywh_and_multiple_sprite_files', () {
+    final axis = parseSpriteThumbnailVtt(
+      _spriteVtt,
+      vttUrl: 'https://cdn.test/transcoded/thumbnails.vtt?e=1&s=x',
+    );
+
+    expect(axis.cues, hasLength(4));
+    expect(axis.cues.first.start, Duration.zero);
+    expect(axis.cues.first.end, const Duration(seconds: 1));
+    expect(axis.cues.first.spriteFile, 'sprite_001.jpg');
+    expect(axis.cues.first.sourceRect, const Rect.fromLTWH(0, 0, 160, 90));
+    expect(axis.cues[1].sourceRect, const Rect.fromLTWH(160, 0, 160, 90));
+    expect(axis.cues[2].spriteFile, 'sprite_002.jpg');
+    expect(axis.cues[3].spriteFile, 'sprite_003.jpg');
+    expect(
+      axis.resolveSpriteUri(axis.cues[2].spriteFile).toString(),
+      'https://cdn.test/transcoded/sprite_002.jpg',
+    );
+  });
+
+  test('should_select_cue_and_use_nearest_when_position_is_out_of_range', () {
+    final cues = parseSpriteThumbnailVtt(
+      _spriteVtt,
+      vttUrl: 'https://cdn.test/thumbnails.vtt',
+    ).cues;
+
+    expect(
+      selectSpriteThumbnailCue(cues, const Duration(milliseconds: 1500)),
+      same(cues[1]),
+    );
+    expect(
+      selectSpriteThumbnailCue(cues, const Duration(seconds: -1)),
+      same(cues[0]),
+    );
+    expect(
+      selectSpriteThumbnailCue(cues, const Duration(seconds: 9)),
+      same(cues[3]),
+    );
+  });
+
+  test('should_return_empty_axis_when_vtt_cannot_be_parsed', () {
+    final axis = parseSpriteThumbnailVtt(
+      'not-a-valid-vtt',
+      vttUrl: 'https://cdn.test/broken.vtt',
+    );
+
+    expect(axis.cues, isEmpty);
+  });
+
+  testWidgets('should_keep_only_two_decoded_sprites_in_lru', (tester) async {
+    final loader = _FakeSpriteLoader(vtt: _spriteVtt);
+    final service = SpriteThumbnailAxisService(
+      loader: loader,
+      cacheTtl: const Duration(minutes: 10),
+    );
+    addTearDown(service.dispose);
+
+    await service.prepareAt('https://cdn.test/thumbnails.vtt', Duration.zero);
+    expect(service.spriteCacheSize, 2);
+    expect(
+      service.spriteCacheKeys,
+      containsAll(['sprite_001.jpg', 'sprite_002.jpg']),
+    );
+
+    await service.prepareAt(
+      'https://cdn.test/thumbnails.vtt',
+      const Duration(milliseconds: 2500),
+    );
+
+    expect(service.spriteCacheSize, 2);
+    expect(service.spriteCacheKeys, contains('sprite_002.jpg'));
+    expect(service.spriteCacheKeys, isNot(contains('sprite_001.jpg')));
+  });
+
+  testWidgets('should_cache_vtt_and_retry_once_after_403', (tester) async {
+    final loader = _FakeSpriteLoader(
+      vttResponses: const [SpriteThumbnailForbiddenException(), _spriteVtt],
+    );
+    final service = SpriteThumbnailAxisService(loader: loader);
+    addTearDown(service.dispose);
+
+    await service.prepareAt('https://cdn.test/thumbnails.vtt', Duration.zero);
+    await service.prepareAt('https://cdn.test/thumbnails.vtt', Duration.zero);
+
+    expect(loader.vttCalls, 2);
+    expect(service.hasAxis('https://cdn.test/thumbnails.vtt'), isTrue);
+  });
+
+  testWidgets('should_refresh_vtt_after_ten_minute_ttl', (tester) async {
+    var now = DateTime(2026, 10, 22);
+    final loader = _FakeSpriteLoader(vtt: _spriteVtt);
+    final service = SpriteThumbnailAxisService(loader: loader, now: () => now);
+    addTearDown(service.dispose);
+
+    await service.prepareAt('https://cdn.test/thumbnails.vtt', Duration.zero);
+    now = now.add(const Duration(minutes: 11));
+    await service.prepareAt('https://cdn.test/thumbnails.vtt', Duration.zero);
+
+    expect(loader.vttCalls, 2);
+  });
+
+  test('should_resolve_fallback_chain_in_priority_order', () {
+    expect(
+      decideScrubPreviewStage(
+        hasThumbnailsUrl: true,
+        hasSpriteFrame: true,
+        hasAxis: true,
+        hasLocalFrame: true,
+      ),
+      ScrubPreviewStage.sprite,
+    );
+    expect(
+      decideScrubPreviewStage(
+        hasThumbnailsUrl: true,
+        hasSpriteFrame: false,
+        hasAxis: false,
+        hasLocalFrame: true,
+      ),
+      ScrubPreviewStage.waitingForAxis,
+    );
+    expect(
+      decideScrubPreviewStage(
+        hasThumbnailsUrl: false,
+        hasSpriteFrame: false,
+        hasAxis: false,
+        hasLocalFrame: true,
+      ),
+      ScrubPreviewStage.localFrame,
+    );
+    expect(
+      decideScrubPreviewStage(
+        hasThumbnailsUrl: true,
+        hasSpriteFrame: false,
+        hasAxis: true,
+        hasLocalFrame: false,
+      ),
+      ScrubPreviewStage.cover,
+    );
+  });
+
+  test('should_parse_thumbnails_url_from_episode_and_ticket', () {
+    final episode = Episode.fromJson(const {
+      'id': '11',
+      'number': 1,
+      'title': 'episode',
+      'isFree': true,
+      'thumbnailsUrl': 'https://cdn.test/thumbnails.vtt?e=1&s=x',
+    });
+    final ticket = PlayTicket.fromJson(const {
+      'episodeId': '11',
+      'accessible': true,
+      'accessType': 'FREE',
+      'thumbnailsUrl': 'https://cdn.test/thumbnails.vtt?e=1&s=x',
+    });
+
+    expect(episode.thumbnailsUrl, ticket.thumbnailsUrl);
+    expect(
+      episode.withVideoUrl('file:///video.mp4').thumbnailsUrl,
+      episode.thumbnailsUrl,
+    );
+  });
+}
+
+class _FakeSpriteLoader implements SpriteThumbnailAssetLoader {
+  _FakeSpriteLoader({this.vtt, this.vttResponses});
+
+  final String? vtt;
+  final List<Object>? vttResponses;
+  int vttCalls = 0;
+  final List<String> spriteCalls = [];
+
+  @override
+  Future<String?> loadVtt(Uri uri) async {
+    final index = vttCalls++;
+    final responses = vttResponses;
+    if (responses == null) return vtt;
+    final response = responses[index.clamp(0, responses.length - 1)];
+    if (response is SpriteThumbnailForbiddenException) throw response;
+    return response as String;
+  }
+
+  @override
+  Future<SpriteThumbnailDecodedImage?> loadSprite(Uri uri) async {
+    spriteCalls.add(uri.pathSegments.last);
+    final image = await _createImage(320, 180);
+    return SpriteThumbnailDecodedImage(
+      image: image,
+      originalWidth: 320,
+      originalHeight: 180,
+    );
+  }
+}
+
+Future<ui.Image> _createImage(int width, int height) async {
+  final recorder = ui.PictureRecorder();
+  final canvas = Canvas(recorder);
+  canvas.drawRect(
+    Rect.fromLTWH(0, 0, width.toDouble(), height.toDouble()),
+    Paint()..color = Colors.blue,
+  );
+  final picture = recorder.endRecording();
+  final image = await picture.toImage(width, height);
+  picture.dispose();
+  return image;
+}
diff --git a/test/player/double_tap_like_test.dart b/test/player/double_tap_like_test.dart
new file mode 100644
index 0000000..b1f5ad6
--- /dev/null
+++ b/test/player/double_tap_like_test.dart
@@ -0,0 +1,188 @@
+// Author: fruit.com.cn
+
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:fruitshorts/core/data/services/interaction_controller.dart';
+import 'package:fruitshorts/core/theme/app_theme.dart';
+import 'package:fruitshorts/l10n/app_localizations.dart';
+import 'package:fruitshorts/pages/player/widgets/home_feed_overlay.dart';
+
+import '../support/fake_catalog.dart';
+import '../support/fake_haptics.dart';
+import '../support/fake_interaction_repositories.dart';
+
+void main() {
+  testWidgets('double tap within 320ms never pauses', (tester) async {
+    for (final delay in [120, 250, 300]) {
+      final repository = FakeInteractionRepository();
+      final haptics = FakeHaptics();
+      final key = GlobalKey<_HarnessState>();
+      final clock = _TestClock();
+      await _pumpHarness(tester, repository, haptics, key, clock);
+
+      final center = tester.getCenter(
+        find.byKey(const Key('home-feed-gesture')),
+      );
+      await tester.tapAt(center);
+      clock.advance(Duration(milliseconds: delay));
+      await tester.pump(Duration(milliseconds: delay));
+      await tester.tapAt(center);
+      await tester.pump();
+      clock.advance(const Duration(milliseconds: 500));
+      await tester.pump(const Duration(milliseconds: 500));
+
+      expect(
+        key.currentState!.pauseToggles,
+        0,
+        reason: 'double tap with $delay ms gap paused playback',
+      );
+      expect(repository.likeTargets, hasLength(1));
+      expect(haptics.lightImpacts, 1);
+      expect(
+        find.descendant(
+          of: find.byKey(const Key('rail-like')),
+          matching: find.byIcon(Icons.favorite_rounded),
+        ),
+        findsOneWidget,
+      );
+      await tester.pumpAndSettle();
+    }
+  });
+
+  testWidgets('taps 500ms apart toggle playback twice', (tester) async {
+    final key = GlobalKey<_HarnessState>();
+    final clock = _TestClock();
+    await _pumpHarness(
+      tester,
+      FakeInteractionRepository(),
+      FakeHaptics(),
+      key,
+      clock,
+    );
+
+    await tester.tapAt(
+      tester.getCenter(find.byKey(const Key('home-feed-gesture'))),
+    );
+    clock.advance(const Duration(milliseconds: 500));
+    await tester.pump(const Duration(milliseconds: 500));
+    expect(key.currentState!.pauseToggles, 1);
+
+    await tester.tapAt(
+      tester.getCenter(find.byKey(const Key('home-feed-gesture'))),
+    );
+    clock.advance(const Duration(milliseconds: 500));
+    await tester.pump(const Duration(milliseconds: 500));
+    expect(key.currentState!.pauseToggles, 2);
+  });
+}
+
+Future<void> _pumpHarness(
+  WidgetTester tester,
+  FakeInteractionRepository repository,
+  FakeHaptics haptics,
+  GlobalKey<_HarnessState> key,
+  _TestClock clock,
+) async {
+  await tester.pumpWidget(
+    MaterialApp(
+      theme: AppTheme.dark(),
+      locale: const Locale('en'),
+      supportedLocales: AppLocalizations.supportedLocales,
+      localizationsDelegates: AppLocalizations.localizationsDelegates,
+      home: _Harness(
+        key: key,
+        repository: repository,
+        haptics: haptics,
+        clock: clock,
+      ),
+    ),
+  );
+  await tester.pumpAndSettle();
+}
+
+class _Harness extends StatefulWidget {
+  const _Harness({
+    super.key,
+    required this.repository,
+    required this.haptics,
+    required this.clock,
+  });
+
+  final FakeInteractionRepository repository;
+  final FakeHaptics haptics;
+  final _TestClock clock;
+
+  @override
+  State<_Harness> createState() => _HarnessState();
+}
+
+class _HarnessState extends State<_Harness> {
+  late final InteractionController interactions = InteractionController(
+    widget.repository,
+  );
+  int pauseToggles = 0;
+
+  Future<void> _like({bool likeOnly = false}) async {
+    await widget.haptics.lightImpact();
+    final episodeId = demoDramas.first.episodes.first.id;
+    if (interactions.isEpisodeBusy(episodeId) ||
+        (likeOnly && interactions.isEpisodeLiked(episodeId))) {
+      return;
+    }
+    await interactions.toggleEpisodeLike(episodeId);
+  }
+
+  @override
+  void dispose() {
+    interactions.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final l10n = AppLocalizations.of(context)!;
+    return Scaffold(
+      backgroundColor: Colors.black,
+      body: ListenableBuilder(
+        listenable: interactions,
+        builder: (context, _) {
+          final episode = demoDramas.first.episodes.first;
+          return HomeFeedOverlay(
+            l10n: l10n,
+            drama: demoDramas.first,
+            episode: episode,
+            controller: null,
+            locked: false,
+            liked: interactions.isEpisodeLiked(episode.id),
+            likeCount: interactions.episodeLikeCount(episode.id),
+            saved: false,
+            visible: true,
+            boosting: false,
+            onLike: () => _like(),
+            onDoubleTapLike: (_) => _like(likeOnly: true),
+            now: widget.clock.now,
+            onSave: () {},
+            onComments: () {},
+            onShare: () {},
+            onDetail: () {},
+            onOpenFullPlayer: () {},
+            onTogglePlay: () => setState(() => pauseToggles++),
+            onBoostStart: () {},
+            onBoostEnd: () {},
+            onMore: () {},
+          );
+        },
+      ),
+    );
+  }
+}
+
+class _TestClock {
+  DateTime _now = DateTime(2026, 10, 22, 12);
+
+  DateTime now() => _now;
+
+  void advance(Duration duration) {
+    _now = _now.add(duration);
+  }
+}
diff --git a/test/player/loading_progress_track_test.dart b/test/player/loading_progress_track_test.dart
index cacf042..090ead8 100644
--- a/test/player/loading_progress_track_test.dart
+++ b/test/player/loading_progress_track_test.dart
@@ -29,7 +29,7 @@ void main() {
       tester
           .widget<ColoredBox>(find.byKey(const Key('progress-loading-track')))
           .color,
-      Colors.white24,
+      AppColors.inactiveTrack,
     );
     expect(
       tester
@@ -37,7 +37,7 @@ void main() {
             find.byKey(const Key('progress-loading-highlight')),
           )
           .color,
-      AppColors.blue,
+      AppColors.onPrimary,
     );
 
     final initialLeft = tester
diff --git a/test/player/player_fullscreen_test.dart b/test/player/player_fullscreen_test.dart
index 8b763c8..6eb8625 100644
--- a/test/player/player_fullscreen_test.dart
+++ b/test/player/player_fullscreen_test.dart
@@ -19,6 +19,7 @@ import 'package:fruitshorts/core/data/repositories/watch_history_repository.dart
 import 'package:fruitshorts/core/data/services/playback_session.dart';
 import 'package:fruitshorts/core/theme/app_colors.dart';
 import 'package:fruitshorts/pages/auth/auth_view.dart';
+import 'package:fruitshorts/pages/player/player_view.dart';
 import 'package:fruitshorts/pages/player/widgets/player_center_toggle.dart';
 import 'package:fruitshorts/pages/player/widgets/seek_progress_bar.dart';
 
@@ -35,23 +36,21 @@ void main() {
         InMemorySharedPreferencesAsync.empty();
   });
 
-  testWidgets('should_open_fullscreen_overlay_from_discover_card', (
+  testWidgets('should_render_immersive_overlay_in_recommend_feed', (
     tester,
   ) async {
     await _pumpApp(tester);
-    await tester.tap(find.byKey(const Key('tab-theater')));
-    await tester.pumpAndSettle();
-    await tester.tap(find.byKey(const Key('home-drama-card-city-lights-demo')));
+    await tester.tap(find.byKey(const Key('tab-recommend')));
     await tester.pumpAndSettle();
 
-    _expectFullscreenOverlay(tester);
+    expect(find.byKey(const Key('recommend-feed-player')), findsOneWidget);
+    expect(
+      tester
+          .widget<PlayerPage>(find.byKey(const Key('recommend-feed-player')))
+          .homeMode,
+      isTrue,
+    );
     expect(find.byType(PageView), findsOneWidget);
-    await tester.tap(find.byKey(const Key('player-more')));
-    await tester.pumpAndSettle();
-    expect(find.byKey(const Key('player-more-quality-AUTO')), findsOneWidget);
-    expect(find.byKey(const Key('player-more-offline')), findsOneWidget);
-    await tester.tapAt(const Offset(10, 10));
-    await tester.pumpAndSettle();
     expect(tester.takeException(), isNull);
   });
 
@@ -59,12 +58,58 @@ void main() {
     tester,
   ) async {
     await _pumpApp(tester);
-    _expectPlayerNavigationBar(tester);
+    await tester.tap(find.byKey(const Key('tab-recommend')));
+    await tester.pumpAndSettle();
 
     await _openSeriesPlayer(tester);
     _expectPlayerNavigationBar(tester);
   });
 
+  testWidgets('should_render_player_loading_indicators_at_compact_size', (
+    tester,
+  ) async {
+    final playback = _PendingPlaybackRepository();
+    final initialization = Completer<void>();
+    await _pumpApp(
+      tester,
+      playback: playback,
+      playerFactory: (_) => _GatedPlayer(initialization.future),
+      settle: false,
+    );
+    await tester.pump();
+    await tester.pump(const Duration(milliseconds: 100));
+    await tester.tap(find.byKey(const Key('tab-recommend')));
+    await tester.pump();
+    await tester.pump(const Duration(milliseconds: 100));
+
+    final ticketLoading = find.byKey(const Key('player-ticket-loading'));
+    expect(ticketLoading, findsOneWidget);
+    expect(tester.getSize(ticketLoading), const Size(24, 24));
+    expect(
+      tester.widget<CircularProgressIndicator>(ticketLoading).strokeWidth,
+      2,
+    );
+
+    playback.ticket.complete(
+      const PlayTicket(
+        episodeId: 'city-lights-demo-1',
+        accessible: true,
+        accessType: PlayTicket.free,
+        playUrl: '/files/episode/fake-city.mp4?e=1&s=abc',
+        qualities: ['AUTO'],
+      ),
+    );
+    await tester.pump();
+    await tester.pump(const Duration(milliseconds: 100));
+
+    expect(find.byKey(const Key('player-session-loading')), findsNothing);
+    expect(find.byKey(const Key('progress-loading')), findsNothing);
+
+    initialization.complete();
+    await tester.pumpWidget(const SizedBox.shrink());
+    await tester.pump();
+  });
+
   testWidgets('should_pause_and_resume_player_when_page_route_covers_it', (
     tester,
   ) async {
@@ -80,6 +125,8 @@ void main() {
     await _openSeriesPlayer(tester);
     final player = players.firstWhere((item) => item.playing);
     expect(player.playing, isTrue);
+    expect(find.byKey(const Key('progress-loading')), findsNothing);
+    expect(find.byKey(const Key('progress-inactive')), findsOneWidget);
 
     final navigator = tester.state<NavigatorState>(
       find.byType(Navigator).first,
@@ -100,6 +147,8 @@ void main() {
     await tester.pumpAndSettle();
 
     expect(player.playing, isTrue);
+    expect(find.byKey(const Key('progress-loading')), findsNothing);
+    expect(find.byKey(const Key('progress-inactive')), findsOneWidget);
   });
 
   testWidgets('should_pause_feed_when_auth_page_is_pushed_and_resume_on_pop', (
@@ -114,6 +163,8 @@ void main() {
         return player;
       },
     );
+    await tester.tap(find.byKey(const Key('tab-recommend')));
+    await tester.pumpAndSettle();
     final player = players.firstWhere((item) => item.playing);
     expect(player.playing, isTrue);
 
@@ -168,8 +219,8 @@ void main() {
           'auth.user': '{"uid":"9","nickname":"Viewer","avatarUrl":""}',
         });
     await _pumpApp(tester);
-
-    await tester.tap(find.byKey(const Key('rail-comments')));
+    await _openSeriesPlayer(tester);
+    await tester.tap(find.byKey(const Key('player-rail-comments')));
     await tester.pumpAndSettle();
 
     expect(find.byKey(const Key('player-comments-sheet')), findsOneWidget);
@@ -212,32 +263,6 @@ void main() {
     );
   });
 
-  testWidgets('should_update_home_feed_favorite_count_after_toggle', (
-    tester,
-  ) async {
-    SharedPreferencesAsyncPlatform.instance =
-        InMemorySharedPreferencesAsync.withData({
-          'auth.accessToken': 'access',
-          'auth.refreshToken': 'refresh',
-          'auth.user': '{"uid":"9","nickname":"Viewer","avatarUrl":""}',
-        });
-    final catalog = FakeCatalogRepository(dramas: [_countingDrama]);
-    await _pumpApp(tester, catalog: catalog);
-
-    expect(
-      tester.widget<Text>(find.byKey(const Key('rail-save-count'))).data,
-      '2',
-    );
-
-    await tester.tap(find.byKey(const Key('rail-save')));
-    await tester.pumpAndSettle();
-
-    expect(
-      tester.widget<Text>(find.byKey(const Key('rail-save-count'))).data,
-      '3',
-    );
-  });
-
   testWidgets('should_show_center_toggle_only_when_paused', (tester) async {
     await _pumpApp(tester);
     await _openSeriesPlayer(tester);
@@ -524,7 +549,8 @@ void main() {
       tester.getSize(find.byKey(const Key('player-bottom-clear-screen'))),
       const Size(40, 40),
     );
-    expect(find.byKey(const Key('progress-loading')), findsOneWidget);
+    expect(find.byKey(const Key('progress-loading')), findsNothing);
+    expect(find.byKey(const Key('progress-inactive')), findsOneWidget);
     expect(find.byType(Slider), findsNothing);
 
     expect(bottom.height, lessThanOrEqualTo(200));
@@ -544,14 +570,11 @@ void main() {
       32,
     );
 
-    await tester.tap(find.byKey(const Key('player-synopsis-toggle')));
-    await tester.pumpAndSettle();
-    final expandedBottom = tester.getRect(
+    final bottomPanel = tester.getRect(
       find.byKey(const Key('player-controls-bottom')),
     );
-    // K29.9 展开态展示简介全文，高度会增长，但仍需留在画面下半区。
-    expect(expandedBottom.height, lessThanOrEqualTo(330));
-    expect(expandedBottom.top, greaterThanOrEqualTo(screenHeight * 0.5));
+    expect(bottomPanel.height, lessThanOrEqualTo(330));
+    expect(bottomPanel.top, greaterThanOrEqualTo(screenHeight * 0.5));
     expect(tester.takeException(), isNull);
   });
 
@@ -727,8 +750,33 @@ void main() {
   });
 
   testWidgets('should_toggle_synopsis_with_inline_text_button', (tester) async {
-    await _pumpApp(tester);
-    await _openSeriesPlayer(tester);
+    final longCopy = Drama(
+      id: 'long-copy-demo',
+      title: 'Long Title',
+      synopsis:
+          'A very long synopsis that keeps describing the story far beyond '
+          'the two lines available under the title in the fullscreen player.',
+      posterUrl: '/files/long-copy-demo.png',
+      genre: 'Drama',
+      detailLoaded: true,
+      episodes: const [
+        Episode(
+          id: 'long-copy-demo-1',
+          number: 1,
+          title: 'Episode 1',
+          isFree: true,
+          videoUrl: 'https://example.test/long-demo-1.mp4',
+        ),
+      ],
+    );
+    await _pumpApp(
+      tester,
+      catalog: FakeCatalogRepository(dramas: [longCopy]),
+    );
+    await _openSeriesPlayer(
+      tester,
+      cardKey: const Key('home-feed-card-long-copy-demo'),
+    );
 
     final toggle = find.byKey(const Key('player-synopsis-toggle'));
     final synopsis = find.byKey(const Key('player-synopsis'));
@@ -736,10 +784,26 @@ void main() {
       find.descendant(of: toggle, matching: find.text('More')),
       findsOneWidget,
     );
-    expect(tester.widget<Text>(synopsis).maxLines, 1);
     expect(
-      tester.getRect(toggle).left - tester.getRect(synopsis).right,
-      lessThanOrEqualTo(4),
+      tester
+          .widget<Text>(
+            find.descendant(of: toggle, matching: find.text('More')),
+          )
+          .style
+          ?.color,
+      AppColors.textPrimary,
+    );
+    expect(tester.widget<Text>(synopsis).maxLines, 2);
+    expect(
+      tester.widget<Padding>(find.byKey(const Key('player-synopsis-gap'))).padding,
+      const EdgeInsets.only(left: 6),
+    );
+    final synopsisRect = tester.getRect(synopsis);
+    final toggleRect = tester.getRect(toggle);
+    expect(toggleRect.left, greaterThan(synopsisRect.left));
+    expect(
+      toggleRect.center.dy,
+      greaterThan(synopsisRect.top + synopsisRect.height * 0.45),
     );
 
     await tester.tap(toggle);
@@ -748,7 +812,12 @@ void main() {
       find.descendant(of: toggle, matching: find.text('Less')),
       findsOneWidget,
     );
-    expect(tester.widget<Text>(synopsis).maxLines, isNull);
+    expect(tester.widget<Text>(find.byKey(const Key('player-synopsis'))).maxLines, isNull);
+    final lessRect = tester.getRect(toggle);
+    final textRect = tester.getRect(find.byKey(const Key('player-synopsis')));
+    final block = tester.getRect(find.byKey(const Key('player-episode-synopsis')));
+    expect(lessRect.top, greaterThanOrEqualTo(textRect.bottom - 1));
+    expect(block.right - lessRect.right, lessThanOrEqualTo(2));
 
     await tester.tap(toggle);
     await tester.pumpAndSettle();
@@ -756,7 +825,7 @@ void main() {
       find.descendant(of: toggle, matching: find.text('More')),
       findsOneWidget,
     );
-    expect(tester.widget<Text>(synopsis).maxLines, 1);
+    expect(tester.widget<Text>(synopsis).maxLines, 2);
   });
 
   testWidgets('should_share_one_muted_style_across_label_and_synopsis', (
@@ -778,7 +847,10 @@ void main() {
     for (final style in [label, synopsis, separator]) {
       expect(style.fontSize, 12);
       expect(style.fontWeight, FontWeight.w500);
-      expect(style.color?.withValues(alpha: 1), AppColors.playerMuted);
+      expect(
+        style.color?.withValues(alpha: 1),
+        AppColors.playerMuted.withValues(alpha: 1),
+      );
     }
     expect(separator.color, isNot(Colors.white));
   });
@@ -815,7 +887,7 @@ void main() {
     );
     await _openSeriesPlayer(
       tester,
-      cardKey: const Key('home-drama-card-long-copy-demo'),
+      cardKey: const Key('home-feed-card-long-copy-demo'),
     );
 
     expect(tester.takeException(), isNull);
@@ -831,7 +903,11 @@ void main() {
     final synopsis = tester.widget<Text>(
       find.byKey(const Key('player-synopsis')),
     );
-    expect(synopsis.maxLines, 1);
+    expect(
+      tester.getRect(find.byKey(const Key('player-synopsis'))).right,
+      lessThanOrEqualTo(320 - 14 - 54),
+    );
+    expect(synopsis.maxLines, 2);
     expect(synopsis.overflow, TextOverflow.ellipsis);
     expect(
       tester.getRect(find.byKey(const Key('player-episodes-pill'))).right,
@@ -954,7 +1030,17 @@ void main() {
     );
     await _openSeriesPlayer(
       tester,
-      cardKey: const Key('home-drama-card-locked-demo'),
+      cardKey: const Key('home-feed-card-locked-demo'),
+    );
+    expect(find.byKey(const Key('progress-loading')), findsNothing);
+    expect(find.byKey(const Key('progress-loading-highlight')), findsNothing);
+    expect(find.byKey(const Key('progress-inactive')), findsOneWidget);
+    expect(find.byType(Slider), findsNothing);
+    expect(
+      tester
+          .widget<SeekProgressBar>(find.byKey(const Key('player-progress')))
+          .locked,
+      isTrue,
     );
     await tester.tap(find.byKey(const Key('player-episodes')));
     await tester.pumpAndSettle();
@@ -1244,7 +1330,8 @@ void _expectFullscreenOverlay(WidgetTester tester) {
   expect(find.byKey(const Key('player-pip')), findsNothing);
   expect(find.byKey(const Key('player-rail-comments')), findsOneWidget);
   expect(find.byKey(const Key('player-fullscreen-toggle')), findsNothing);
-  expect(find.byKey(const Key('progress-loading')), findsOneWidget);
+  expect(find.byKey(const Key('progress-loading')), findsNothing);
+  expect(find.byKey(const Key('progress-inactive')), findsOneWidget);
   expect(find.byType(Slider), findsNothing);
   expect(find.byKey(const Key('player-title')), findsNothing);
   expect(find.byKey(const Key('player-subtitle')), findsNothing);
@@ -1268,9 +1355,9 @@ Future<void> _clearFromMore(WidgetTester tester) async {
 
 Future<void> _openSeriesPlayer(
   WidgetTester tester, {
-  Key cardKey = const Key('home-drama-card-city-lights-demo'),
+  Key cardKey = const Key('home-feed-card-city-lights-demo'),
 }) async {
-  await tester.tap(find.byKey(const Key('tab-theater')));
+  await tester.tap(find.byKey(const Key('tab-home')));
   await tester.pumpAndSettle();
   final card = find.byKey(cardKey);
   await tester.scrollUntilVisible(
@@ -1278,7 +1365,7 @@ Future<void> _openSeriesPlayer(
     220,
     scrollable: find
         .descendant(
-          of: find.byKey(const Key('discover-refresh')),
+          of: find.byKey(const Key('home-grid-refresh')),
           matching: find.byType(Scrollable),
         )
         .first,
@@ -1293,10 +1380,11 @@ Future<void> _pumpApp(
   WidgetTester tester, {
   Size size = const Size(390, 844),
   FakeCatalogRepository? catalog,
-  FakePlaybackRepository? playback,
+  PlaybackRepository? playback,
   FakeInteractionRepository? interactions,
   FakeCommentRepository? commentRepository,
   PlayerFactory? playerFactory,
+  bool settle = true,
 }) async {
   tester.view.physicalSize = size;
   tester.view.devicePixelRatio = 1;
@@ -1317,30 +1405,9 @@ Future<void> _pumpApp(
       haptics: FakeHaptics(),
     ),
   );
-  await tester.pumpAndSettle();
+  if (settle) await tester.pumpAndSettle();
 }
 
-const _countingDrama = Drama(
-  id: 'counting-demo',
-  title: 'Counting Demo',
-  synopsis: 'Counting interaction totals',
-  posterUrl: '/files/counting-demo.png',
-  genre: 'Romance',
-  detailLoaded: true,
-  favoriteCount: 2,
-  commentCount: 3,
-  likeCount: 4,
-  episodes: [
-    Episode(
-      id: 'counting-demo-1',
-      number: 1,
-      title: 'Episode 1',
-      isFree: true,
-      videoUrl: 'https://example.test/counting-1.mp4',
-    ),
-  ],
-);
-
 class _RecordingPlayer implements PlayerPort {
   bool playing = false;
 
@@ -1361,6 +1428,35 @@ class _RecordingPlayer implements PlayerPort {
   Future<void> dispose() async {}
 }
 
+class _PendingPlaybackRepository implements PlaybackRepository {
+  final Completer<PlayTicket> ticket = Completer<PlayTicket>();
+
+  @override
+  Future<PlayTicket> ticketFor(String episodeId, {bool forceRefresh = false}) =>
+      ticket.future;
+
+  @override
+  bool isFresh(String episodeId) => false;
+}
+
+class _GatedPlayer implements PlayerPort {
+  _GatedPlayer(this.initialization);
+
+  final Future<void> initialization;
+
+  @override
+  Future<void> initialize() => initialization;
+
+  @override
+  Future<void> play() async {}
+
+  @override
+  Future<void> pause() async {}
+
+  @override
+  Future<void> dispose() async {}
+}
+
 const _lockedDrama = Drama(
   id: 'locked-demo',
   title: 'Locked Demo',
diff --git a/test/player/player_logic_test.dart b/test/player/player_logic_test.dart
index c04bc59..4aadab2 100644
--- a/test/player/player_logic_test.dart
+++ b/test/player/player_logic_test.dart
@@ -2,9 +2,12 @@ import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:video_player/video_player.dart';
+// ignore: depend_on_referenced_packages
+import 'package:video_player_platform_interface/video_player_platform_interface.dart';
 import 'package:fruitshorts/core/data/models/drama.dart';
 import 'package:fruitshorts/core/data/models/play_ticket.dart';
 import 'package:fruitshorts/core/data/models/player_port.dart';
+import 'package:fruitshorts/core/data/models/watch_progress.dart';
 import 'package:fruitshorts/core/data/models/download_license.dart';
 import 'package:fruitshorts/core/data/models/download_policy.dart';
 import 'package:fruitshorts/core/data/repositories/download_repository.dart';
@@ -12,6 +15,7 @@ import 'package:fruitshorts/core/data/services/android_picture_in_picture.dart';
 import 'package:fruitshorts/core/data/services/download_controller.dart';
 import 'package:fruitshorts/core/data/services/download_storage.dart';
 import 'package:fruitshorts/core/data/services/playback_session.dart';
+import 'package:fruitshorts/core/data/services/playback_position_cache.dart';
 import 'package:fruitshorts/core/data/services/video_player_port.dart';
 import 'package:fruitshorts/pages/player/player_logic.dart';
 import 'package:fruitshorts/pages/player/player_view.dart';
@@ -48,11 +52,13 @@ AndroidPictureInPicture _pip() =>
 PlayerLogic _logic(
   FakeWatchHistory history, {
   PlaybackRepository? playback,
+  PlaybackPositionCache? positionCache,
   Future<void> Function()? waitForFrame,
 }) => PlayerLogic(
   history: history,
   playback: playback ?? FakePlaybackRepository(),
   pictureInPicture: _pip(),
+  positionCache: positionCache,
   waitForFrame: waitForFrame ?? () async {},
 );
 
@@ -126,6 +132,203 @@ void main() {
     });
   });
 
+  group('playback position cache', () {
+    test('should_use_cached_resume_point_without_reading_history', () async {
+      final history = FakeWatchHistory()..saved = const Duration(seconds: 12);
+      final cache = PlaybackPositionCache();
+      cache.save(
+        episodeId: 'signal-1',
+        dramaId: 'signal',
+        position: const Duration(minutes: 1, seconds: 20),
+        duration: const Duration(minutes: 3),
+      );
+      final logic = _logic(history, positionCache: cache);
+      logic.attach(
+        PlayerPage(drama: _drama('signal'), initialIndex: 0, active: false),
+        isMounted: () => true,
+      );
+      logic.start(
+        factory: _RecordingFactory().create,
+        coordinator: PlaybackCoordinator(),
+      );
+      await _drain(logic);
+      await pumpEventQueue();
+
+      expect(logic.resumePoint?.position, const Duration(seconds: 80));
+      expect(history.reads, isEmpty);
+      logic.dispose();
+      await _drain(logic);
+    });
+
+    test('should_fall_back_to_server_when_cache_belongs_to_other_drama',
+        () async {
+      final history = FakeWatchHistory()
+        ..records['signal'] = const WatchProgress(
+          dramaId: 'signal',
+          episodeId: 'signal-2',
+          position: Duration(seconds: 42),
+          duration: Duration(minutes: 3),
+        );
+      final cache = PlaybackPositionCache();
+      cache.save(
+        episodeId: 'signal-1',
+        dramaId: 'other-drama',
+        position: const Duration(seconds: 80),
+        duration: const Duration(minutes: 3),
+      );
+      final logic = _logic(history, positionCache: cache);
+      logic.attach(
+        PlayerPage(drama: _drama('signal'), initialIndex: 0, active: false),
+        isMounted: () => true,
+      );
+      logic.start(
+        factory: _RecordingFactory().create,
+        coordinator: PlaybackCoordinator(),
+      );
+      await _drain(logic);
+      await pumpEventQueue();
+
+      expect(logic.resumePoint?.episodeId, 'signal-2');
+      expect(logic.resumePoint?.position, const Duration(seconds: 42));
+      expect(history.reads, ['signal']);
+      logic.dispose();
+      await _drain(logic);
+    });
+
+    test('should_fall_back_to_server_when_cache_is_missing', () async {
+      final history = FakeWatchHistory()
+        ..records['signal'] = const WatchProgress(
+          dramaId: 'signal',
+          episodeId: 'signal-1',
+          position: Duration(seconds: 36),
+          duration: Duration(minutes: 3),
+        );
+      final logic = _logic(history);
+      logic.attach(
+        PlayerPage(drama: _drama('signal'), initialIndex: 0, active: false),
+        isMounted: () => true,
+      );
+      logic.start(
+        factory: _RecordingFactory().create,
+        coordinator: PlaybackCoordinator(),
+      );
+      await _drain(logic);
+      await pumpEventQueue();
+
+      expect(logic.resumePoint?.position, const Duration(seconds: 36));
+      expect(history.reads, ['signal']);
+      logic.dispose();
+      await _drain(logic);
+    });
+
+    testWidgets(
+      'should_cache_actual_position_after_seek_completes',
+      (tester) async {
+        late BuildContext context;
+        await tester.pumpWidget(
+          MaterialApp(
+            home: Builder(
+              builder: (pageContext) {
+                context = pageContext;
+                return const Scaffold(body: SizedBox.expand());
+              },
+            ),
+          ),
+        );
+        final cache = PlaybackPositionCache();
+        final history = FakeWatchHistory();
+        final factory = _VideoRecordingFactory();
+        late PlayerLogic logic;
+        await tester.runAsync(() async {
+          logic = _logic(history, positionCache: cache);
+          logic.attach(
+            PlayerPage(drama: _drama('signal'), initialIndex: 0),
+            isMounted: () => true,
+          );
+          logic.start(
+            factory: factory.create,
+            coordinator: PlaybackCoordinator(),
+          );
+          await _drain(logic);
+        });
+        final player = logic.session.active! as _VideoRecordingPlayer;
+        logic.beginScrub(player);
+
+        await tester.runAsync(
+          () => logic.seekTo(
+            context,
+            player,
+            const Duration(seconds: 42),
+          ),
+        );
+        await tester.runAsync(() => logic.pendingWrite);
+
+        expect(
+          cache.read('signal-1', dramaId: 'signal')?.position,
+          const Duration(seconds: 42),
+        );
+        expect(history.writes.last, 'signal-1|42000|false');
+
+        logic.beginScrub(player);
+        await tester.runAsync(
+          () => logic.seekTo(
+            context,
+            player,
+            const Duration(minutes: 2),
+          ),
+        );
+        await tester.runAsync(() => logic.pendingWrite);
+
+        expect(player.controller.value.position, const Duration(minutes: 1));
+        expect(
+          cache.read('signal-1', dramaId: 'signal')?.position,
+          const Duration(minutes: 1),
+        );
+        expect(history.writes.last, 'signal-1|60000|false');
+        logic.dispose();
+        await tester.pump();
+      },
+    );
+
+    testWidgets('should_seek_cached_position_before_play_when_rebuilding', (
+      tester,
+    ) async {
+      final previousPlatform = VideoPlayerPlatform.instance;
+      VideoPlayerPlatform.instance = _VideoPlayerPlatformStub();
+      addTearDown(() => VideoPlayerPlatform.instance = previousPlatform);
+      final cache = PlaybackPositionCache();
+      cache.save(
+        episodeId: 'signal-1',
+        dramaId: 'signal',
+        position: const Duration(seconds: 42),
+        duration: const Duration(minutes: 1),
+      );
+      final factory = _VideoRecordingFactory();
+      late PlayerLogic logic;
+      await tester.runAsync(() async {
+        logic = _logic(FakeWatchHistory(), positionCache: cache);
+        logic.attach(
+          PlayerPage(drama: _drama('signal'), initialIndex: 0),
+          isMounted: () => true,
+        );
+        logic.start(
+          factory: factory.create,
+          coordinator: PlaybackCoordinator(),
+        );
+        await _drain(logic);
+        await pumpEventQueue();
+        await logic.session.playbackSettled;
+        await logic.session.preloadSettled;
+      });
+
+      final player = logic.session.active! as _VideoRecordingPlayer;
+      expect(player.events, containsAllInOrder(['initialize', 'seek', 'play']));
+      expect(player.controller.value.position, const Duration(seconds: 42));
+      logic.dispose();
+      await tester.pump();
+    });
+  });
+
   test('should_play_local_file_without_ticket_when_episode_is_downloaded',
       () async {
     final playback = FakePlaybackRepository();
@@ -732,6 +935,172 @@ void main() {
   });
 
   group('lifecycle', () {
+    test(
+      'should_auto_resume_previously_paused_playback_when_app_returns',
+      () async {
+        final factory = _RecordingFactory();
+        final playback = FakePlaybackRepository(fresh: false);
+        final drama = _drama('signal');
+        final logic = _logic(FakeWatchHistory(), playback: playback);
+        logic.attach(
+          PlayerPage(drama: drama, initialIndex: 0),
+          isMounted: () => true,
+        );
+        logic.start(
+          factory: factory.create,
+          coordinator: PlaybackCoordinator(),
+        );
+        await _drain(logic);
+        final player = factory.created.first;
+        final requestsBeforeResume = playback.requests.length;
+        logic
+          ..trackedEpisode = drama.episodes.first
+          ..trackedDrama = drama;
+
+        logic.session.setUserWantsPlay(false);
+        await _drain(logic);
+        expect(logic.session.userWantsPlay, isFalse);
+        expect(player.plays, 1);
+
+        logic.onLifecycle(AppLifecycleState.paused);
+        await _drain(logic);
+        expect(logic.trackedEpisode, isNotNull);
+        expect(logic.ticketError, isNull);
+        expect(logic.blockedEpisodeId, isNull);
+        expect(logic.unlockingEpisodeId, isNull);
+        expect(logic.session.isLocked, isFalse);
+        expect(logic.session.error, isNull);
+        expect(logic.session.canResumeAfterBackground, isTrue);
+        logic.onLifecycle(AppLifecycleState.resumed);
+        await _drain(logic);
+
+        expect(logic.session.userWantsPlay, isTrue);
+        expect(player.plays, 2);
+        expect(playback.requests.length, greaterThan(requestsBeforeResume));
+        logic.dispose();
+        await _drain(logic);
+      },
+    );
+
+    test('should_not_auto_resume_locked_episode_when_app_returns', () async {
+      final factory = _RecordingFactory();
+      final drama = _drama('locked', isFree: false);
+      final logic = _logic(
+        FakeWatchHistory(),
+        playback: FakePlaybackRepository(
+          ticket: const PlayTicket(
+            episodeId: 'locked-1',
+            accessible: false,
+            accessType: PlayTicket.coinRequired,
+            unlockCoin: 30,
+          ),
+        ),
+      );
+      logic.attach(
+        PlayerPage(drama: drama, initialIndex: 0),
+        isMounted: () => true,
+      );
+      logic.start(
+        factory: factory.create,
+        coordinator: PlaybackCoordinator(),
+      );
+      await _drain(logic);
+      logic.trackedEpisode = drama.episodes.first;
+      logic.session.setUserWantsPlay(false);
+
+      logic.onLifecycle(AppLifecycleState.paused);
+      await _drain(logic);
+      logic.onLifecycle(AppLifecycleState.resumed);
+      await _drain(logic);
+
+      expect(logic.session.userWantsPlay, isFalse);
+      expect(factory.created, isEmpty);
+      logic.dispose();
+      await _drain(logic);
+    });
+
+    test(
+      'should_not_auto_resume_when_ticket_failure_or_overlay_is_active',
+      () async {
+        final factory = _RecordingFactory();
+        final drama = _drama('signal');
+        final logic = _logic(FakeWatchHistory());
+        logic.attach(
+          PlayerPage(drama: drama, initialIndex: 0),
+          isMounted: () => true,
+        );
+        logic.start(
+          factory: factory.create,
+          coordinator: PlaybackCoordinator(),
+        );
+        await _drain(logic);
+        final player = factory.created.first;
+        logic.session.setUserWantsPlay(false);
+        await _drain(logic);
+
+        logic.ticketError = 'ticket failed';
+        logic.onLifecycle(AppLifecycleState.paused);
+        await _drain(logic);
+        logic.onLifecycle(AppLifecycleState.resumed);
+        await _drain(logic);
+        expect(logic.session.userWantsPlay, isFalse);
+        expect(player.plays, 1);
+
+        logic.ticketError = null;
+        logic.session.setOverlayOpen(true);
+        logic.onLifecycle(AppLifecycleState.paused);
+        await _drain(logic);
+        logic.onLifecycle(AppLifecycleState.resumed);
+        await _drain(logic);
+        expect(logic.session.userWantsPlay, isFalse);
+        expect(player.plays, 1);
+
+        logic.session.setOverlayOpen(false);
+        logic.dispose();
+        await _drain(logic);
+      },
+    );
+
+    test(
+      'should_save_progress_and_pause_when_app_enters_background',
+      () async {
+        final factory = _RecordingFactory();
+        final drama = _drama('signal');
+        final history = FakeWatchHistory();
+        final logic = _logic(history);
+        logic.attach(
+          PlayerPage(drama: drama, initialIndex: 0),
+          isMounted: () => true,
+        );
+        logic.start(
+          factory: factory.create,
+          coordinator: PlaybackCoordinator(),
+        );
+        await _drain(logic);
+        final player = factory.created.first;
+        final tracked = VideoPlayerPort(drama.episodes.first);
+        tracked.controller.value = const VideoPlayerValue(
+          duration: Duration(minutes: 3),
+          position: Duration(seconds: 5),
+          isInitialized: true,
+        );
+        logic
+          ..trackedPlayer = tracked
+          ..trackedEpisode = drama.episodes.first
+          ..trackedDrama = drama;
+
+        logic.onLifecycle(AppLifecycleState.paused);
+        await _drain(logic);
+        await logic.pendingWrite;
+
+        expect(player.pauses, 1);
+        expect(history.writes, ['signal-1|5000|false']);
+        logic.dispose();
+        await _drain(logic);
+        await tracked.dispose();
+      },
+    );
+
     test('should_pause_active_player_when_backgrounded_and_play_it_when_resumed', () async {
       final factory = _RecordingFactory();
       final drama = _drama('signal');
@@ -957,7 +1326,6 @@ class _SessionVideoSurface extends StatelessWidget {
               controller: video?.controller,
               videoUrl: video?.controller.dataSource ?? '',
               theater: false,
-              onTap: () {},
             ),
           );
         },
@@ -968,21 +1336,38 @@ class _SessionVideoSurface extends StatelessWidget {
 
 class _VideoRecordingFactory {
   final List<_VideoRecordingPlayer> created = [];
+  final List<String> events = [];
 
   PlayerPort create(Episode episode) {
-    final player = _VideoRecordingPlayer(episode);
+    final player = _VideoRecordingPlayer(episode, events);
     created.add(player);
     return player;
   }
 }
 
+class _VideoPlayerPlatformStub extends VideoPlayerPlatform {
+  @override
+  Future<void> init() async {}
+
+  @override
+  Future<void> dispose(int playerId) async {}
+
+  @override
+  Future<void> setVolume(int playerId, double volume) async {}
+
+  @override
+  Future<void> setPlaybackSpeed(int playerId, double speed) async {}
+}
+
 class _VideoRecordingPlayer extends VideoPlayerPort {
-  _VideoRecordingPlayer(super.episode);
+  _VideoRecordingPlayer(super.episode, this.events);
 
   bool disposed = false;
+  final List<String> events;
 
   @override
   Future<void> initialize() async {
+    events.add('initialize');
     controller.value = const VideoPlayerValue(
       duration: Duration(minutes: 1),
       size: Size(1280, 720),
@@ -992,10 +1377,23 @@ class _VideoRecordingPlayer extends VideoPlayerPort {
   }
 
   @override
-  Future<void> play() async {}
+  Future<void> play() async => events.add('play');
 
   @override
-  Future<void> pause() async {}
+  Future<void> pause() async => events.add('pause');
+
+  @override
+  Future<void> seekTo(Duration position) async {
+    events.add('seek');
+    final current = controller.value;
+    controller.value = VideoPlayerValue(
+      duration: current.duration,
+      size: current.size,
+      position: position,
+      isInitialized: current.isInitialized,
+      isPlaying: current.isPlaying,
+    );
+  }
 
   @override
   Future<void> dispose() async {
diff --git a/test/player/player_open_detail_test.dart b/test/player/player_open_detail_test.dart
index ae36b5b..a4e3176 100644
--- a/test/player/player_open_detail_test.dart
+++ b/test/player/player_open_detail_test.dart
@@ -13,6 +13,7 @@ import 'package:fruitshorts/core/data/repositories/watch_history_repository.dart
 import 'package:fruitshorts/core/data/services/android_picture_in_picture.dart';
 import 'package:fruitshorts/core/data/services/catalog_controller.dart';
 import 'package:fruitshorts/core/data/services/favorite_controller.dart';
+import 'package:fruitshorts/core/data/services/playback_position_cache.dart';
 import 'package:fruitshorts/core/data/services/playback_session.dart';
 import 'package:fruitshorts/core/data/services/video_player_port.dart';
 import 'package:fruitshorts/core/platform/haptics.dart';
@@ -35,17 +36,19 @@ void main() {
       final history = FakeWatchHistory();
       final playback = FakePlaybackRepository();
       final catalog = CatalogController(FakeCatalogRepository(dramas: [drama]));
+      final positionCache = PlaybackPositionCache();
       final favorites = FavoriteController(
         InMemoryFavoriteRepository(saved: {drama.id}, cards: [drama]),
       );
       final logic = PlayerLogic(
         history: history,
         playback: playback,
+        positionCache: positionCache,
         pictureInPicture: AndroidPictureInPicture(
           channel: const MethodChannel('test/player_open_detail/pip'),
         ),
       );
-      final factory = _RecordingFactory();
+      final factory = _VideoRecordingFactory();
       logic.attach(
         PlayerPage(drama: drama, initialIndex: 0),
         isMounted: () => true,
@@ -56,15 +59,9 @@ void main() {
       final active = logic.session.active;
       final index = logic.session.currentIndex;
       final player = factory.created.first;
-      final playsBefore = player.plays;
-      final tracked = VideoPlayerPort(drama.episodes.first);
-      tracked.controller.value = const VideoPlayerValue(
-        duration: Duration(minutes: 5),
-        position: Duration(seconds: 37),
-        isInitialized: true,
-      );
+      final createdBeforeDetail = factory.created.length;
       logic
-        ..trackedPlayer = tracked
+        ..trackedPlayer = player
         ..trackedEpisode = drama.episodes.first
         ..trackedDrama = drama;
 
@@ -74,6 +71,7 @@ void main() {
           providers: [
             Provider<WatchHistoryRepository>.value(value: history),
             Provider<PlaybackRepository>.value(value: playback),
+            Provider<PlaybackPositionCache>.value(value: positionCache),
             ChangeNotifierProvider<CatalogController>.value(value: catalog),
             ChangeNotifierProvider<FavoriteController>.value(value: favorites),
             Provider<Haptics>.value(value: FakeHaptics()),
@@ -92,19 +90,33 @@ void main() {
         ),
       );
 
+      logic.beginScrub(player);
+      await logic.seekTo(
+        pageContext,
+        player,
+        const Duration(minutes: 1, seconds: 22),
+      );
+
       unawaited(logic.openDetail(pageContext));
       await tester.pump();
       await tester.pump(const Duration(milliseconds: 400));
       await _pumpSession(tester);
+      await tester.runAsync(() => logic.session.playbackSettled);
 
       expect(find.byType(DramaDetailPage), findsOneWidget);
       expect(logic.session.active, same(active));
       expect(logic.session.currentIndex, index);
       expect(logic.session.userWantsPlay, isTrue);
-      expect(player.pauses, 1);
-      expect(player.plays, playsBefore);
-      expect(tracked.controller.value.position, const Duration(seconds: 37));
-      expect(history.writes, isEmpty);
+      expect(factory.created, hasLength(createdBeforeDetail));
+      expect(
+        player.controller.value.position,
+        const Duration(minutes: 1, seconds: 22),
+      );
+      expect(history.writes, ['signal-1|82000|false', 'signal-1|82000|false']);
+      expect(
+        positionCache.read('signal-1', dramaId: 'signal')?.position,
+        const Duration(minutes: 1, seconds: 22),
+      );
 
       await tester.pageBack();
       await tester.pump();
@@ -115,9 +127,16 @@ void main() {
       expect(logic.session.active, same(active));
       expect(logic.session.currentIndex, index);
       expect(logic.session.userWantsPlay, isTrue);
-      expect(player.plays, playsBefore + 1);
-      expect(tracked.controller.value.position, const Duration(seconds: 37));
-      expect(history.writes, ['signal-1|37000|false']);
+      expect(factory.created, hasLength(createdBeforeDetail));
+      expect(
+        player.controller.value.position,
+        const Duration(minutes: 1, seconds: 22),
+      );
+      expect(history.writes, [
+        'signal-1|82000|false',
+        'signal-1|82000|false',
+        'signal-1|82000|false',
+      ]);
 
       logic
         ..trackedPlayer = null
@@ -125,7 +144,6 @@ void main() {
         ..trackedDrama = null
         ..dispose();
       await _pumpSession(tester);
-      await tracked.dispose();
     },
   );
 }
@@ -153,29 +171,64 @@ Future<void> _pumpSession(WidgetTester tester) async {
   }
 }
 
-class _RecordingFactory {
-  final List<_RecordingPlayer> created = [];
+class _VideoRecordingFactory {
+  final List<_VideoRecordingPlayer> created = [];
 
   PlayerPort create(Episode episode) {
-    final player = _RecordingPlayer();
+    final player = _VideoRecordingPlayer(episode);
     created.add(player);
     return player;
   }
 }
 
-class _RecordingPlayer implements PlayerPort {
-  int plays = 0;
-  int pauses = 0;
+class _VideoRecordingPlayer extends VideoPlayerPort {
+  _VideoRecordingPlayer(super.episode);
 
   @override
-  Future<void> initialize() async {}
+  Future<void> initialize() async {
+    controller.value = const VideoPlayerValue(
+      duration: Duration(minutes: 5),
+      size: Size(1280, 720),
+      position: Duration(seconds: 1),
+      isInitialized: true,
+    );
+  }
 
   @override
-  Future<void> play() async => plays++;
+  Future<void> play() async {
+    _setPlaying(true);
+  }
 
   @override
-  Future<void> pause() async => pauses++;
+  Future<void> pause() async {
+    _setPlaying(false);
+  }
 
   @override
-  Future<void> dispose() async {}
+  Future<void> seekTo(Duration position) async {
+    final current = controller.value;
+    controller.value = VideoPlayerValue(
+      duration: current.duration,
+      size: current.size,
+      position: position,
+      isInitialized: current.isInitialized,
+      isPlaying: current.isPlaying,
+    );
+  }
+
+  void _setPlaying(bool playing) {
+    final current = controller.value;
+    controller.value = VideoPlayerValue(
+      duration: current.duration,
+      size: current.size,
+      position: current.position,
+      isInitialized: current.isInitialized,
+      isPlaying: playing,
+    );
+  }
+
+  @override
+  Future<void> dispose() async {
+    await controller.dispose();
+  }
 }
diff --git a/test/player/player_video_surface_test.dart b/test/player/player_video_surface_test.dart
index 7ab4f3c..d9357bf 100644
--- a/test/player/player_video_surface_test.dart
+++ b/test/player/player_video_surface_test.dart
@@ -87,7 +87,6 @@ Future<VideoPlayerController> _pumpSurface(
           controller: controller,
           videoUrl: controller.dataSource,
           theater: false,
-          onTap: () {},
         ),
       ),
     ),
diff --git a/test/player/scrub_preview_card_test.dart b/test/player/scrub_preview_card_test.dart
new file mode 100644
index 0000000..edb7d62
--- /dev/null
+++ b/test/player/scrub_preview_card_test.dart
@@ -0,0 +1,174 @@
+// Author: fruit.com.cn
+
+import 'dart:typed_data';
+import 'dart:ui' as ui;
+
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:fruitshorts/core/data/services/playback_thumbnail_service.dart';
+import 'package:fruitshorts/core/data/services/sprite_thumbnail_axis.dart';
+import 'package:fruitshorts/pages/player/widgets/scrub_preview_card.dart';
+
+void main() {
+  testWidgets('should_render_sprite_crop_without_requesting_local_frame', (
+    tester,
+  ) async {
+    final image = await _createImage(320, 180);
+    final cue = const SpriteThumbnailCue(
+      start: Duration.zero,
+      end: Duration(seconds: 2),
+      spriteFile: 'sprite_001.jpg',
+      sourceRect: Rect.fromLTWH(0, 0, 160, 90),
+    );
+    final axis = _FakeAxisSource(
+      axisReady: true,
+      frame: SpriteThumbnailFrame(
+        image: image,
+        sourceRect: const Rect.fromLTWH(0, 0, 160, 90),
+        spriteUrl: 'https://cdn.test/sprite_001.jpg',
+        cue: cue,
+      ),
+    );
+    final loader = _CountingThumbnailLoader();
+    final localService = _localService(loader);
+    addTearDown(image.dispose);
+    addTearDown(axis.dispose);
+    addTearDown(localService.dispose);
+
+    await tester.pumpWidget(
+      _card(
+        localService: localService,
+        axis: axis,
+        thumbnailsUrl: 'https://cdn.test/thumbnails.vtt',
+      ),
+    );
+    await tester.pump();
+
+    final preview = tester.widget<SpriteCropPreview>(
+      find.byKey(const Key('scrub-preview-sprite')),
+    );
+    expect(preview.sourceRect, const Rect.fromLTWH(0, 0, 160, 90));
+    expect(find.byKey(const Key('scrub-preview-frame')), findsNothing);
+    expect(loader.calls, 0);
+  });
+
+  testWidgets('should_fallback_to_local_frame_when_thumbnails_url_is_missing', (
+    tester,
+  ) async {
+    final loader = _CountingThumbnailLoader();
+    final localService = _localService(loader);
+    final axis = _FakeAxisSource(axisReady: false);
+    addTearDown(axis.dispose);
+    addTearDown(localService.dispose);
+
+    await tester.pumpWidget(
+      _card(localService: localService, axis: axis, thumbnailsUrl: null),
+    );
+    await tester.pump();
+
+    expect(loader.calls, 1);
+    expect(find.byKey(const Key('scrub-preview-poster')), findsOneWidget);
+    expect(find.byKey(const Key('scrub-preview-sprite')), findsNothing);
+  });
+
+  testWidgets('should_keep_poster_when_axis_and_local_frame_both_fail', (
+    tester,
+  ) async {
+    final loader = _CountingThumbnailLoader();
+    final localService = _localService(loader);
+    final axis = _FakeAxisSource(axisReady: true);
+    addTearDown(axis.dispose);
+    addTearDown(localService.dispose);
+
+    await tester.pumpWidget(
+      _card(
+        localService: localService,
+        axis: axis,
+        thumbnailsUrl: 'https://cdn.test/empty.vtt',
+      ),
+    );
+    await tester.pump();
+
+    expect(loader.calls, 1);
+    expect(find.byKey(const Key('scrub-preview-poster')), findsOneWidget);
+    expect(find.byKey(const Key('scrub-preview-sprite')), findsNothing);
+    expect(find.byKey(const Key('scrub-preview-frame')), findsNothing);
+  });
+}
+
+Widget _card({
+  required PlaybackThumbnailService localService,
+  required SpriteThumbnailAxisSource axis,
+  required String? thumbnailsUrl,
+}) {
+  return MaterialApp(
+    home: Scaffold(
+      body: Center(
+        child: ScrubPreviewCard(
+          service: localService,
+          spriteAxisService: axis,
+          thumbnailsUrl: thumbnailsUrl,
+          episodeId: 'episode-1',
+          posterUrl: '',
+          position: const Duration(seconds: 1),
+          duration: const Duration(seconds: 10),
+        ),
+      ),
+    ),
+  );
+}
+
+PlaybackThumbnailService _localService(PlaybackThumbnailFrameLoader loader) {
+  return PlaybackThumbnailService(
+    frameLoader: loader,
+    sourceResolver: (_) =>
+        const PlaybackThumbnailSource(remoteUrl: 'https://example/video.mp4'),
+    prefetchDelay: const Duration(hours: 1),
+  );
+}
+
+class _FakeAxisSource extends ChangeNotifier
+    implements SpriteThumbnailAxisSource {
+  _FakeAxisSource({required this.axisReady, this.frame});
+
+  final bool axisReady;
+  final SpriteThumbnailFrame? frame;
+
+  @override
+  SpriteThumbnailFrame? cachedFrameAt(
+    String? thumbnailsUrl,
+    Duration position,
+  ) => frame;
+
+  @override
+  Future<void> prepareAt(String? thumbnailsUrl, Duration position) async {}
+
+  @override
+  bool hasAxis(String? thumbnailsUrl) => axisReady;
+}
+
+class _CountingThumbnailLoader implements PlaybackThumbnailFrameLoader {
+  int calls = 0;
+
+  @override
+  Future<ByteData?> load(PlaybackThumbnailFrameRequest request) async {
+    calls++;
+    return null;
+  }
+
+  @override
+  void dispose() {}
+}
+
+Future<ui.Image> _createImage(int width, int height) async {
+  final recorder = ui.PictureRecorder();
+  final canvas = Canvas(recorder);
+  canvas.drawRect(
+    Rect.fromLTWH(0, 0, width.toDouble(), height.toDouble()),
+    Paint()..color = Colors.orange,
+  );
+  final picture = recorder.endRecording();
+  final image = await picture.toImage(width, height);
+  picture.dispose();
+  return image;
+}
diff --git a/test/player/seek_scrub_visibility_test.dart b/test/player/seek_scrub_visibility_test.dart
new file mode 100644
index 0000000..d1f0dfa
--- /dev/null
+++ b/test/player/seek_scrub_visibility_test.dart
@@ -0,0 +1,432 @@
+// Author: fruit.com.cn
+
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:fruitshorts/core/data/models/drama.dart';
+import 'package:fruitshorts/l10n/app_localizations.dart';
+import 'package:fruitshorts/pages/player/widgets/home_feed_overlay.dart';
+import 'package:fruitshorts/pages/player/widgets/player_overlay.dart';
+import 'package:fruitshorts/pages/player/widgets/player_overlay_models.dart';
+import 'package:fruitshorts/pages/player/widgets/seek_progress_bar.dart';
+import 'package:video_player/video_player.dart';
+
+void main() {
+  testWidgets('tapping the progress bar does not hide the overlay', (
+    tester,
+  ) async {
+    final harness = await _pumpHarness(tester);
+
+    await tester.tap(find.byType(Slider));
+    await tester.pumpAndSettle();
+
+    expect(find.byKey(const Key('scrub-overlay')), findsOneWidget);
+    expect(harness.scrubStarts, 0);
+    expect(harness.seeks, 0);
+    expect(_sliderTheme(tester).trackHeight, 2);
+  });
+
+  testWidgets('horizontal drag hides the overlay and thickens the track', (
+    tester,
+  ) async {
+    final harness = await _pumpHarness(tester);
+    final slider = find.byType(Slider);
+    final gesture = await tester.startGesture(tester.getCenter(slider));
+
+    await gesture.moveBy(const Offset(24, 0));
+    await tester.pump();
+    expect(find.byKey(const Key('scrub-overlay')), findsNothing);
+    expect(harness.scrubStarts, 1);
+    expect(_sliderTheme(tester).trackHeight, 6);
+    expect(
+      (_sliderTheme(tester).thumbShape! as RoundSliderThumbShape)
+          .enabledThumbRadius,
+      8,
+    );
+
+    await gesture.moveBy(const Offset(72, 0));
+    await tester.pump();
+    await gesture.up();
+    await tester.pumpAndSettle();
+  });
+
+  testWidgets('releasing restores the overlay and idle track height', (
+    tester,
+  ) async {
+    final harness = await _pumpHarness(tester);
+    final gesture = await tester.startGesture(
+      tester.getCenter(find.byType(Slider)),
+    );
+    await gesture.moveBy(const Offset(32, 0));
+    await tester.pump();
+    await gesture.moveBy(const Offset(64, 0));
+    await tester.pump();
+    await gesture.up();
+    await tester.pumpAndSettle();
+
+    expect(find.byKey(const Key('scrub-overlay')), findsOneWidget);
+    expect(harness.scrubEnds, 1);
+    expect(harness.seeks, 1);
+    expect(_sliderTheme(tester).trackHeight, 2);
+    expect(
+      (_sliderTheme(tester).thumbShape! as RoundSliderThumbShape)
+          .enabledThumbRadius,
+      6,
+    );
+  });
+
+  testWidgets('feed progress tap does not clear overlay content', (
+    tester,
+  ) async {
+    await _pumpFeedOverlay(tester);
+
+    await tester.tap(find.byKey(const Key('home-feed-progress')));
+    await tester.pumpAndSettle();
+
+    expect(tester.takeException(), isNull);
+    expect(find.byKey(const Key('home-feed-progress')), findsOneWidget);
+    expect(
+      tester
+          .widget<AnimatedOpacity>(
+            find.byKey(const Key('home-feed-content-opacity')),
+          )
+          .opacity,
+      1,
+    );
+  });
+
+  testWidgets('feed progress drag then immediate release restores content', (
+    tester,
+  ) async {
+    await _pumpFeedOverlay(tester);
+    final gesture = await tester.startGesture(
+      tester.getCenter(find.byKey(const Key('home-feed-progress'))),
+    );
+
+    await gesture.moveBy(const Offset(80, 0));
+    await tester.pump();
+    await gesture.up();
+    await tester.pumpAndSettle();
+
+    expect(tester.takeException(), isNull);
+    expect(find.byKey(const Key('home-feed-progress')), findsOneWidget);
+    expect(
+      tester
+          .widget<AnimatedOpacity>(
+            find.byKey(const Key('home-feed-content-opacity')),
+          )
+          .opacity,
+      1,
+    );
+    expect(
+      tester.getSize(find.byKey(const Key('home-feed-progress-track'))).height,
+      2,
+    );
+  });
+
+  testWidgets('feed progress remains mounted and thick while dragging', (
+    tester,
+  ) async {
+    await _pumpFeedOverlay(tester);
+    final progress = find.byKey(const Key('home-feed-progress'));
+    final gesture = await tester.startGesture(tester.getCenter(progress));
+
+    await gesture.moveBy(const Offset(80, 0));
+    await tester.pump();
+    await tester.pump(const Duration(milliseconds: 130));
+
+    expect(tester.takeException(), isNull);
+    expect(progress, findsOneWidget);
+    expect(find.byKey(const Key('scrub-preview-time-bubble')), findsOneWidget);
+    expect(
+      tester
+          .widget<AnimatedOpacity>(
+            find.byKey(const Key('home-feed-content-opacity')),
+          )
+          .opacity,
+      0,
+    );
+    expect(
+      tester.getSize(find.byKey(const Key('home-feed-progress-track'))).height,
+      6,
+    );
+
+    await gesture.up();
+    await tester.pumpAndSettle();
+  });
+
+  testWidgets('full player drag clears chrome and release restores it', (
+    tester,
+  ) async {
+    await _pumpFullPlayerOverlay(tester);
+    expect(find.byKey(const Key('player-controls-top')), findsOneWidget);
+    expect(find.byKey(const Key('player-bottom-actions')), findsOneWidget);
+
+    final gesture = await tester.startGesture(
+      tester.getCenter(find.byKey(const Key('player-progress'))),
+    );
+    await gesture.moveBy(const Offset(80, 0));
+    await tester.pump();
+
+    expect(_opacity(tester, const Key('player-controls-top')), 0);
+    expect(_opacity(tester, const Key('player-interaction-rail')), 0);
+    expect(_offstage(tester, const Key('player-controls-bottom')), isTrue);
+    expect(_offstage(tester, const Key('player-bottom-actions')), isTrue);
+    expect(find.byKey(const Key('player-progress')), findsOneWidget);
+
+    await gesture.up();
+    await tester.pumpAndSettle();
+
+    expect(_opacity(tester, const Key('player-controls-top')), 1);
+    expect(_opacity(tester, const Key('player-interaction-rail')), 1);
+    expect(_offstage(tester, const Key('player-bottom-actions')), isFalse);
+  });
+}
+
+double _opacity(WidgetTester tester, Key key) {
+  return tester
+      .widget<Opacity>(
+        find
+            .ancestor(of: find.byKey(key), matching: find.byType(Opacity))
+            .first,
+      )
+      .opacity;
+}
+
+bool _offstage(WidgetTester tester, Key key) {
+  return tester
+      .widget<Offstage>(
+        find
+            .ancestor(
+              of: find.byKey(key, skipOffstage: false),
+              matching: find.byType(Offstage),
+            )
+            .first,
+      )
+      .offstage;
+}
+
+Future<_HarnessState> _pumpHarness(WidgetTester tester) async {
+  final controller = ValueNotifier<VideoPlayerValue>(
+    const VideoPlayerValue(
+      duration: Duration(minutes: 2),
+      position: Duration(seconds: 20),
+      isInitialized: true,
+    ),
+  );
+  addTearDown(controller.dispose);
+  final key = GlobalKey<_HarnessState>();
+  await tester.pumpWidget(
+    MaterialApp(
+      home: Scaffold(
+        body: _Harness(key: key, controller: controller),
+      ),
+    ),
+  );
+  await tester.pumpAndSettle();
+  return key.currentState!;
+}
+
+SliderThemeData _sliderTheme(WidgetTester tester) {
+  return tester
+      .widget<SliderTheme>(
+        find
+            .ancestor(
+              of: find.byType(Slider),
+              matching: find.byType(SliderTheme),
+            )
+            .first,
+      )
+      .data;
+}
+
+Future<ValueNotifier<VideoPlayerValue>> _pumpFeedOverlay(
+  WidgetTester tester,
+) async {
+  final controller = ValueNotifier<VideoPlayerValue>(
+    const VideoPlayerValue(
+      duration: Duration(minutes: 2),
+      position: Duration(seconds: 20),
+      isInitialized: true,
+    ),
+  );
+  addTearDown(controller.dispose);
+  await tester.pumpWidget(
+    MaterialApp(
+      locale: const Locale('en'),
+      supportedLocales: AppLocalizations.supportedLocales,
+      localizationsDelegates: AppLocalizations.localizationsDelegates,
+      home: Builder(
+        builder: (context) => Scaffold(
+          body: HomeFeedOverlay(
+            l10n: AppLocalizations.of(context)!,
+            drama: const Drama(
+              id: 'scrub-drama',
+              title: 'Scrub Drama',
+              synopsis: 'A short synopsis.',
+              posterUrl: '',
+              totalEpisodes: 8,
+            ),
+            episode: const Episode(
+              id: 'scrub-episode',
+              number: 1,
+              title: 'Scrub Episode',
+              isFree: true,
+            ),
+            controller: controller,
+            locked: false,
+            liked: false,
+            saved: false,
+            visible: true,
+            boosting: false,
+            onLike: () {},
+            onSave: () {},
+            onComments: () {},
+            onShare: () {},
+            onDetail: () {},
+            onOpenFullPlayer: () {},
+            onTogglePlay: () {},
+            onBoostStart: () {},
+            onBoostEnd: () {},
+            onMore: () {},
+          ),
+        ),
+      ),
+    ),
+  );
+  await tester.pumpAndSettle();
+  return controller;
+}
+
+class _FullPlayerHarness extends StatefulWidget {
+  const _FullPlayerHarness({required this.controller});
+
+  final ValueNotifier<VideoPlayerValue> controller;
+
+  @override
+  State<_FullPlayerHarness> createState() => _FullPlayerHarnessState();
+}
+
+class _FullPlayerHarnessState extends State<_FullPlayerHarness> {
+  bool _scrubbing = false;
+
+  @override
+  Widget build(BuildContext context) {
+    final l10n = AppLocalizations.of(context)!;
+    return PlayerPlaybackOverlay(
+      scrubbing: _scrubbing,
+      controlsVisible: true,
+      data: PlayerOverlayData(
+        l10n: l10n,
+        drama: const Drama(
+          id: 'full-drama',
+          title: 'Full Drama',
+          synopsis: 'A short synopsis for the full player.',
+          posterUrl: '',
+          totalEpisodes: 8,
+          detailLoaded: true,
+        ),
+        episode: const Episode(
+          id: 'full-episode',
+          number: 2,
+          title: 'Episode 2',
+          isFree: true,
+        ),
+        controller: widget.controller,
+        locked: false,
+        liked: false,
+        likeCount: 1,
+        commentCount: 1,
+        favoriteCount: 1,
+        saved: false,
+        playing: true,
+        playbackSpeed: 1,
+        totalEpisodes: 8,
+        boosting: false,
+      ),
+      actions: PlayerOverlayActions(
+        onBack: () {},
+        onTogglePlay: () {},
+        onClear: () {},
+        onExitClear: () {},
+        onDetail: () {},
+        onSpeed: () {},
+        onEpisodes: () {},
+        onComments: () {},
+        onLike: () {},
+        onSave: () {},
+        onShare: () {},
+        onMore: () {},
+        onScrubStart: () => setState(() => _scrubbing = true),
+        onScrubEnd: () => setState(() => _scrubbing = false),
+        onSeek: (_) async {},
+        onLongPressCenter: () {},
+        onBoostStart: () {},
+        onBoostEnd: () {},
+      ),
+    );
+  }
+}
+
+Future<void> _pumpFullPlayerOverlay(WidgetTester tester) async {
+  final controller = ValueNotifier<VideoPlayerValue>(
+    const VideoPlayerValue(
+      duration: Duration(minutes: 2),
+      position: Duration(seconds: 20),
+      isInitialized: true,
+    ),
+  );
+  addTearDown(controller.dispose);
+  await tester.pumpWidget(
+    MaterialApp(
+      locale: const Locale('en'),
+      supportedLocales: AppLocalizations.supportedLocales,
+      localizationsDelegates: AppLocalizations.localizationsDelegates,
+      home: Scaffold(body: _FullPlayerHarness(controller: controller)),
+    ),
+  );
+  await tester.pumpAndSettle();
+}
+
+class _Harness extends StatefulWidget {
+  const _Harness({super.key, required this.controller});
+
+  final ValueNotifier<VideoPlayerValue> controller;
+
+  @override
+  State<_Harness> createState() => _HarnessState();
+}
+
+class _HarnessState extends State<_Harness> {
+  bool visible = true;
+  int scrubStarts = 0;
+  int scrubEnds = 0;
+  int seeks = 0;
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: [
+        if (visible) const Text('Overlay', key: Key('scrub-overlay')),
+        SizedBox(
+          width: 320,
+          height: 80,
+          child: SeekProgressBar(
+            valueListenable: widget.controller,
+            semanticsLabel: 'Progress',
+            onScrubStart: () => setState(() {
+              visible = false;
+              scrubStarts++;
+            }),
+            onScrubEnd: () => setState(() {
+              visible = true;
+              scrubEnds++;
+            }),
+            onSeek: (_) async {
+              seeks++;
+            },
+          ),
+        ),
+      ],
+    );
+  }
+}
diff --git a/test/recommend/all_dramas_filter_alignment_test.dart b/test/recommend/all_dramas_filter_alignment_test.dart
new file mode 100644
index 0000000..000aa1b
--- /dev/null
+++ b/test/recommend/all_dramas_filter_alignment_test.dart
@@ -0,0 +1,109 @@
+// Author: fruit.com.cn
+
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:fruitshorts/core/data/services/home_feed_controller.dart';
+import 'package:fruitshorts/core/theme/app_dimens.dart';
+import 'package:fruitshorts/l10n/app_localizations.dart';
+import 'package:fruitshorts/pages/recommend/widgets/all_dramas_filter_grid.dart';
+
+import '../support/fake_catalog.dart';
+
+void main() {
+  testWidgets('all filter rows start at the same left edge', (tester) async {
+    final catalog = FakeCatalogRepository();
+    final controller = HomeFeedController(catalog)
+      ..seedRecommend(catalog.dramas);
+    addTearDown(controller.dispose);
+
+    await tester.pumpWidget(
+      MaterialApp(
+        locale: const Locale('en'),
+        supportedLocales: AppLocalizations.supportedLocales,
+        localizationsDelegates: AppLocalizations.localizationsDelegates,
+        home: Scaffold(
+          body: AllDramasFilterGrid(
+            feedController: controller,
+            onOpenDrama: (_) {},
+          ),
+        ),
+      ),
+    );
+    await tester.pumpAndSettle();
+
+    expect(AppDimens.allDramasHorizontal, 12);
+    final firstChips = [
+      find.descendant(
+        of: find.byKey(const Key('all-filter-row-0')),
+        matching: find.byKey(const Key('all-filter-all')),
+      ),
+      find.descendant(
+        of: find.byKey(const Key('all-filter-row-1')),
+        matching: find.byKey(const Key('all-filter-all')),
+      ),
+      find.descendant(
+        of: find.byKey(const Key('all-filter-row-2')),
+        matching: find.byKey(const Key('all-filter-all')),
+      ),
+      find.byKey(const Key('all-sort-hot')),
+    ];
+    final starts = firstChips
+        .map((finder) => tester.getTopLeft(finder).dx)
+        .toList(growable: false);
+
+    for (final start in starts) {
+      expect(start, closeTo(12, 0.5));
+      expect(start, closeTo(starts.first, 0.5));
+    }
+
+    final rowZeroChips = [
+      find.byKey(const Key('all-filter-all')).first,
+      find.byKey(const Key('all-filter-local')),
+      find.byKey(const Key('all-filter-asia')),
+    ];
+    final rowZeroRects = rowZeroChips.map(tester.getRect).toList();
+    final rowZeroGaps = [
+      for (var index = 1; index < rowZeroRects.length; index++)
+        rowZeroRects[index].left - rowZeroRects[index - 1].right,
+    ];
+    expect(rowZeroGaps[0], closeTo(10, 0.5));
+    expect(rowZeroGaps[1], closeTo(rowZeroGaps[0], 0.5));
+
+    final rowOneAll = find.descendant(
+      of: find.byKey(const Key('all-filter-row-1')),
+      matching: find.byKey(const Key('all-filter-all')),
+    );
+    final rowOneSubtitles = find.byKey(const Key('all-filter-subtitles'));
+    final rowOneDubbed = find.byKey(const Key('all-filter-dubbed'));
+    final rowOneGap =
+        tester.getTopLeft(rowOneSubtitles).dx -
+        tester.getTopRight(rowOneAll).dx;
+    expect(rowOneGap, closeTo(10, 0.5));
+    expect(
+      tester.getTopLeft(rowOneDubbed).dx -
+          tester.getTopRight(rowOneSubtitles).dx,
+      closeTo(rowOneGap, 0.5),
+    );
+
+    final rowTwoAll = find.descendant(
+      of: find.byKey(const Key('all-filter-row-2')),
+      matching: find.byKey(const Key('all-filter-all')),
+    );
+    final rowTwoReversal = find.byKey(const Key('all-filter-reversal'));
+    final rowTwoUplifting = find.byKey(const Key('all-filter-uplifting'));
+    final rowTwoGap =
+        tester.getTopLeft(rowTwoReversal).dx - tester.getTopRight(rowTwoAll).dx;
+    expect(rowTwoGap, closeTo(10, 0.5));
+    expect(
+      tester.getTopLeft(rowTwoUplifting).dx -
+          tester.getTopRight(rowTwoReversal).dx,
+      closeTo(rowTwoGap, 0.5),
+    );
+
+    expect(
+      tester.getTopLeft(find.byKey(const Key('all-sort-new'))).dx -
+          tester.getTopRight(find.byKey(const Key('all-sort-hot'))).dx,
+      closeTo(10, 0.5),
+    );
+  });
+}
diff --git a/test/recommend/recommend_sections_test.dart b/test/recommend/recommend_sections_test.dart
new file mode 100644
index 0000000..3a7f8b6
--- /dev/null
+++ b/test/recommend/recommend_sections_test.dart
@@ -0,0 +1,668 @@
+// Author: fruit.com.cn
+
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:fruitshorts/app.dart';
+import 'package:fruitshorts/core/data/repositories/favorite_repository.dart';
+import 'package:fruitshorts/core/data/repositories/playback_repository.dart';
+import 'package:fruitshorts/core/data/repositories/watch_history_repository.dart';
+import 'package:fruitshorts/core/theme/app_colors.dart';
+import 'package:fruitshorts/core/theme/app_dimens.dart';
+import 'package:fruitshorts/core/widgets/app_bottom_nav.dart';
+import 'package:fruitshorts/pages/player/player_view.dart';
+import 'package:shared_preferences_platform_interface/in_memory_shared_preferences_async.dart';
+import 'package:shared_preferences_platform_interface/shared_preferences_async_platform_interface.dart';
+
+import '../support/fake_catalog.dart';
+import '../support/fake_category.dart';
+import '../support/fake_haptics.dart';
+import '../support/fake_interaction_repositories.dart';
+import '../support/widget_player.dart';
+
+void main() {
+  setUp(() {
+    SharedPreferencesAsyncPlatform.instance =
+        InMemorySharedPreferencesAsync.empty();
+  });
+
+  testWidgets('should_render_immersive_player_as_recommend_tab', (
+    tester,
+  ) async {
+    await _pumpRecommend(tester);
+
+    expect(find.byKey(const Key('recommend-page')), findsOneWidget);
+    expect(find.byKey(const Key('recommend-tab-recommend')), findsOneWidget);
+    expect(find.byKey(const Key('recommend-tab-playlist')), findsOneWidget);
+    expect(find.byKey(const Key('recommend-tab-all')), findsOneWidget);
+    expect(find.byKey(const Key('recommend-feed-player')), findsOneWidget);
+    expect(find.byKey(const Key('recommend-top-gradient')), findsOneWidget);
+    final recommendText = tester.widget<Text>(
+      find.descendant(
+        of: find.byKey(const Key('recommend-tab-recommend')),
+        matching: find.text('Recommend'),
+      ),
+    );
+    expect(recommendText.style?.fontSize, 17);
+    expect(recommendText.style?.fontWeight, FontWeight.w700);
+    expect(recommendText.style?.color, AppColors.textPrimary);
+    final playlistText = tester.widget<Text>(
+      find.descendant(
+        of: find.byKey(const Key('recommend-tab-playlist')),
+        matching: find.text('Playlists'),
+      ),
+    );
+    expect(playlistText.style?.fontSize, 17);
+    expect(playlistText.style?.fontWeight, FontWeight.w400);
+    expect(playlistText.style?.color, AppColors.textTabInactive);
+    expect(
+      tester
+          .widget<IconButton>(find.byKey(const Key('recommend-search')))
+          .iconSize,
+      26,
+    );
+    final topNavRect = tester.getRect(
+      find.byKey(const Key('recommend-top-nav')),
+    );
+    expect(
+      tester.getRect(find.byKey(const Key('recommend-search'))).right,
+      closeTo(topNavRect.right - AppDimens.feedPageHorizontal, 0.1),
+    );
+    final tabGroupLeft = tester
+        .getRect(find.byKey(const Key('recommend-tab-recommend')))
+        .left;
+    final tabGroupRight = tester
+        .getRect(find.byKey(const Key('recommend-tab-all')))
+        .right;
+    expect(
+      (tabGroupLeft + tabGroupRight) / 2,
+      closeTo(topNavRect.center.dx, 0.1),
+    );
+    expect(
+      tester
+          .getRect(find.byKey(const Key('recommend-top-nav')))
+          .overlaps(
+            tester.getRect(find.byKey(const Key('recommend-feed-player'))),
+          ),
+      isTrue,
+    );
+    final player = tester.widget<PlayerPage>(
+      find.byKey(const Key('recommend-feed-player')),
+    );
+    expect(player.homeMode, isTrue);
+    expect(player.embedded, isTrue);
+    expect(player.showHomeFeedHeader, isFalse);
+    expect(find.byType(PageView), findsNWidgets(2));
+    expect(find.byKey(const Key('recommend-section-hits')), findsNothing);
+    expect(find.byType(AppBottomNav), findsOneWidget);
+
+    final progress = find.byKey(const Key('home-feed-progress'));
+    final progressCenterY = tester.getCenter(progress).dy;
+    final scrub = await tester.startGesture(tester.getCenter(progress));
+    await scrub.moveBy(const Offset(40, 0));
+    await tester.pump(const Duration(milliseconds: 130));
+    expect(find.byKey(const Key('recommend-top-nav')), findsOneWidget);
+    expect(tester.getCenter(progress).dy, closeTo(progressCenterY, 0.1));
+    expect(find.byType(AppBottomNav), findsOneWidget);
+    expect(
+      tester.getSize(find.byKey(const Key('home-tabs-bar'))).height,
+      AppDimens.navHeight,
+    );
+    await scrub.up();
+    await tester.pumpAndSettle();
+    expect(find.byKey(const Key('recommend-top-nav')), findsOneWidget);
+    expect(find.byType(AppBottomNav), findsOneWidget);
+    expect(
+      tester.getSize(find.byKey(const Key('home-tabs-bar'))).height,
+      AppDimens.navHeight,
+    );
+
+    await tester.tap(find.byKey(const Key('recommend-tab-playlist')));
+    await tester.pumpAndSettle();
+    expect(find.byKey(const Key('recommend-section-hits')), findsOneWidget);
+  });
+
+  testWidgets('should_render_playlist_sections_and_horizontal_cards', (
+    tester,
+  ) async {
+    await _pumpRecommend(tester);
+    await tester.tap(find.byKey(const Key('recommend-tab-playlist')));
+    await tester.pumpAndSettle();
+
+    expect(find.byKey(const Key('recommend-section-hits')), findsOneWidget);
+    expect(find.byKey(const Key('recommend-section-new')), findsOneWidget);
+    expect(find.byKey(const Key('recommend-section-costume')), findsOneWidget);
+    expect(find.byKey(const Key('recommend-more-hits')), findsOneWidget);
+    expect(find.byKey(const Key('recommend-more-new')), findsOneWidget);
+    expect(find.byKey(const Key('recommend-more-costume')), findsOneWidget);
+    expect(find.byKey(const Key('recommend-row-hits')), findsOneWidget);
+    expect(
+      find.byKey(const Key('recommend-card-hits-the-signal-demo')),
+      findsOneWidget,
+    );
+    expect(find.text("This Week's Hits"), findsOneWidget);
+    expect(find.text('New This Week'), findsOneWidget);
+    expect(find.text('Costume Drama Awards'), findsOneWidget);
+    expect(find.byType(AppBottomNav), findsOneWidget);
+    final playlistSurface = tester.widget<DecoratedBox>(
+      find.byKey(const Key('recommend-playlist-surface')),
+    );
+    final playlistGradient =
+        (playlistSurface.decoration as BoxDecoration).gradient!
+            as LinearGradient;
+    expect(playlistGradient.begin, Alignment.topCenter);
+    expect(playlistGradient.end, Alignment.bottomCenter);
+    expect(playlistGradient.colors, const [
+      AppColors.mineGradientTop,
+      AppColors.mineGradientMiddle,
+      AppColors.mineGradientBottom,
+    ]);
+    expect(playlistGradient.stops, const [0, 0.4, 0.75]);
+    final playlistGlow = tester.widget<DecoratedBox>(
+      find.byKey(const Key('recommend-playlist-glow')),
+    );
+    final glowGradient =
+        (playlistGlow.decoration as BoxDecoration).gradient! as RadialGradient;
+    expect(glowGradient.center, const Alignment(0, -0.95));
+    expect(glowGradient.radius, 0.9);
+    expect(glowGradient.colors, const [
+      AppColors.recommendPlaylistGlow,
+      AppColors.transparent,
+    ]);
+    final sectionTitle = tester.widget<Text>(find.text("This Week's Hits"));
+    expect(sectionTitle.style?.fontSize, AppDimens.recommendSectionTitle);
+    expect(sectionTitle.style?.fontWeight, FontWeight.w700);
+    final sectionSubtitle = tester.widget<Text>(
+      find.text('Binge the hottest stories of the week!'),
+    );
+    expect(sectionSubtitle.style?.fontSize, AppDimens.recommendSectionSubtitle);
+    expect(sectionSubtitle.style?.color, AppColors.textSecondary);
+    final moreText = tester.widget<Text>(
+      find.descendant(
+        of: find.byKey(const Key('recommend-more-hits')),
+        matching: find.text('More'),
+      ),
+    );
+    expect(moreText.style?.fontSize, AppDimens.recommendSectionMore);
+    expect(moreText.style?.color, AppColors.textSecondary);
+    final card = find.byKey(const Key('recommend-card-hits-the-signal-demo'));
+    final coverClip = tester.widget<ClipRRect>(
+      find.descendant(of: card, matching: find.byType(ClipRRect)),
+    );
+    expect(
+      coverClip.borderRadius,
+      BorderRadius.circular(AppDimens.cardCoverRadius),
+    );
+    final coverFinder = find.descendant(
+      of: card,
+      matching: find.byType(AspectRatio),
+    );
+    final cover = tester.widget<AspectRatio>(coverFinder);
+    expect(cover.aspectRatio, AppDimens.cardCoverAspectRatio);
+    final cardTitleFinder = find.byKey(
+      const Key('recommend-title-hits-the-signal-demo'),
+    );
+    final cardTitle = tester.widget<Text>(cardTitleFinder);
+    expect(cardTitle.style?.fontSize, AppDimens.cardTitleFont);
+    expect(cardTitle.style?.fontWeight, FontWeight.w500);
+    expect(cardTitle.style?.height, AppDimens.cardTitleLineHeight);
+    final views = tester.widget<Text>(
+      find.descendant(
+        of: find.byKey(const Key('recommend-views-hits-the-signal-demo')),
+        matching: find.byType(Text),
+      ),
+    );
+    expect(views.style?.fontSize, AppDimens.cardPlayCountFont);
+    expect(views.style?.fontWeight, FontWeight.w400);
+    expect(
+      find.descendant(
+        of: coverFinder,
+        matching: find.byKey(const Key('recommend-views-hits-the-signal-demo')),
+      ),
+      findsOneWidget,
+    );
+    expect(views.style?.color, AppColors.textPrimary);
+    final viewIcon = find.descendant(
+      of: find.byKey(const Key('recommend-views-hits-the-signal-demo')),
+      matching: find.byIcon(Icons.local_fire_department_rounded),
+    );
+    expect(viewIcon, findsOneWidget);
+    final badge = find.byKey(
+      const Key('drama-cover-badge-ribbon-hits-the-signal-demo-hot'),
+    );
+    expect(badge, findsOneWidget);
+    final badgeText = tester.widget<Text>(
+      find.descendant(of: badge, matching: find.byType(Text)),
+    );
+    expect(badgeText.data, 'Hit');
+    expect(badgeText.style?.fontSize, AppDimens.cardBadgeFont);
+    expect(badgeText.style?.color, AppColors.textPrimary);
+    final tagsFinder = find.byKey(
+      const Key('recommend-tags-hits-the-signal-demo'),
+    );
+    final tags = tester.widget<Text>(tagsFinder);
+    expect(tags.data, 'Suspense | Mystery');
+    expect(tags.style?.fontSize, AppDimens.cardTagFont);
+    expect(tags.style?.color, AppColors.textTertiary);
+    expect(
+      tester.getTopLeft(cardTitleFinder).dx,
+      tester.getTopLeft(coverFinder).dx,
+    );
+    expect(tester.getTopLeft(tagsFinder).dx, tester.getTopLeft(coverFinder).dx);
+  });
+
+  testWidgets('should_open_playlist_detail_with_collage_and_two_columns', (
+    tester,
+  ) async {
+    await _pumpRecommend(tester);
+    await tester.tap(find.byKey(const Key('recommend-tab-playlist')));
+    await tester.pumpAndSettle();
+    await tester.ensureVisible(find.byKey(const Key('recommend-more-hits')));
+    await tester.tap(find.byKey(const Key('recommend-more-hits')));
+    await tester.pumpAndSettle();
+
+    expect(find.byKey(const Key('playlist-detail-page')), findsOneWidget);
+    expect(find.byKey(const Key('playlist-detail-collage')), findsOneWidget);
+    expect(
+      tester.widget<Text>(find.byKey(const Key('playlist-detail-title'))).data,
+      "This Week's Hits",
+    );
+    expect(
+      tester
+          .widget<Text>(find.byKey(const Key('playlist-detail-subtitle')))
+          .data,
+      'Binge the hottest stories of the week!',
+    );
+    final grid = tester.widget<SliverGrid>(
+      find.byKey(const Key('playlist-detail-grid')),
+    );
+    final delegate =
+        grid.gridDelegate as SliverGridDelegateWithFixedCrossAxisCount;
+    expect(delegate.crossAxisCount, 2);
+    final first = tester.getRect(
+      find.byKey(const Key('home-feed-card-the-signal-demo')),
+    );
+    final second = tester.getRect(
+      find.byKey(const Key('home-feed-card-city-lights-demo')),
+    );
+    expect(second.top, closeTo(first.top, 1));
+    expect(second.left, greaterThan(first.right));
+    while (tester.takeException() != null) {}
+  });
+
+  testWidgets('should_switch_inner_tabs_without_losing_grid_filter_state', (
+    tester,
+  ) async {
+    await _pumpRecommend(tester);
+
+    await tester.tap(find.byKey(const Key('recommend-tab-playlist')));
+    await tester.pumpAndSettle();
+    expect(find.byKey(const Key('recommend-section-hits')), findsOneWidget);
+
+    await tester.tap(find.byKey(const Key('recommend-tab-all')));
+    await tester.pumpAndSettle();
+    expect(find.byKey(const Key('all-dramas-grid')), findsOneWidget);
+    final grid = tester.widget<SliverGrid>(
+      find.byKey(const Key('all-dramas-grid')),
+    );
+    final delegate =
+        grid.gridDelegate as SliverGridDelegateWithFixedCrossAxisCount;
+    expect(delegate.crossAxisCount, 3);
+    expect(delegate.crossAxisSpacing, AppDimens.allDramasGridGap);
+    expect(delegate.mainAxisSpacing, AppDimens.allDramasGridRowGap);
+    for (var row = 0; row < 4; row++) {
+      expect(find.byKey(Key('all-filter-row-$row')), findsOneWidget);
+      final scroll = tester.widget<SingleChildScrollView>(
+        find.byKey(Key('all-filter-scroll-$row')),
+      );
+      expect(scroll.scrollDirection, Axis.horizontal);
+      expect(scroll.physics, isA<BouncingScrollPhysics>());
+    }
+    final filterStarts = [
+      for (var row = 0; row < 4; row++)
+        tester.getRect(find.byKey(Key('all-filter-row-$row'))).left,
+    ];
+    expect(
+      filterStarts,
+      everyElement(closeTo(AppDimens.allDramasHorizontal, 0.1)),
+    );
+    final pageRect = tester.getRect(find.byKey(const Key('recommend-page')));
+    for (var row = 0; row < 4; row++) {
+      final rowRect = tester.getRect(find.byKey(Key('all-filter-row-$row')));
+      expect(
+        rowRect.left,
+        closeTo(pageRect.left + AppDimens.allDramasHorizontal, 0.1),
+      );
+      expect(rowRect.right, closeTo(pageRect.right - 12, 0.1));
+    }
+    final firstTexts = [
+      find.descendant(
+        of: find.byKey(const Key('all-filter-row-0')),
+        matching: find.byType(Text),
+      ),
+      find.descendant(
+        of: find.byKey(const Key('all-filter-row-1')),
+        matching: find.byType(Text),
+      ),
+      find.descendant(
+        of: find.byKey(const Key('all-filter-row-2')),
+        matching: find.byType(Text),
+      ),
+      find.descendant(
+        of: find.byKey(const Key('all-filter-row-3')),
+        matching: find.byType(Text),
+      ),
+    ];
+    final firstTextX = firstTexts
+        .map((finder) => tester.getTopLeft(finder.first).dx)
+        .toList();
+    expect(firstTextX, everyElement(closeTo(firstTextX.first, 0.1)));
+    expect(
+      firstTextX.first,
+      closeTo(
+        pageRect.left +
+            AppDimens.allDramasHorizontal +
+            AppDimens.filterChipHorizontalPadding,
+        0.1,
+      ),
+    );
+    for (var row = 0; row < 3; row++) {
+      expect(
+        tester.getSize(find.byKey(Key('all-filter-row-$row'))).height,
+        AppDimens.filterChipHeight + AppDimens.filterRowGap,
+      );
+    }
+    expect(
+      tester.getSize(find.byKey(const Key('all-filter-row-3'))).height,
+      AppDimens.filterChipHeight,
+    );
+    expect(
+      tester.getRect(find.byKey(const Key('all-dramas-scroll'))).top -
+          tester.getRect(find.byKey(const Key('all-dramas-filters'))).bottom,
+      closeTo(AppDimens.allDramasFilterToGridGap, 0.1),
+    );
+    expect(
+      find.descendant(
+        of: find.byKey(const Key('all-dramas-refresh')),
+        matching: find.byKey(const Key('all-dramas-filters')),
+      ),
+      findsNothing,
+    );
+    expect(
+      find.descendant(
+        of: find.byKey(const Key('all-dramas-scroll')),
+        matching: find.byKey(const Key('all-dramas-grid')),
+      ),
+      findsOneWidget,
+    );
+    final fixedFilterTop = tester
+        .getRect(find.byKey(const Key('all-dramas-filters')))
+        .top;
+    await tester.drag(
+      find.byKey(const Key('all-dramas-scroll')),
+      const Offset(0, -120),
+    );
+    await tester.pump();
+    expect(
+      tester.getRect(find.byKey(const Key('all-dramas-filters'))).top,
+      closeTo(fixedFilterTop, 0.1),
+    );
+    expect(find.byKey(const Key('all-filter-local')), findsOneWidget);
+    expect(_textStyle(tester, 'Local').color, AppColors.filterChipTextInactive);
+    expect(find.byKey(const Key('all-filter-subtitles')), findsOneWidget);
+    for (final key in [
+      'all-filter-reversal',
+      'all-filter-uplifting',
+      'all-filter-modern',
+      'all-filter-sweet',
+      'all-filter-angst',
+    ]) {
+      expect(find.byKey(Key(key)), findsOneWidget);
+    }
+    final rowZero = find.byKey(const Key('all-filter-row-0'));
+    final rowZeroAll = find.descendant(
+      of: rowZero,
+      matching: find.byKey(const Key('all-filter-all')),
+    );
+    final rowZeroLocal = find.descendant(
+      of: rowZero,
+      matching: find.byKey(const Key('all-filter-local')),
+    );
+    expect(
+      tester.getTopLeft(rowZeroAll).dx,
+      closeTo(pageRect.left + AppDimens.allDramasHorizontal, 0.1),
+    );
+    expect(
+      tester.getTopLeft(rowZeroLocal).dx - tester.getTopRight(rowZeroAll).dx,
+      AppDimens.filterItemGap,
+    );
+    final rowOne = find.byKey(const Key('all-filter-row-1'));
+    final rowTwo = find.byKey(const Key('all-filter-row-2'));
+    for (final row in [rowOne, rowTwo]) {
+      final all = find.descendant(
+        of: row,
+        matching: find.byKey(const Key('all-filter-all')),
+      );
+      final next = find.descendant(
+        of: row,
+        matching: row == rowOne
+            ? find.byKey(const Key('all-filter-subtitles'))
+            : find.byKey(const Key('all-filter-reversal')),
+      );
+      expect(
+        tester.getTopLeft(next).dx - tester.getTopRight(all).dx,
+        AppDimens.filterItemGap,
+      );
+    }
+    expect(
+      tester.getTopLeft(find.byKey(const Key('all-sort-new'))).dx -
+          tester.getTopRight(find.byKey(const Key('all-sort-hot'))).dx,
+      AppDimens.filterItemGap,
+    );
+    await tester.tap(find.byKey(const Key('all-filter-local')));
+    await tester.pumpAndSettle();
+    expect(find.byKey(const Key('all-dramas-empty')), findsOneWidget);
+    expect(_textStyle(tester, 'Local').fontWeight, FontWeight.w600);
+    expect(_textStyle(tester, 'Local').fontSize, AppDimens.filterChipFont);
+    expect(_textStyle(tester, 'Local').color, AppColors.filterChipTextSelected);
+    final selectedChip = tester.widget<Container>(
+      find
+          .descendant(
+            of: find.byKey(const Key('all-filter-local')),
+            matching: find.byType(Container),
+          )
+          .first,
+    );
+    expect(
+      (selectedChip.decoration! as BoxDecoration).color,
+      AppColors.filterChipSelected,
+    );
+    expect(
+      tester.getSize(find.byKey(const Key('all-filter-local'))).height,
+      AppDimens.filterChipHeight,
+    );
+    await tester.tap(find.byKey(const Key('all-filter-all')).first);
+    await tester.pumpAndSettle();
+    await tester.tap(find.byKey(const Key('all-sort-new')));
+    await tester.pump();
+    expect(_textStyle(tester, 'New').fontWeight, FontWeight.w600);
+    expect(_textStyle(tester, 'New').fontSize, AppDimens.filterChipFont);
+    expect(_textStyle(tester, 'New').color, AppColors.filterChipTextSelected);
+    expect(
+      tester.getSize(find.byKey(const Key('all-sort-new'))).height,
+      AppDimens.filterChipHeight,
+    );
+    final chipContainer = tester.widget<Container>(
+      find.descendant(
+        of: find.byKey(const Key('all-sort-new')),
+        matching: find.byType(Container),
+      ),
+    );
+    expect(
+      (chipContainer.decoration! as BoxDecoration).borderRadius,
+      BorderRadius.circular(AppDimens.filterChipRadius),
+    );
+    expect(find.byKey(const Key('all-dramas-filter-page')), findsNothing);
+
+    await tester.tap(find.byKey(const Key('recommend-tab-playlist')));
+    await tester.pumpAndSettle();
+    expect(find.byKey(const Key('recommend-section-hits')), findsOneWidget);
+    expect(find.byKey(const Key('recommend-feed-player')), findsOneWidget);
+    expect(find.byType(AppBottomNav), findsOneWidget);
+
+    await tester.tap(find.byKey(const Key('recommend-tab-all')));
+    await tester.pumpAndSettle();
+    expect(_textStyle(tester, 'New').fontWeight, FontWeight.w700);
+    expect(find.byKey(const Key('all-dramas-grid')), findsOneWidget);
+  });
+
+  testWidgets('should_switch_inner_tabs_with_horizontal_page_swipes', (
+    tester,
+  ) async {
+    await _pumpRecommend(tester);
+    final pages = find.byKey(const Key('recommend-tab-page-view'));
+    final topNavBefore = tester.getRect(
+      find.byKey(const Key('recommend-top-nav')),
+    );
+
+    await tester.drag(pages, const Offset(-320, 0));
+    await tester.pumpAndSettle();
+    expect(find.byKey(const Key('recommend-section-hits')), findsOneWidget);
+    expect(find.byKey(const Key('recommend-feed-player')), findsOneWidget);
+    expect(
+      tester
+          .widget<Text>(
+            find.descendant(
+              of: find.byKey(const Key('recommend-tab-playlist')),
+              matching: find.text('Playlists'),
+            ),
+          )
+          .style
+          ?.color,
+      AppColors.textPrimary,
+    );
+    expect(
+      tester.getRect(find.byKey(const Key('recommend-top-nav'))),
+      topNavBefore,
+    );
+
+    await tester.drag(pages, const Offset(-320, 0));
+    await tester.pumpAndSettle();
+    expect(find.byKey(const Key('all-dramas-grid')), findsOneWidget);
+
+    await tester.drag(pages, const Offset(640, 0));
+    await tester.pumpAndSettle();
+    expect(find.byKey(const Key('recommend-feed-player')), findsOneWidget);
+    expect(find.byKey(const Key('recommend-tab-recommend')), findsOneWidget);
+  });
+
+  testWidgets('should_open_standalone_player_from_title_and_watch_all', (
+    tester,
+  ) async {
+    await _pumpRecommend(tester);
+
+    await tester.tap(find.byKey(const Key('home-feed-series-name')));
+    await tester.pumpAndSettle();
+    expect(
+      tester.widget<PlayerPage>(find.byType(PlayerPage).last).homeMode,
+      isFalse,
+    );
+    await tester.binding.handlePopRoute();
+    await tester.pumpAndSettle();
+    expect(find.byKey(const Key('recommend-page')), findsOneWidget);
+    expect(find.byKey(const Key('recommend-tab-recommend')), findsOneWidget);
+
+    await tester.tap(find.byKey(const Key('home-feed-full-series')));
+    await tester.pumpAndSettle();
+    expect(
+      tester.widget<PlayerPage>(find.byType(PlayerPage).last).homeMode,
+      isFalse,
+    );
+  });
+
+  testWidgets('should_pull_refresh_recommend_feed_from_the_first_video', (
+    tester,
+  ) async {
+    await _pumpRecommend(tester);
+
+    final gesture = await tester.startGesture(
+      tester.getCenter(find.byKey(const Key('recommend-feed-player'))),
+    );
+    await gesture.moveBy(const Offset(0, 80));
+    await tester.pump();
+    expect(find.byKey(const Key('pull-refresh-indicator')), findsOneWidget);
+    final feedScroll = tester.state<ScrollableState>(
+      find
+          .descendant(
+            of: find.byKey(const Key('recommend-feed-player')),
+            matching: find.byType(Scrollable),
+          )
+          .first,
+    );
+    expect(feedScroll.position.pixels, 0);
+
+    await gesture.up();
+    await tester.pump();
+    expect(feedScroll.position.pixels, 0);
+    await tester.pump(const Duration(milliseconds: 400));
+    while (tester.takeException() != null) {}
+  });
+
+  testWidgets('should_open_player_and_search_from_recommend_page', (
+    tester,
+  ) async {
+    await _pumpRecommend(tester);
+
+    await tester.tap(find.byKey(const Key('recommend-tab-playlist')));
+    await tester.pumpAndSettle();
+    await tester.tap(
+      find.byKey(const Key('recommend-card-hits-the-signal-demo')),
+    );
+    await tester.pumpAndSettle();
+    final player = tester.widget<PlayerPage>(find.byType(PlayerPage).last);
+    expect(player.homeMode, isFalse);
+    await tester.binding.handlePopRoute();
+    await tester.pumpAndSettle();
+
+    await tester.tap(find.byKey(const Key('recommend-search')));
+    await tester.pumpAndSettle();
+    final search = tester.widget<TextField>(
+      find.byKey(const Key('discover-search')),
+    );
+    expect(search.focusNode?.hasFocus, isTrue);
+  });
+}
+
+TextStyle _textStyle(WidgetTester tester, String text) {
+  return tester
+      .widget<Text>(
+        find.descendant(
+          of: find.byKey(const Key('all-sort-new')),
+          matching: find.text(text),
+        ),
+      )
+      .style!;
+}
+
+Future<void> _pumpRecommend(WidgetTester tester) async {
+  tester.view.physicalSize = const Size(390, 844);
+  tester.view.devicePixelRatio = 1;
+  addTearDown(tester.view.resetPhysicalSize);
+  addTearDown(tester.view.resetDevicePixelRatio);
+  final catalog = FakeCatalogRepository();
+  await tester.pumpWidget(
+    LumaDramaApp(
+      playerFactory: createWidgetPlayer,
+      catalogRepository: catalog,
+      categoryRepository: FakeCategoryRepository(catalog: catalog),
+      watchHistoryRepository: InMemoryWatchHistoryRepository(),
+      favoriteRepository: InMemoryFavoriteRepository(cards: catalog.dramas),
+      playbackRepository: FakePlaybackRepository(),
+      commentRepository: FakeCommentRepository(),
+      interactionRepository: FakeInteractionRepository(),
+      haptics: FakeHaptics(),
+    ),
+  );
+  await tester.pumpAndSettle();
+  await tester.tap(find.byKey(const Key('tab-recommend')));
+  await tester.pumpAndSettle();
+}
diff --git a/test/support/fake_watch_history.dart b/test/support/fake_watch_history.dart
index 6616b7a..7643564 100644
--- a/test/support/fake_watch_history.dart
+++ b/test/support/fake_watch_history.dart
@@ -1,4 +1,7 @@
+// Author: fruit.com.cn
+
 import 'package:fruitshorts/core/data/repositories/watch_history_repository.dart';
+import 'package:fruitshorts/core/data/models/page_result.dart';
 import 'package:fruitshorts/core/data/models/watch_progress.dart';
 
 /// 记录每次进度读取/上报，方便断言"读了哪部剧、上报了哪一集"。
@@ -57,9 +60,19 @@ class FakeWatchHistory implements WatchHistoryRepository {
   }
 
   @override
-  Future<List<WatchProgress>> recent({int limit = 20}) async {
+  Future<PageResult<WatchProgress>> recent({
+    int pageIndex = 1,
+    int pageSize = 20,
+  }) async {
     if (failReads) throw StateError('history unavailable');
-    return recentRecords.take(limit).toList();
+    final offset = (pageIndex - 1) * pageSize;
+    if (offset >= recentRecords.length) {
+      return PageResult(total: recentRecords.length);
+    }
+    return PageResult(
+      total: recentRecords.length,
+      list: recentRecords.skip(offset).take(pageSize).toList(),
+    );
   }
 
   @override
diff --git a/test/theme/app_dimens_test.dart b/test/theme/app_dimens_test.dart
index 4051eb1..df8c7a6 100644
--- a/test/theme/app_dimens_test.dart
+++ b/test/theme/app_dimens_test.dart
@@ -4,24 +4,27 @@ import 'package:flutter_test/flutter_test.dart';
 import 'package:fruitshorts/core/theme/app_dimens.dart';
 
 void main() {
-  test('should_expose_the_k20_spacing_and_type_scale', () {
+  test('should_expose_dark_theme_radius_and_spacing_scale', () {
     expect(AppDimens.pageHorizontal, 16);
-    expect(AppDimens.cardRadius, 16);
-    expect(AppDimens.coverRadius, 16);
-    expect(AppDimens.authCardRadius, 20);
+    expect(AppDimens.cardRadius, 12);
+    expect(AppDimens.coverRadius, 12);
+    expect(AppDimens.authCardRadius, 12);
+    expect(AppDimens.buttonRadius, 10);
+    expect(AppDimens.inputRadius, 10);
+    expect(AppDimens.chipRadius, 6);
     expect(AppDimens.pillRadius, 999);
-    expect(AppDimens.buttonRadius, 999);
     expect(AppDimens.caption, 12);
     expect(AppDimens.body, 14);
     expect(AppDimens.listTitle, 15);
     expect(AppDimens.sectionTitle, 16);
     expect(AppDimens.pageTitle, 20);
-    expect(AppDimens.navLabel, 12);
-    expect(AppDimens.navIcon, 24);
+    expect(AppDimens.navLabel, 13);
+    expect(AppDimens.navLabelGap, 5);
+    expect(AppDimens.navIcon, 30);
     expect(AppDimens.buttonHeight, 48);
     expect(AppDimens.primaryButtonHeight, 52);
     expect(AppDimens.tapTarget, 44);
-    expect(AppDimens.navHeight, 68);
+    expect(AppDimens.navHeight, 62);
     expect(AppDimens.progressHeight, 3);
   });
 }
diff --git a/test/theme/app_theme_test.dart b/test/theme/app_theme_test.dart
index e7bc83c..442b452 100644
--- a/test/theme/app_theme_test.dart
+++ b/test/theme/app_theme_test.dart
@@ -7,6 +7,7 @@ import 'package:flutter/services.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:fruitshorts/app.dart';
 import 'package:fruitshorts/core/theme/app_colors.dart';
+import 'package:fruitshorts/core/theme/app_dimens.dart';
 import 'package:fruitshorts/core/theme/app_theme.dart';
 
 double _contrast(Color foreground, Color background) {
@@ -16,44 +17,66 @@ double _contrast(Color foreground, Color background) {
 }
 
 void main() {
-  test('should_expose_light_warm_orange_tokens', () {
-    expect(AppColors.blue, const Color(0xFFFF7A1A));
-    expect(AppColors.bluePressed, const Color(0xFFFF6A00));
-    expect(AppColors.secondary, const Color(0xFFFF6A8A));
-    expect(AppColors.ink, const Color(0xFFFFF8F0));
-    expect(AppColors.surfaceTop, const Color(0xFFFFE9D6));
-    expect(AppColors.card, const Color(0xFFFFFFFF));
-    expect(AppColors.onSurface, const Color(0xFF1F1B16));
-    expect(AppColors.muted, const Color(0xFF8C837B));
-    expect(AppColors.subtle, const Color(0xFFB3AAA1));
-    expect(AppColors.border, const Color(0xFFF0E4D6));
-    expect(AppColors.badgePink, const Color(0xFFFFE3EC));
-    expect(AppColors.badgePinkText, const Color(0xFFFF6A8A));
+  test('should_expose_dark_visual_tokens', () {
+    expect(AppColors.blue, const Color(0xFFFF6B2C));
+    expect(AppColors.bluePressed, const Color(0xFFE55A1F));
+    expect(AppColors.secondary, const Color(0xFFB0B0B0));
+    expect(AppColors.ink, const Color(0xFF000000));
+    expect(AppColors.card, const Color(0xFF16161A));
+    expect(AppColors.cardAlt, const Color(0xFF101010));
+    expect(AppColors.raised, const Color(0xFF1C1C1E));
+    expect(AppColors.border, const Color(0xFF1C1C1E));
+    expect(AppColors.textPrimary, const Color(0xFFFFFFFF));
+    expect(AppColors.textSecondary, const Color(0xFFB0B0B0));
+    expect(AppColors.textTertiary, const Color(0xFF8E8E93));
+    expect(AppColors.onSurface, const Color(0xEBFFFFFF));
+    expect(AppColors.muted, const Color(0xA3FFFFFF));
+    expect(AppColors.subtle, const Color(0x61FFFFFF));
+    expect(AppDimens.cardRadius, 12);
+    expect(AppDimens.buttonRadius, 10);
+    expect(AppDimens.inputRadius, 10);
+    expect(AppDimens.chipRadius, 6);
   });
 
-  test('should_keep_primary_text_readable_on_warm_background', () {
+  test('should_keep_primary_and_secondary_text_readable_on_dark', () {
     expect(
       _contrast(AppColors.onSurface, AppColors.ink),
       greaterThanOrEqualTo(4.5),
     );
+    expect(
+      _contrast(AppColors.onSurface, AppColors.card),
+      greaterThanOrEqualTo(4.5),
+    );
     expect(_contrast(AppColors.muted, AppColors.card), greaterThanOrEqualTo(3));
+    expect(_contrast(AppColors.gold, AppColors.ink), greaterThanOrEqualTo(3));
+    expect(_contrast(AppColors.blue, AppColors.ink), greaterThanOrEqualTo(3));
   });
 
-  test('should_use_light_color_scheme_and_dark_system_icons', () {
-    final theme = AppTheme.light();
+  test('should_use_dark_color_scheme_and_light_system_icons', () {
+    final theme = AppTheme.dark();
 
-    expect(theme.brightness, Brightness.light);
+    expect(theme.brightness, Brightness.dark);
     expect(theme.colorScheme.primary, AppColors.blue);
     expect(theme.colorScheme.onPrimary, AppColors.onPrimary);
+    expect(theme.colorScheme.secondary, AppColors.secondary);
     expect(theme.colorScheme.surface, AppColors.ink);
     expect(theme.colorScheme.onSurface, AppColors.onSurface);
     expect(theme.colorScheme.outline, AppColors.border);
     expect(theme.scaffoldBackgroundColor, AppColors.ink);
-    expect(theme.appBarTheme.systemOverlayStyle, SystemUiOverlayStyle.dark);
+    expect(theme.appBarTheme.backgroundColor, AppColors.transparent);
+    expect(theme.appBarTheme.systemOverlayStyle, SystemUiOverlayStyle.light);
+    expect(theme.cardTheme.elevation, 0);
+    expect(theme.dialogTheme.backgroundColor, AppColors.raised);
+    expect(
+      theme.bottomNavigationBarTheme.backgroundColor,
+      AppColors.navBackground,
+    );
+    expect(theme.inputDecorationTheme.fillColor, AppColors.input);
   });
 
-  test('should_use_ink_navigation_bar_without_contrast_scrim', () {
+  test('should_use_ink_navigation_bar_with_light_icons', () {
     expect(appSystemOverlayStyle.statusBarColor, Colors.transparent);
+    expect(appSystemOverlayStyle.statusBarIconBrightness, Brightness.light);
     expect(appSystemOverlayStyle.systemNavigationBarColor, AppColors.ink);
     expect(
       appSystemOverlayStyle.systemNavigationBarDividerColor,
@@ -61,20 +84,25 @@ void main() {
     );
     expect(
       appSystemOverlayStyle.systemNavigationBarIconBrightness,
-      Brightness.dark,
+      Brightness.light,
     );
     expect(appSystemOverlayStyle.systemNavigationBarContrastEnforced, isFalse);
 
-    final sheetTheme = AppTheme.light().bottomSheetTheme;
+    final sheetTheme = AppTheme.dark().bottomSheetTheme;
     expect(sheetTheme.backgroundColor, Colors.transparent);
     expect(sheetTheme.modalBackgroundColor, Colors.transparent);
     expect(sheetTheme.surfaceTintColor, Colors.transparent);
   });
 
-  test('should_expose_page_gradient_and_soft_card_shadow', () {
-    expect(AppTheme.pageGradient.colors, [AppColors.surfaceTop, AppColors.ink]);
+  test('should_expose_flat_page_gradient_without_card_shadow', () {
+    expect(AppTheme.pageGradient.colors, [
+      AppColors.mineGradientTop,
+      AppColors.mineGradientMiddle,
+      AppColors.mineGradientBottom,
+    ]);
+    expect(AppTheme.pageGradient.stops, [0, 0.4, 0.75]);
     expect(AppTheme.cardShadow.color, AppColors.cardShadow);
-    expect(AppTheme.cardShadow.blurRadius, 18);
-    expect(AppTheme.cardShadow.offset, const Offset(0, 6));
+    expect(AppTheme.cardShadow.blurRadius, 0);
+    expect(AppTheme.cardShadow.offset, Offset.zero);
   });
 }
diff --git a/test/theme/dark_theme_smoke_test.dart b/test/theme/dark_theme_smoke_test.dart
new file mode 100644
index 0000000..7ece6f6
--- /dev/null
+++ b/test/theme/dark_theme_smoke_test.dart
@@ -0,0 +1,117 @@
+// Author: fruit.com.cn
+
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:fruitshorts/core/data/remote/api_client.dart';
+import 'package:fruitshorts/core/data/remote/auth_api.dart';
+import 'package:fruitshorts/core/data/services/auth_controller.dart';
+import 'package:fruitshorts/core/data/services/auth_session_store.dart';
+import 'package:fruitshorts/core/theme/app_colors.dart';
+import 'package:fruitshorts/core/theme/app_theme.dart';
+import 'package:fruitshorts/l10n/app_localizations.dart';
+import 'package:fruitshorts/pages/watch_records/watch_records_page.dart';
+import 'package:provider/provider.dart';
+import 'package:shared_preferences_platform_interface/in_memory_shared_preferences_async.dart';
+import 'package:shared_preferences_platform_interface/shared_preferences_async_platform_interface.dart';
+
+import '../support/fake_http_adapter.dart';
+
+void main() {
+  setUp(() {
+    SharedPreferencesAsyncPlatform.instance =
+        InMemorySharedPreferencesAsync.empty();
+  });
+
+  testWidgets('should_render_material_app_with_dark_default_theme', (
+    tester,
+  ) async {
+    await tester.pumpWidget(
+      MaterialApp(
+        theme: AppTheme.dark(),
+        darkTheme: AppTheme.dark(),
+        themeMode: ThemeMode.dark,
+        locale: const Locale('en'),
+        localizationsDelegates: AppLocalizations.localizationsDelegates,
+        supportedLocales: AppLocalizations.supportedLocales,
+        home: Scaffold(
+          key: const Key('dark-smoke-scaffold'),
+          appBar: AppBar(title: const Text('Dark')),
+          body: Card(
+            key: const Key('dark-smoke-card'),
+            child: ListTile(
+              title: Text(
+                'Primary',
+                style: TextStyle(color: AppColors.onSurface),
+              ),
+              subtitle: Text('Muted', style: TextStyle(color: AppColors.muted)),
+              trailing: Text('128', style: TextStyle(color: AppColors.gold)),
+            ),
+          ),
+          bottomNavigationBar: NavigationBar(
+            selectedIndex: 0,
+            destinations: const [
+              NavigationDestination(icon: Icon(Icons.home), label: 'Home'),
+              NavigationDestination(icon: Icon(Icons.person), label: 'Mine'),
+            ],
+          ),
+        ),
+      ),
+    );
+    await tester.pumpAndSettle();
+
+    final context = tester.element(
+      find.byKey(const Key('dark-smoke-scaffold')),
+    );
+    final theme = Theme.of(context);
+    expect(theme.brightness, Brightness.dark);
+    expect(theme.scaffoldBackgroundColor, AppColors.ink);
+    expect(theme.appBarTheme.backgroundColor, AppColors.transparent);
+    expect(theme.cardTheme.color, AppColors.card);
+
+    final card = tester.widget<Card>(find.byKey(const Key('dark-smoke-card')));
+    expect(card.color ?? theme.cardTheme.color, AppColors.card);
+    expect(find.text('Primary'), findsOneWidget);
+    expect(find.text('Muted'), findsOneWidget);
+    expect(find.text('128'), findsOneWidget);
+  });
+
+  testWidgets('should_render_watch_records_page_on_dark_surface', (
+    tester,
+  ) async {
+    final auth = AuthController(
+      AuthApi(
+        ApiClient(
+          baseUrl: 'http://127.0.0.1:1',
+          adapter: FakeHttpAdapter(
+            (_) async =>
+                FakeHttpResponse('{"code":0,"message":"ok","data":null}'),
+          ),
+        ),
+      ),
+      AuthSessionStore(),
+    );
+
+    await tester.pumpWidget(
+      ChangeNotifierProvider<AuthController>.value(
+        value: auth,
+        child: MaterialApp(
+          theme: AppTheme.dark(),
+          darkTheme: AppTheme.dark(),
+          themeMode: ThemeMode.dark,
+          locale: const Locale('en'),
+          localizationsDelegates: AppLocalizations.localizationsDelegates,
+          supportedLocales: AppLocalizations.supportedLocales,
+          home: const WatchRecordsPage(),
+        ),
+      ),
+    );
+    await tester.pumpAndSettle();
+
+    final scaffold = tester.widget<Scaffold>(
+      find.byKey(const Key('watch-records-page')),
+    );
+    expect(scaffold.backgroundColor, AppColors.ink);
+    expect(find.byKey(const Key('auth-gate-panel')), findsOneWidget);
+    expect(find.byType(Scaffold), findsOneWidget);
+  });
+}
diff --git a/test/watch/watch_api_test.dart b/test/watch/watch_api_test.dart
new file mode 100644
index 0000000..3214b41
--- /dev/null
+++ b/test/watch/watch_api_test.dart
@@ -0,0 +1,97 @@
+// Author: fruit.com.cn
+
+import 'dart:convert';
+
+import 'package:flutter_test/flutter_test.dart';
+import 'package:fruitshorts/core/data/remote/api_client.dart';
+import 'package:fruitshorts/core/data/remote/watch_api.dart';
+
+import '../support/fake_http_adapter.dart';
+
+void main() {
+  test('should_request_recent_with_page_and_parse_display_fields', () async {
+    final adapter = FakeHttpAdapter(
+      (_) async => FakeHttpResponse(
+        jsonEncode({
+          'code': 0,
+          'message': 'ok',
+          'data': {
+            'total': '18',
+            'list': [
+              {
+                'dramaId': '12',
+                'episodeId': '88',
+                'dramaTitle': '剧名',
+                'dramaCover': '/files/12.png',
+                'episodeNumber': 6,
+                'totalEpisodes': 68,
+                'positionMs': '80000',
+                'durationMs': '120000',
+              },
+            ],
+          },
+        }),
+      ),
+    );
+    final api = WatchApi(
+      ApiClient(baseUrl: 'http://127.0.0.1:8081', adapter: adapter),
+    );
+
+    final page = await api.recent(pageIndex: 2, pageSize: 10);
+
+    final request = adapter.requests.single;
+    expect(request.uri.path, '/app/watch/recent');
+    expect(request.queryParameters['pageIndex'], '2');
+    expect(request.queryParameters['pageSize'], '10');
+    expect(request.queryParameters.containsKey('limit'), isFalse);
+    expect(page.total, 18);
+    expect(page.list.single.dramaTitle, '剧名');
+    expect(page.list.single.dramaCover, '/files/12.png');
+    expect(page.list.single.episodeNumber, 6);
+    expect(page.list.single.totalEpisodes, 68);
+  });
+
+  test('should_return_empty_page_when_recent_list_is_empty', () async {
+    final adapter = FakeHttpAdapter(
+      (_) async => FakeHttpResponse(
+        jsonEncode({
+          'code': 0,
+          'message': 'ok',
+          'data': {'total': '0', 'list': <Object>[]},
+        }),
+      ),
+    );
+    final api = WatchApi(
+      ApiClient(baseUrl: 'http://127.0.0.1:8081', adapter: adapter),
+    );
+
+    final page = await api.recent();
+
+    expect(page.total, 0);
+    expect(page.list, isEmpty);
+  });
+
+  test('should_throw_api_exception_when_recent_response_is_error', () async {
+    final adapter = FakeHttpAdapter(
+      (_) async => FakeHttpResponse(
+        jsonEncode({'code': 401, 'message': 'unauthorized', 'data': null}),
+      ),
+    );
+    final api = WatchApi(
+      ApiClient(
+        baseUrl: 'http://127.0.0.1:8081',
+        adapter: adapter,
+        tokenRefresher: null,
+      ),
+    );
+
+    await expectLater(
+      () => api.recent(),
+      throwsA(
+        isA<ApiException>()
+            .having((e) => e.code, 'code', 401)
+            .having((e) => e.message, 'message', 'unauthorized'),
+      ),
+    );
+  });
+}
diff --git a/test/watch/watch_records_controller_test.dart b/test/watch/watch_records_controller_test.dart
index 105f17d..5a415fa 100644
--- a/test/watch/watch_records_controller_test.dart
+++ b/test/watch/watch_records_controller_test.dart
@@ -6,6 +6,7 @@ import 'package:flutter_test/flutter_test.dart';
 import 'package:fruitshorts/core/data/models/drama.dart';
 import 'package:fruitshorts/core/data/models/feed_page.dart';
 import 'package:fruitshorts/core/data/models/home_feed.dart';
+import 'package:fruitshorts/core/data/models/page_result.dart';
 import 'package:fruitshorts/core/data/models/watch_progress.dart';
 import 'package:fruitshorts/core/data/repositories/catalog_repository.dart';
 import 'package:fruitshorts/core/data/repositories/watch_history_repository.dart';
@@ -15,11 +16,13 @@ import 'package:fruitshorts/core/data/services/watch_records_controller.dart';
 WatchProgress _progress(
   String dramaId, {
   String episodeId = 'episode-1',
+  String? dramaTitle,
   int positionMs = 12000,
   int durationMs = 60000,
 }) => WatchProgress(
   dramaId: dramaId,
   episodeId: episodeId,
+  dramaTitle: dramaTitle,
   position: Duration(milliseconds: positionMs),
   duration: Duration(milliseconds: durationMs),
   updatedAt: DateTime(2026, 10, 17, 12),
@@ -73,6 +76,27 @@ void main() {
     expect(controller.error, isNull);
   });
 
+  test('should_use_backend_title_and_skip_detail_until_opened', () async {
+    final history = ControlledWatchHistory([
+      _progress('12', dramaTitle: '后端标题'),
+    ]);
+    final catalog = ScriptedWatchCatalog();
+    final controller = WatchRecordsController(
+      history: history,
+      catalog: catalog,
+    );
+
+    await controller.load();
+
+    expect(controller.records.single.displayTitle, '后端标题');
+    expect(catalog.calls, isEmpty);
+
+    final detail = await controller.detailForOpen('12');
+
+    expect(detail?.id, '12');
+    expect(catalog.calls, ['12']);
+  });
+
   test('should_reuse_cached_details_when_records_are_loaded_again', () async {
     final history = ControlledWatchHistory([_progress('1'), _progress('2')]);
     final catalog = ScriptedWatchCatalog();
@@ -93,6 +117,55 @@ void main() {
     );
   });
 
+  test('should_append_unique_records_and_stop_when_no_more_pages', () async {
+    final history = _PagedWatchHistory({
+      1: PageResult(total: 3, list: [_progress('1'), _progress('2')]),
+      2: PageResult(total: 3, list: [_progress('2'), _progress('3')]),
+    });
+    final catalog = ScriptedWatchCatalog();
+    final controller = WatchRecordsController(
+      history: history,
+      catalog: catalog,
+      pageSize: 2,
+    );
+
+    await controller.load();
+    await controller.loadMore();
+    await controller.loadMore();
+
+    expect(controller.records.map((record) => record.dramaId), ['1', '2', '3']);
+    expect(controller.total, 3);
+    expect(controller.hasMore, isFalse);
+    expect(history.pageRequests, [1, 2]);
+    expect(catalog.calls, ['1', '2', '3']);
+  });
+
+  test('should_retry_next_page_when_watch_load_more_fails', () async {
+    final history = _PagedWatchHistory({
+      1: PageResult(total: 2, list: [_progress('1')]),
+      2: PageResult(total: 2, list: [_progress('2')]),
+    })..failPages.add(2);
+    final controller = WatchRecordsController(
+      history: history,
+      catalog: ScriptedWatchCatalog(),
+      pageSize: 1,
+    );
+
+    await controller.load();
+    await controller.loadMore();
+
+    expect(controller.records.map((record) => record.dramaId), ['1']);
+    expect(controller.loadMoreError, 'progressError');
+    expect(controller.hasMore, isTrue);
+
+    history.failPages.clear();
+    await controller.loadMore();
+
+    expect(controller.records.map((record) => record.dramaId), ['1', '2']);
+    expect(controller.loadMoreError, isNull);
+    expect(history.pageRequests, [1, 2, 2]);
+  });
+
   test('should_keep_existing_records_when_refresh_fails', () async {
     final history = ControlledWatchHistory([_progress('1')]);
     final controller = WatchRecordsController(
@@ -213,6 +286,7 @@ class ControlledWatchHistory implements WatchHistoryRepository {
   final List<WatchProgress> items;
   bool failRecent = false;
   Object? recentError;
+  final List<int> recentPages = [];
   bool failRemove = false;
   bool failClear = false;
   Completer<void>? removeGate;
@@ -230,10 +304,21 @@ class ControlledWatchHistory implements WatchHistoryRepository {
   }) async => null;
 
   @override
-  Future<List<WatchProgress>> recent({int limit = 20}) async {
+  Future<PageResult<WatchProgress>> recent({
+    int pageIndex = 1,
+    int pageSize = 20,
+  }) async {
+    recentPages.add(pageIndex);
     if (recentError != null) throw recentError!;
     if (failRecent) throw StateError('recent unavailable');
-    return items.take(limit).toList();
+    final offset = (pageIndex - 1) * pageSize;
+    if (offset >= items.length) {
+      return PageResult(total: items.length);
+    }
+    return PageResult(
+      total: items.length,
+      list: items.skip(offset).take(pageSize).toList(),
+    );
   }
 
   @override
@@ -285,3 +370,40 @@ class ScriptedWatchCatalog implements CatalogRepository {
     return _detail(dramaId);
   }
 }
+
+class _PagedWatchHistory implements WatchHistoryRepository {
+  _PagedWatchHistory(this.pages);
+
+  final Map<int, PageResult<WatchProgress>> pages;
+  final List<int> pageRequests = [];
+  final Set<int> failPages = {};
+
+  @override
+  Future<PageResult<WatchProgress>> recent({
+    int pageIndex = 1,
+    int pageSize = 20,
+  }) async {
+    pageRequests.add(pageIndex);
+    if (failPages.contains(pageIndex)) {
+      throw StateError('page unavailable');
+    }
+    return pages[pageIndex] ?? const PageResult();
+  }
+
+  @override
+  Future<WatchProgress?> progressFor(String dramaId) async => null;
+
+  @override
+  Future<WatchProgress?> save({
+    required String episodeId,
+    required Duration position,
+    Duration? duration,
+    bool finished = false,
+  }) async => null;
+
+  @override
+  Future<void> remove(String dramaId) async {}
+
+  @override
+  Future<void> clear() async {}
+}
diff --git a/test/watch/watch_records_page_test.dart b/test/watch/watch_records_page_test.dart
index 4d4cca0..9b8fc26 100644
--- a/test/watch/watch_records_page_test.dart
+++ b/test/watch/watch_records_page_test.dart
@@ -6,6 +6,7 @@ import 'package:fruitshorts/app.dart';
 import 'package:fruitshorts/core/data/models/drama.dart';
 import 'package:fruitshorts/core/data/models/feed_page.dart';
 import 'package:fruitshorts/core/data/models/home_feed.dart';
+import 'package:fruitshorts/core/data/models/page_result.dart';
 import 'package:fruitshorts/core/data/models/watch_progress.dart';
 import 'package:fruitshorts/core/data/remote/api_client.dart';
 import 'package:fruitshorts/core/data/remote/auth_api.dart';
@@ -98,6 +99,53 @@ void main() {
     expect(list.physics, AppPullToRefresh.physics);
   });
 
+  testWidgets('should_render_backend_title_episode_and_cover_metadata', (
+    tester,
+  ) async {
+    final auth = await _auth(signedIn: true);
+    final history = CountingWatchHistory([
+      _progress(
+        'metadata',
+        dramaTitle: 'Backend Title',
+        dramaCover: '/files/backend.png',
+        episodeNumber: 3,
+      ),
+    ]);
+    final catalog = _AlwaysFailingWatchCatalog();
+
+    await _pumpPage(tester, auth: auth, history: history, catalog: catalog);
+
+    expect(find.text('Backend Title'), findsOneWidget);
+    expect(find.text('Episode 3'), findsOneWidget);
+    expect(catalog.calls, isEmpty);
+    expect(
+      find.byKey(const Key('watch-record-cover-metadata')),
+      findsOneWidget,
+    );
+  });
+
+  testWidgets('should_fallback_to_episode_title_and_cover_placeholder', (
+    tester,
+  ) async {
+    final auth = await _auth(signedIn: true);
+    final history = CountingWatchHistory([
+      _progress('fallback', dramaTitle: '', episodeNumber: 4),
+    ]);
+
+    await _pumpPage(
+      tester,
+      auth: auth,
+      history: history,
+      catalog: _AlwaysFailingWatchCatalog(),
+    );
+
+    expect(find.text('Episode 4'), findsOneWidget);
+    expect(
+      find.byKey(const Key('watch-record-cover-placeholder-fallback')),
+      findsOneWidget,
+    );
+  });
+
   testWidgets(
     'should_show_failed_placeholder_and_keep_other_cards_when_detail_fails',
     (tester) async {
@@ -238,9 +286,17 @@ void main() {
   });
 }
 
-WatchProgress _progress(String dramaId) => WatchProgress(
+WatchProgress _progress(
+  String dramaId, {
+  String? dramaTitle,
+  String? dramaCover,
+  int? episodeNumber,
+}) => WatchProgress(
   dramaId: dramaId,
   episodeId: '$dramaId-1',
+  dramaTitle: dramaTitle,
+  dramaCover: dramaCover,
+  episodeNumber: episodeNumber,
   position: const Duration(seconds: 12),
   duration: const Duration(seconds: 60),
   updatedAt: DateTime(2026, 10, 17, 12),
@@ -300,9 +356,19 @@ class CountingWatchHistory extends InMemoryWatchHistoryRepository {
   int clearCalls = 0;
 
   @override
-  Future<List<WatchProgress>> recent({int limit = 20}) async {
+  Future<PageResult<WatchProgress>> recent({
+    int pageIndex = 1,
+    int pageSize = 20,
+  }) async {
     recentCalls++;
-    return visibleRecords.take(limit).toList();
+    final offset = (pageIndex - 1) * pageSize;
+    if (offset >= visibleRecords.length) {
+      return PageResult(total: visibleRecords.length);
+    }
+    return PageResult(
+      total: visibleRecords.length,
+      list: visibleRecords.skip(offset).take(pageSize).toList(),
+    );
   }
 
   @override
@@ -314,7 +380,10 @@ class CountingWatchHistory extends InMemoryWatchHistoryRepository {
 
 class _FailingRecentHistory extends InMemoryWatchHistoryRepository {
   @override
-  Future<List<WatchProgress>> recent({int limit = 20}) async {
+  Future<PageResult<WatchProgress>> recent({
+    int pageIndex = 1,
+    int pageSize = 20,
+  }) async {
     throw const ApiException(100000, '账号不存在，请先注册');
   }
 }
@@ -347,3 +416,27 @@ class _FailingWatchCatalog implements CatalogRepository {
     return _delegate.fetchDrama(dramaId);
   }
 }
+
+class _AlwaysFailingWatchCatalog implements CatalogRepository {
+  final List<String> calls = [];
+
+  @override
+  Future<Drama> fetchDrama(String dramaId) async {
+    calls.add(dramaId);
+    throw StateError('missing detail');
+  }
+
+  @override
+  Future<HomeFeed> fetchDiscoverFeed() async => const HomeFeed();
+
+  @override
+  Future<FeedPage> fetchFeed({
+    List<String> types = const [],
+    String? categoryId,
+    String? cursor,
+    int size = 10,
+  }) async => const FeedPage();
+
+  @override
+  Future<HomeFeed> fetchHomeFeed() async => const HomeFeed();
+}
diff --git a/test/widget_test.dart b/test/widget_test.dart
index 43556a7..b8c4d3d 100644
--- a/test/widget_test.dart
+++ b/test/widget_test.dart
@@ -66,9 +66,10 @@ void main() {
     await tester.pumpAndSettle();
     // 首页 feed 启动会创建首个播放器，先清掉再统计剧场播放器。
     created.clear();
-    await _openTheaterPlayer(tester);
+    await _openFullPlayerFromHomeGrid(tester);
 
-    expect(created, hasLength(2));
+    expect(created, isNotEmpty);
+    final createdBeforeSwipe = created.length;
     expect(find.byType(CircularProgressIndicator), findsNothing);
     await tester.drag(find.byType(PageView).last, const Offset(0, -550));
     await tester.pumpAndSettle();
@@ -77,8 +78,8 @@ void main() {
       tester.widget<Text>(find.byKey(const Key('player-episode-heading'))).data,
       contains('Episode 2'),
     );
-    expect(created, hasLength(3));
-    expect(created.toSet(), hasLength(3));
+    expect(created.length, greaterThan(createdBeforeSwipe));
+    expect(created, contains('city-lights-demo-2'));
   });
 
   testWidgets('should_open_fullscreen_player_when_theater_card_is_tapped', (
@@ -86,7 +87,7 @@ void main() {
   ) async {
     await tester.pumpWidget(appUnderTest());
     await tester.pumpAndSettle();
-    await _openTheaterPlayer(tester);
+    await _openFullPlayerFromHomeGrid(tester);
 
     final player = tester.widget<PlayerPage>(find.byType(PlayerPage).last);
     expect(player.homeMode, isFalse);
@@ -103,26 +104,20 @@ void main() {
 
     await tester.pumpWidget(appUnderTest());
     await tester.pumpAndSettle();
-    await _openTheaterPlayer(tester);
+    await _openFullPlayerFromHomeGrid(tester);
     expect(find.byType(PlayerPage), findsOneWidget);
 
     await tester.tap(find.byKey(const Key('player-back')));
     await tester.pumpAndSettle();
-    expect(find.byKey(const Key('home-all-dramas-grid')), findsOneWidget);
+    expect(find.byKey(const Key('home-grid')), findsOneWidget);
     expect(
-      Navigator.of(
-        tester.element(find.byKey(const Key('home-all-dramas-grid'))),
-      ).canPop(),
+      Navigator.of(tester.element(find.byKey(const Key('home-grid')))).canPop(),
       isFalse,
     );
 
-    await tester.binding.handlePopRoute();
+    await tester.tap(find.byKey(const Key('tab-follow')));
     await tester.pumpAndSettle();
-    expect(find.byKey(const Key('home-feed-title')), findsOneWidget);
-
-    await tester.tap(find.byKey(const Key('tab-create')));
-    await tester.pumpAndSettle();
-    expect(find.byKey(const Key('create-page')), findsOneWidget);
+    expect(find.byKey(const Key('following-page')), findsOneWidget);
     await tester.tap(find.byKey(const Key('tab-mine')));
     await tester.pumpAndSettle();
     expect(find.byKey(const Key('mine-menu')), findsOneWidget);
@@ -140,13 +135,13 @@ void main() {
     await tester.tap(find.byKey(const Key('tab-mine')));
     await tester.pumpAndSettle();
     expect(find.text('Vicky sheng'), findsOneWidget);
-    expect(find.text('Coins'), findsOneWidget);
+    expect(find.text('Netshort VIP'), findsOneWidget);
     expect(find.byKey(const Key('mine-language')), findsOneWidget);
     expect(find.byKey(const Key('mine-wallet')), findsOneWidget);
 
-    await tester.tap(find.byKey(const Key('tab-theater')));
+    await tester.tap(find.byKey(const Key('tab-recommend')));
     await tester.pumpAndSettle();
-    expect(find.text('Theater'), findsWidgets);
+    expect(find.text('Recommend'), findsWidgets);
   });
 
   testWidgets('should_switch_app_language_from_mine_menu', (tester) async {
@@ -168,9 +163,9 @@ void main() {
 
     expect(find.text('我的'), findsWidgets);
     expect(find.text('语言'), findsOneWidget);
-    await tester.tap(find.byKey(const Key('tab-theater')));
+    await tester.tap(find.byKey(const Key('tab-recommend')));
     await tester.pumpAndSettle();
-    expect(find.text('剧场'), findsWidgets);
+    expect(find.text('推荐'), findsWidgets);
   });
 
   testWidgets('should_fit_compact_viewport_when_player_is_opened', (
@@ -183,9 +178,10 @@ void main() {
 
     await tester.pumpWidget(appUnderTest());
     await tester.pumpAndSettle();
-    await _openTheaterPlayer(tester);
+    await _openFullPlayerFromHomeGrid(tester);
 
-    expect(find.byKey(const Key('progress-loading')), findsOneWidget);
+    expect(find.byKey(const Key('progress-loading')), findsNothing);
+    expect(find.byKey(const Key('progress-inactive')), findsOneWidget);
     expect(find.byType(Slider), findsNothing);
     await tester.drag(find.byType(PageView), const Offset(0, -500));
     await tester.pumpAndSettle();
@@ -196,9 +192,7 @@ void main() {
     expect(tester.takeException(), isNull);
   });
 
-  testWidgets('should_render_theater_filters_and_grid_on_same_route_tab', (
-    tester,
-  ) async {
+  testWidgets('should_render_home_explorer_grid_on_home_tab', (tester) async {
     tester.view.physicalSize = const Size(360, 720);
     tester.view.devicePixelRatio = 1;
     addTearDown(tester.view.resetPhysicalSize);
@@ -206,13 +200,11 @@ void main() {
 
     await tester.pumpWidget(appUnderTest());
     await tester.pumpAndSettle();
-    await tester.tap(find.byKey(const Key('tab-theater')));
-    await tester.pumpAndSettle();
 
-    expect(find.byKey(const Key('discover-search')), findsOneWidget);
-    expect(find.byKey(const Key('theater-category-chips')), findsOneWidget);
-    expect(find.byKey(const Key('theater-language-chips')), findsNothing);
-    expect(find.byKey(const Key('home-all-dramas-grid')), findsOneWidget);
+    expect(find.byKey(const Key('home-grid')), findsOneWidget);
+    expect(find.byKey(const Key('home-grid-cards')), findsOneWidget);
+    expect(find.byKey(const Key('home-search-entry')), findsOneWidget);
+    expect(find.byKey(const Key('home-secondary-tags')), findsNothing);
     expect(tester.takeException(), isNull);
   });
 
@@ -243,7 +235,7 @@ void main() {
       ),
     );
     await tester.pumpAndSettle();
-    await _openTheaterPlayer(tester);
+    await _openFullPlayerFromHomeGrid(tester);
 
     await tester.tap(find.byKey(const Key('player-rail-comments')));
     await tester.pumpAndSettle();
@@ -283,7 +275,7 @@ void main() {
 
     await tester.pumpWidget(appUnderTest(interactionRepository: interactions));
     await tester.pumpAndSettle();
-    await _openTheaterPlayer(tester);
+    await _openFullPlayerFromHomeGrid(tester);
     await tester.tap(find.byKey(const Key('player-rail-like')));
     await tester.pumpAndSettle();
 
@@ -299,37 +291,24 @@ void main() {
 
     await tester.pumpWidget(appUnderTest());
     await tester.pumpAndSettle();
-    await _openTheaterPlayer(tester);
+    await _openFullPlayerFromHomeGrid(tester);
     await tester.tap(find.byKey(const Key('player-rail-save')));
     await tester.pumpAndSettle();
 
     await tester.tap(find.byKey(const Key('player-back')));
     await tester.pumpAndSettle();
-    await tester.tap(find.byKey(const Key('tab-mine')));
-    await tester.pumpAndSettle();
-    await tester.tap(find.byKey(const Key('mine-watchlist')));
+    await tester.tap(find.byKey(const Key('tab-follow')));
     await tester.pumpAndSettle();
 
     expect(find.text('City Lights & Velvet Nights'), findsWidgets);
   });
 }
 
-Future<void> _openTheaterPlayer(WidgetTester tester) async {
-  await tester.tap(find.byKey(const Key('tab-theater')));
+Future<void> _openFullPlayerFromHomeGrid(WidgetTester tester) async {
+  await tester.tap(find.byKey(const Key('tab-home')));
   await tester.pumpAndSettle();
-  final card = find.byKey(const Key('home-drama-card-city-lights-demo'));
-  await tester.scrollUntilVisible(
-    card,
-    220,
-    scrollable: find
-        .descendant(
-          of: find.byKey(const Key('discover-refresh')),
-          matching: find.byType(Scrollable),
-        )
-        .first,
-  );
+  final card = find.byKey(const Key('home-feed-card-city-lights-demo'));
   await tester.ensureVisible(card);
-  await tester.pumpAndSettle();
   await tester.tap(card);
   await tester.pumpAndSettle();
 }