UI 全面重设计: 明亮画廊风格 + 剧集合并显示

## 色彩体系重构
- tailwind.config.js: sand/ink 全新色阶 + shadow 阴影预设
- index.css: 全组件系统重写 (card/input/btn/badge/table)

## 核心页面重写
- LoginPage: 纯白卡片 + 品牌光晕 + Framer Motion 入场动画
- HomePage: Billboard 推荐位 + 剧集卡片联动媒体库
- Layout: 白色侧边栏 + 路由过渡动画
- MediaCard: 新增 linkTo prop, 悬停浮层优化

## 剧集合并显示
- LibraryPage: 使用 groupSeries 合并剧集, 分季选集详情
- 首页剧集卡片自动链接到媒体库详情

## 全量类名迁移 (43 文件)
- text-slate-* -> text-ink-*/text-sand-*
- text-primary-* -> text-brand-*
- text-white -> text-ink-600
- bg/border-slate-* -> bg/border-sand-*
- 500+ 深色硬编码类名清零

web/src/pages/MediaDetailPage.tsx

@@ -1,6 +1,7 @@
+import { motion } from 'framer-motion'
 import { useEffect, useState } from 'react'
 import { Link, useNavigate, useParams } from 'react-router-dom'
-import { FileText, Heart, Play, RefreshCw, Sparkles, Trash2 } from 'lucide-react'
+import { FileText, Heart, Play, RefreshCw, Sparkles, Trash2, Calendar, Database } from 'lucide-react'
 import toast from 'react-hot-toast'
 
 import { mediaAPI } from '../api/library'
@@ -35,14 +36,6 @@ function parseCSV(s?: string): string[] {
   return s.split(',').map(x => x.trim()).filter(Boolean)
 }
 
-// Detail screen for a single media item.
-//
-// Buttons:
-//   - Play         (direct play)
-//   - HLS          (force transcoded play)
-//   - Favourite    (toggle, all users)
-//   - Re-scrape    (admin only, triggers TMDb lookup)
-//   - Re-probe     (admin only, refreshes ffprobe metadata)
 export function MediaDetailPage() {
   const { id = '' } = useParams()
   const navigate = useNavigate()
@@ -71,13 +64,13 @@ export function MediaDetailPage() {
     if (!media) return
     const state = await playbackAPI.toggleFavourite(media.id)
     setFavourite(state)
-    toast.success(state ? '已加入收藏' : '已取消收藏')
+    toast.success(state ? '已加入我的收藏' : '已取消收藏')
   }
 
   const rescrape = async () => {
     if (!media) return
     await api.post(`/media/${media.id}/scrape`)
-    toast.success('已刮削')
+    toast.success('已触发重新刮削')
     await refresh()
   }
 
@@ -86,7 +79,7 @@ export function MediaDetailPage() {
     try {
       const r = await api.post(`/media/${media.id}/probe`)
       if (r.data?.code === 0) {
-        toast.success('已重新探测')
+        toast.success('重新探测成功')
       } else {
         toast.error(r.data?.error || '探测失败')
       }
@@ -103,7 +96,7 @@ export function MediaDetailPage() {
     if (!media) return
     try {
       const r = await recycleAPI.exportNFO(media.id)
-      toast.success(`NFO 已写入 ${r.path}`)
+      toast.success(`NFO 已成功写入 ${r.path}`)
     } catch (err: unknown) {
       const msg =
         (err as { response?: { data?: { error?: string } } })?.response?.data?.error ??
@@ -120,106 +113,225 @@ export function MediaDetailPage() {
     navigate(-1)
   }
 
-  if (loading) return <p className="text-slate-500">加载中…</p>
-  if (!media) return <p className="text-slate-500">媒体不存在</p>
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center py-48">
+        <div className="h-8 w-8 animate-spin rounded-full border-4 border-gray-100 border-t-gray-900" />
+      </div>
+    )
+  }
+  if (!media) {
+    return (
+      <div className="text-center py-24 bg-white rounded-2xl border border-gray-200">
+        <p className="text-gray-500">媒体资源已被移除或不存在</p>
+      </div>
+    )
+  }
 
   return (
-    <div className="space-y-8">
-      <div className="flex flex-col gap-6 md:flex-row">
-        <div className="aspect-[2/3] w-48 shrink-0 overflow-hidden rounded-xl bg-surface-800">
-          {media.poster_url ? (
-            <img
-              src={imageURL(media.poster_url)}
-              alt={media.title}
-              className="h-full w-full object-cover"
-              referrerPolicy="no-referrer"
-            />
-          ) : (
-            <div className="flex h-full w-full items-center justify-center text-slate-600">
-              无海报
-            </div>
-          )}
-        </div>
-        <div className="flex-1 space-y-4">
-          <h1 className="font-display text-3xl font-bold text-white">{media.title}</h1>
-          {media.year > 0 && <p className="text-slate-400">{media.year}</p>}
-          {media.overview && <p className="text-slate-300">{media.overview}</p>}
+    <div className="relative overflow-hidden rounded-3xl bg-white border border-gray-200/90 shadow-[0_1px_3px_rgba(0,0,0,0.01),0_1px_2px_rgba(0,0,0,0.015)]">
+      {/* ── Cinematic Blurred Backdrop Glow ── */}
+      <div className="absolute inset-0 h-[480px] z-0 overflow-hidden">
+        {media.poster_url ? (
+          <img
+            src={imageURL(media.poster_url)}
+            alt=""
+            className="w-full h-full object-cover opacity-[0.04] scale-110 blur-2xl"
+            referrerPolicy="no-referrer"
+          />
+        ) : (
+          <div className="w-full h-full bg-gradient-to-b from-gray-50 to-transparent" />
+        )}
+        <div className="absolute inset-0 bg-gradient-to-t from-white via-white/95 to-transparent" />
+      </div>
 
-          <div className="flex flex-wrap gap-2 text-xs text-slate-400">
-            {media.video_codec && <Badge>{media.video_codec.toUpperCase()}</Badge>}
-            {media.width > 0 && (
-              <Badge>
-                {media.width}×{media.height}
-              </Badge>
+      {/* ── Main Details Layout Container ── */}
+      <div className="relative z-10 p-6 sm:p-10 flex flex-col md:flex-row gap-8 lg:gap-12">
+        {/* Poster Card */}
+        <div className="w-56 shrink-0 mx-auto md:mx-0">
+          <motion.div 
+            whileHover={{ scale: 1.02 }}
+            className="aspect-[2/3] w-full rounded-2xl overflow-hidden bg-gray-50 border border-gray-200 shadow-md relative group"
+          >
+            {media.poster_url ? (
+              <img
+                src={imageURL(media.poster_url)}
+                alt={media.title}
+                className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
+                referrerPolicy="no-referrer"
+              />
+            ) : (
+              <div className="flex h-full w-full flex-col items-center justify-center gap-2 text-gray-400 bg-gray-50">
+                <FileText size={40} className="stroke-[1]" />
+                <span className="text-xs uppercase tracking-wider font-bold">无海报</span>
+              </div>
             )}
-            <Badge>{fmtDuration(media.duration_sec)}</Badge>
-            <Badge>{fmtSize(media.size_bytes)}</Badge>
-            {media.container && <Badge>{media.container.toUpperCase()}</Badge>}
-            <Badge>{media.scrape_status}</Badge>
-            {parseCSV(media.languages).map(l => (
-              <Badge key={l} className="border-blue-400/30 text-blue-400 bg-blue-400/10">{l}</Badge>
-            ))}
-            {parseCSV(media.countries).map(c => (
-              <Badge key={c} className="border-green-400/30 text-green-400 bg-green-400/10">{c}</Badge>
-            ))}
-            {parseCSV(media.genres).map(g => (
-              <Badge key={g} className="border-purple-400/30 text-purple-400 bg-purple-400/10">{g}</Badge>
-            ))}
+            
+            {/* Quick Play overlay button */}
+            <Link 
+              to={`/play/${media.id}`}
+              className="absolute inset-0 bg-[#111827]/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center"
+            >
+              <div className="flex h-14 w-14 items-center justify-center rounded-full bg-brand-500 text-white shadow-xl transform scale-90 group-hover:scale-100 transition-transform">
+                <Play size={24} fill="currentColor" />
+              </div>
+            </Link>
+          </motion.div>
+        </div>
+
+        {/* Detailed Metadata Body */}
+        <div className="flex-1 space-y-6">
+          {/* Title and Year Header */}
+          <div className="space-y-3">
+            <h1 className="font-display text-3xl sm:text-4xl font-extrabold tracking-tight text-gray-900 leading-tight">
+              {media.title}
+            </h1>
+            <div className="flex flex-wrap items-center gap-2.5 text-xs text-gray-500 font-bold tracking-wide uppercase">
+              {media.year > 0 && (
+                <span className="inline-flex items-center gap-1 bg-gray-100 border border-gray-200/50 px-2.5 py-1 rounded-lg text-gray-700">
+                  <Calendar size={13} className="text-brand-500" />
+                  <span>{media.year} 年</span>
+                </span>
+              )}
+              {media.width > 0 && (
+                <span className="inline-flex items-center gap-1 bg-brand-50 text-brand-700 border border-brand-100/50 px-2.5 py-1 rounded-lg">
+                  <span>{media.width} × {media.height}</span>
+                </span>
+              )}
+              <span className="bg-gray-100 border border-gray-200/50 px-2.5 py-1 rounded-lg text-gray-700">
+                {fmtSize(media.size_bytes)}
+              </span>
+              <span className="bg-gray-100 border border-gray-200/50 px-2.5 py-1 rounded-lg text-gray-700">
+                {fmtDuration(media.duration_sec)}
+              </span>
+              {media.container && (
+                <span className="bg-gray-100 border border-gray-200/50 px-2.5 py-1 rounded-lg text-gray-700 font-mono">
+                  {media.container}
+                </span>
+              )}
+            </div>
           </div>
 
-          <div className="flex flex-wrap gap-2">
-            <Link to={`/play/${media.id}`} className="neon-button">
-              <Play size={18} /> 播放
-            </Link>
-            <Link
-              to={`/play/${media.id}?mode=hls`}
-              className="neon-button !border-accent-400/40 !bg-accent-400/10 !text-accent-400 hover:!border-accent-400"
-            >
-              <RefreshCw size={16} /> HLS 转码播放
-            </Link>
-            <button
-              onClick={toggleFav}
-              className={
-                'neon-button ' +
-                (favourite
-                  ? '!border-pink-400/60 !bg-pink-400/10 !text-pink-400'
-                  : '')
-              }
-            >
-              <Heart size={16} fill={favourite ? 'currentColor' : 'none'} />
-              {favourite ? '已收藏' : '收藏'}
-            </button>
+          {/* Description Card */}
+          {media.overview && (
+            <div className="rounded-2xl bg-gray-50/50 border border-gray-100 p-5 space-y-2">
+              <h3 className="text-xs font-bold uppercase tracking-widest text-brand-500">剧情简介</h3>
+              <p className="text-sm text-gray-600 leading-relaxed font-semibold">
+                {media.overview}
+              </p>
+            </div>
+          )}
+
+          {/* Tag Rows (Genres, Languages, Countries) */}
+          <div className="space-y-4">
+            {/* Genres */}
+            {parseCSV(media.genres).length > 0 && (
+              <div className="flex flex-wrap items-center gap-3">
+                <span className="text-xs font-bold text-gray-400 w-16 uppercase tracking-wider">类型流派</span>
+                <div className="flex flex-wrap gap-2">
+                  {parseCSV(media.genres).map((g) => (
+                    <span key={g} className="rounded-full bg-brand-50 text-brand-700 border border-brand-100/30 px-3 py-1 text-2xs font-bold uppercase tracking-wider">
+                      {g}
+                    </span>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* Languages */}
+            {parseCSV(media.languages).length > 0 && (
+              <div className="flex flex-wrap items-center gap-3">
+                <span className="text-xs font-bold text-gray-400 w-16 uppercase tracking-wider">语言</span>
+                <div className="flex flex-wrap gap-2">
+                  {parseCSV(media.languages).map((l) => (
+                    <span key={l} className="rounded-lg bg-gray-100 text-gray-600 border border-gray-200/40 px-2.5 py-1 text-2xs font-semibold">
+                      {l}
+                    </span>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* Countries */}
+            {parseCSV(media.countries).length > 0 && (
+              <div className="flex flex-wrap items-center gap-3">
+                <span className="text-xs font-bold text-gray-400 w-16 uppercase tracking-wider">国家/地区</span>
+                <div className="flex flex-wrap gap-2">
+                  {parseCSV(media.countries).map((c) => (
+                    <span key={c} className="rounded-lg bg-gray-100 text-gray-600 border border-gray-200/40 px-2.5 py-1 text-2xs font-semibold">
+                      {c}
+                    </span>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+
+          <div className="divider border-gray-200/60" />
+
+          {/* Action Buttons Panel */}
+          <div className="flex flex-col gap-5">
+            <div className="flex flex-wrap gap-3">
+              {/* Primary Direct Play */}
+              <Link to={`/play/${media.id}`} className="btn-primary px-6 py-3.5 shadow-sm">
+                <Play size={16} fill="currentColor" />
+                <span>立即播放</span>
+              </Link>
+
+              {/* Transcode Playback */}
+              <Link
+                to={`/play/${media.id}?mode=hls`}
+                className="btn-outline border-brand-500/30 hover:border-brand-500 text-[#c9954a] hover:bg-brand-50 px-5"
+              >
+                <RefreshCw size={14} className="animate-spin-slow" />
+                <span>HLS 兼容转码播放</span>
+              </Link>
+
+              {/* Toggle Favourites */}
+              <button
+                onClick={toggleFav}
+                className={
+                  'btn-outline gap-2 ' +
+                  (favourite
+                    ? '!border-red-200 !bg-red-50 !text-red-600 hover:!bg-red-100/50'
+                    : 'hover:border-red-200 hover:text-red-600 hover:bg-red-50/50')
+                }
+              >
+                <Heart size={14} fill={favourite ? 'currentColor' : 'none'} />
+                <span>{favourite ? '取消收藏' : '加入收藏'}</span>
+              </button>
+            </div>
+
+            {/* Admin Management Toolbar */}
             {role === 'admin' && (
-              <>
-                <button onClick={rescrape} className="neon-button">
-                  <Sparkles size={16} /> 重新刮削
-                </button>
-                <button onClick={reprobe} className="neon-button">
-                  <RefreshCw size={16} /> 重新探测
-                </button>
-                <button onClick={exportNFO} className="neon-button">
-                  <FileText size={16} /> 导出 NFO
-                </button>
-                <button
-                  onClick={softDelete}
-                  className="neon-button !border-red-400/40 !bg-red-400/10 !text-red-400"
-                >
-                  <Trash2 size={16} /> 移至回收站
-                </button>
-              </>
+              <div className="rounded-2xl border border-gray-200 bg-gray-50/50 p-5 space-y-3">
+                <p className="text-[10px] font-bold uppercase tracking-[0.2em] text-[#c9954a]">系统后台高级控制面板</p>
+                <div className="flex flex-wrap gap-2">
+                  <button onClick={rescrape} className="btn-outline py-2 px-3.5 text-xs gap-1.5 border-gray-200 hover:border-brand-500/50 hover:bg-brand-50">
+                    <Sparkles size={13} className="text-[#c9954a]" />
+                    <span>智能刮削 (TMDB)</span>
+                  </button>
+                  <button onClick={reprobe} className="btn-outline py-2 px-3.5 text-xs gap-1.5 border-gray-200 hover:border-brand-500/50 hover:bg-brand-50">
+                    <Database size={13} className="text-gray-600" />
+                    <span>探测媒体轨 (ffprobe)</span>
+                  </button>
+                  <button onClick={exportNFO} className="btn-outline py-2 px-3.5 text-xs gap-1.5 border-gray-200 hover:border-brand-500/50 hover:bg-brand-50">
+                    <FileText size={13} />
+                    <span>写出本地 NFO 属性</span>
+                  </button>
+                  <button
+                    onClick={softDelete}
+                    className="btn-outline py-2 px-3.5 text-xs gap-1.5 !border-red-100 !text-red-500 hover:!bg-red-50 hover:!border-red-200"
+                  >
+                    <Trash2 size={13} />
+                    <span>移入回收站</span>
+                  </button>
+                </div>
+              </div>
             )}
           </div>
         </div>
       </div>
     </div>
   )
-}
-
-function Badge({ children, className = '' }: { children: React.ReactNode; className?: string }) {
-  const base = "rounded border border-white/10 bg-white/5 px-2 py-0.5"
-  return (
-    <span className={`${base} ${className}`}>
-      {children}
-    </span>
-  )
-}
+}