diff --git a/web/index.html b/web/index.html
index 6965c8e..ceab191 100644
--- a/web/index.html
+++ b/web/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="theme-color" content="#111110" />
+    <meta name="theme-color" content="#faf8f5" />
     <meta name="description" content="MediaStationGo — 个人家庭媒体中心" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
diff --git a/web/src/App.tsx b/web/src/App.tsx
index d43d3f4..7103585 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -100,7 +100,7 @@ const StorageConfigPage = lazy(() =>
   import('./pages/StorageConfigPage').then((m) => ({ default: m.StorageConfigPage })),
 )
 
-const Loading = () => <p className="px-6 py-8 text-slate-500">加载中…</p>
+const Loading = () => <p className="px-6 py-8 text-sand-500">加载中…</p>
 
 export default function App() {
   return (
diff --git a/web/src/components/APIConfigsPanel.tsx b/web/src/components/APIConfigsPanel.tsx
index 265ce39..4feffad 100644
--- a/web/src/components/APIConfigsPanel.tsx
+++ b/web/src/components/APIConfigsPanel.tsx
@@ -23,10 +23,10 @@ export function APIConfigsPanel() {
   return (
     <div className="space-y-4">
       <div className="flex items-center gap-3">
-        <KeyRound className="h-5 w-5 text-primary-400" />
+        <KeyRound className="h-5 w-5 text-brand-500" />
         <div>
-          <p className="font-display text-lg font-semibold text-white">外部 API 配置</p>
-          <p className="text-xs text-slate-400">
+          <p className="font-display text-lg font-semibold text-ink-600">外部 API 配置</p>
+          <p className="text-xs text-ink-50">
             TMDb / Bangumi / TheTVDB / Fanart / OpenAI / Douban 密钥管理
             · AES-GCM 加密存储
           </p>
@@ -34,13 +34,13 @@ export function APIConfigsPanel() {
       </div>
 
       {loading && (
-        <p className="py-6 text-center text-sm text-slate-500">加载中…</p>
+        <p className="py-6 text-center text-sm text-sand-500">加载中…</p>
       )}
 
       {!loading && (
         <div className="glass-panel overflow-hidden">
           <table className="w-full text-left text-sm">
-            <thead className="border-b border-white/5 text-xs uppercase tracking-wider text-slate-500">
+            <thead className="border-b border-white/5 text-xs uppercase tracking-wider text-sand-500">
               <tr>
                 <th className="px-4 py-3">服务</th>
                 <th className="px-4 py-3">密钥</th>
@@ -66,16 +66,16 @@ export function APIConfigsPanel() {
                     className="border-t border-white/5 transition hover:bg-white/[0.02]"
                   >
                     <td className="px-4 py-3">
-                      <p className="font-medium text-white">{item.provider}</p>
+                      <p className="font-medium text-ink-600">{item.provider}</p>
                       {item.description && (
-                        <p className="text-xs text-slate-500">{item.description}</p>
+                        <p className="text-xs text-sand-500">{item.description}</p>
                       )}
                     </td>
                     <td className="px-4 py-3 font-mono text-xs">
                       {item.has_key ? (
-                        <span className="text-primary-400">{item.masked_key}</span>
+                        <span className="text-brand-500">{item.masked_key}</span>
                       ) : (
-                        <span className="text-slate-600">未配置</span>
+                        <span className="text-sand-400">未配置</span>
                       )}
                     </td>
                     <td className="px-4 py-3">
@@ -84,7 +84,7 @@ export function APIConfigsPanel() {
                           已配置
                         </span>
                       ) : (
-                        <span className="inline-flex items-center gap-1 rounded-full bg-slate-400/10 px-2 py-0.5 text-xs text-slate-500">
+                        <span className="inline-flex items-center gap-1 rounded-full bg-sand-300/40 px-2 py-0.5 text-xs text-sand-500">
                           未配置
                         </span>
                       )}
@@ -93,7 +93,7 @@ export function APIConfigsPanel() {
                       <div className="flex items-center justify-end gap-1">
                         <button
                           onClick={() => setEditing(item.provider)}
-                          className="rounded p-1.5 text-slate-400 transition hover:bg-white/5 hover:text-white"
+                          className="rounded p-1.5 text-ink-50 transition hover:bg-white/5 hover:text-white"
                           title="编辑"
                         >
                           <Save size={14} />
@@ -104,7 +104,7 @@ export function APIConfigsPanel() {
                               `已配置 ${item.has_key ? '✓' : '✗'} 密钥 (在线测试请用对应功能页面)`,
                             )
                           }}
-                          className="rounded p-1.5 text-slate-400 transition hover:bg-white/5 hover:text-slate-200"
+                          className="rounded p-1.5 text-ink-50 transition hover:bg-white/5 hover:text-ink-200"
                           title="查看状态"
                         >
                           <Eye size={14} />
@@ -117,7 +117,7 @@ export function APIConfigsPanel() {
                               toast.success('已清除')
                               refresh()
                             }}
-                            className="rounded p-1.5 text-slate-400 transition hover:bg-red-400/10 hover:text-red-400"
+                            className="rounded p-1.5 text-ink-50 transition hover:bg-red-400/10 hover:text-red-400"
                             title="清除密钥"
                           >
                             <Trash2 size={14} />
@@ -173,8 +173,8 @@ function EditingRow({
     <tr className="border-t border-white/5 bg-primary-400/5">
       <td colSpan={4} className="px-4 py-3">
         <form onSubmit={submit} className="flex flex-wrap items-end gap-3">
-          <span className="text-sm font-medium text-white">{item.provider}</span>
-          <label className="flex-1 text-xs text-slate-400">
+          <span className="text-sm font-medium text-ink-600">{item.provider}</span>
+          <label className="flex-1 text-xs text-ink-50">
             API Key
             <input
               className="input-base mt-1"
@@ -184,7 +184,7 @@ function EditingRow({
               onChange={(e) => setAPIKey(e.target.value)}
             />
           </label>
-          <label className="flex-1 text-xs text-slate-400">
+          <label className="flex-1 text-xs text-ink-50">
             Base URL
             <input
               className="input-base mt-1"
@@ -193,7 +193,7 @@ function EditingRow({
               onChange={(e) => setBaseURL(e.target.value)}
             />
           </label>
-          <label className="flex items-center gap-2 text-xs text-slate-400">
+          <label className="flex items-center gap-2 text-xs text-ink-50">
             <input
               type="checkbox"
               checked={enabled}
@@ -207,7 +207,7 @@ function EditingRow({
           <button
             type="button"
             onClick={onCancel}
-            className="rounded border border-slate-400/30 px-2 py-1.5 text-xs text-slate-400 hover:text-white"
+            className="rounded border border-sand-400/30 px-2 py-1.5 text-xs text-ink-50 hover:text-white"
           >
             <X size={12} />
           </button>
diff --git a/web/src/components/AppFooter.tsx b/web/src/components/AppFooter.tsx
index 2b92479..1289817 100644
--- a/web/src/components/AppFooter.tsx
+++ b/web/src/components/AppFooter.tsx
@@ -1,21 +1,9 @@
 import { Github, Globe, Send } from 'lucide-react'
 
 const LINKS = [
-  {
-    href: 'https://github.com/ShukeBta/MediaStationGo',
-    icon: Github,
-    label: '开源仓库',
-  },
-  {
-    href: 'https://github.com/ShukeBta',
-    icon: Globe,
-    label: '作者主页',
-  },
-  {
-    href: 'https://t.me/MediaStationGo',
-    icon: Send,
-    label: 'TG 群组',
-  },
+  { href: 'https://github.com/ShukeBta/MediaStationGo', icon: Github, label: '开源仓库' },
+  { href: 'https://github.com/ShukeBta', icon: Globe, label: '作者主页' },
+  { href: 'https://t.me/MediaStationGo', icon: Send, label: 'TG 群组' },
 ]
 
 export function AppFooter({ className = '' }: { className?: string }) {
@@ -23,12 +11,12 @@ export function AppFooter({ className = '' }: { className?: string }) {
     <footer className={`flex items-center justify-center gap-1 ${className}`}>
       {LINKS.map((link, i) => (
         <span key={link.href} className="flex items-center">
-          {i > 0 && <span className="mx-2 h-3 w-px bg-cream-900/20" />}
+          {i > 0 && <span className="mx-2 h-3 w-px bg-sand-300" />}
           <a
             href={link.href}
             target="_blank"
             rel="noopener noreferrer"
-            className="flex items-center gap-1.5 rounded-md px-2 py-1.5 text-xs text-cream-500 transition-colors hover:bg-cream-900/10 hover:text-cream-300"
+            className="flex items-center gap-1.5 rounded-lg px-2 py-1.5 text-xs text-sand-500 transition-colors hover:bg-sand-200 hover:text-ink-50"
             title={link.label}
           >
             <link.icon size={14} />
diff --git a/web/src/components/Layout.tsx b/web/src/components/Layout.tsx
index 89dfd04..ebde851 100644
--- a/web/src/components/Layout.tsx
+++ b/web/src/components/Layout.tsx
@@ -1,40 +1,14 @@
-import { useEffect, useState } from 'react'
-import { Link, NavLink, Outlet, useNavigate } from 'react-router-dom'
+﻿import { useEffect, useState } from 'react'
+import { Link, NavLink, Outlet, useLocation, useNavigate } from 'react-router-dom'
+import { AnimatePresence, motion } from 'framer-motion'
 import {
-  Activity,
-  Bell,
-  Cast,
-  Clock,
-  CloudDownload,
-  Compass,
-  Copy,
-  Film,
-  FolderTree,
-  Globe,
-  HardDrive,
-  Heart,
-  Home,
-  GalleryHorizontalEnd,
-  Link2,
-  ListChecks,
-  ListMusic,
-  LogOut,
-  MessageSquare,
-  Rss,
-  Search,
-  Server,
-  Settings,
-  Sliders,
-  Sparkles,
-  Cloud,
-  Trash2,
-  UserCog,
-  Wrench,
-  Library as LibraryIcon,
-  User as UserIcon,
+  Activity, Bell, Cast, Clock, CloudDownload, Compass, Copy, Film,
+  FolderTree, Globe, HardDrive, Heart, Home, GalleryHorizontalEnd,
+  Link2, ListChecks, ListMusic, LogOut, MessageSquare, Rss, Search,
+  Server, Settings, Sliders, Sparkles, Cloud, Trash2, UserCog, Wrench,
+  Library as LibraryIcon, User as UserIcon, ChevronDown, Menu, X
 } from 'lucide-react'
 import clsx from 'clsx'
-
 import { AppFooter } from './AppFooter'
 import { libraryAPI } from '../api/library'
 import { useAuthStore } from '../stores/auth'
@@ -42,180 +16,442 @@ import type { Library } from '../types'
 
 export function Layout() {
   const navigate = useNavigate()
+  const location = useLocation()
   const user = useAuthStore((s) => s.user)
   const logout = useAuthStore((s) => s.logout)
   const [libraries, setLibraries] = useState<Library[]>([])
+  const [isSidebarOpen, setIsSidebarOpen] = useState(true)
+  const [isMobileDrawerOpen, setIsMobileDrawerOpen] = useState(false)
+  const [isProfileOpen, setIsProfileOpen] = useState(false)
+  const [searchFocused, setSearchFocused] = useState(false)
+  const [searchQuery, setSearchQuery] = useState('')
 
+  // Automatically fetch libraries
   useEffect(() => {
     libraryAPI.list().then(setLibraries).catch(() => undefined)
   }, [])
 
-  const handleLogout = () => {
-    logout()
-    navigate('/login')
+  // Auto-collapse sidebar on smaller tablet screens, and auto-hide drawer on path change
+  useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth < 1024) {
+        setIsSidebarOpen(false)
+      } else {
+        setIsSidebarOpen(true)
+      }
+    }
+    handleResize()
+    window.addEventListener('resize', handleResize)
+    return () => window.removeEventListener('resize', handleResize)
+  }, [])
+
+  useEffect(() => {
+    setIsMobileDrawerOpen(false)
+  }, [location.pathname])
+
+  const handleSearchSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    if (searchQuery.trim()) {
+      navigate(`/search?q=${encodeURIComponent(searchQuery.trim())}`)
+    }
   }
 
-  return (
-    <div className="flex min-h-full">
-      {/* ── Sidebar group — collapsed 64px, expands to 240px on hover ── */}
-      <div className="group relative z-30 shrink-0">
-        <aside
-          className={clsx(
-            'flex h-full flex-col border-r border-cream-900/15 bg-surface-600',
-            'w-16 transition-all duration-300 ease-out',
-            'group-hover:w-60',
-          )}
-        >
-          {/* Logo */}
-          <Link to="/" className="flex items-center gap-3 px-4 py-5">
-            <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-brand-500/15">
-              <Film className="h-4 w-4 text-brand-400" />
-            </div>
-            <span
-              className={clsx(
-                'font-display text-lg font-bold tracking-tight text-cream-100',
-                'overflow-hidden whitespace-nowrap opacity-0 transition-opacity duration-200',
-                'group-hover:opacity-100',
-              )}
+  const sidebarContent = (
+    <div className="flex h-full flex-col bg-white border-r border-gray-200/80">
+      {/* Brand Logo & Brand Title */}
+      <div className="flex h-20 items-center justify-between px-6 border-b border-gray-100">
+        <Link to="/" className="flex items-center gap-3">
+          <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-[#111827] to-[#1f2937] shadow-sm">
+            <Film className="h-5 w-5 text-[#c9954a]" />
+          </div>
+          {(isSidebarOpen || isMobileDrawerOpen) && (
+            <motion.span 
+              initial={{ opacity: 0, x: -10 }}
+              animate={{ opacity: 1, x: 0 }}
+              className="font-display text-lg font-extrabold tracking-tight text-[#111827]"
             >
               MediaStation
-            </span>
-          </Link>
+            </motion.span>
+          )}
+        </Link>
+        
+        {/* Toggle Collapse Button for Large Screen */}
+        <button 
+          onClick={() => setIsSidebarOpen(!isSidebarOpen)} 
+          className="rounded-lg p-1.5 text-gray-400 hover:bg-gray-100 hover:text-gray-900 transition-colors hidden lg:block"
+        >
+          <Menu size={18} />
+        </button>
 
-          {/* Navigation */}
-          <nav className="flex-1 space-y-0.5 overflow-y-auto px-2 pb-4">
-            <SidebarLink to="/" icon={<Home size={18} />} label="首页" end />
-
-            <SectionHeader label="浏览" />
-            <SidebarLink to="/discover" icon={<Compass size={18} />} label="发现" />
-            <SidebarLink to="/search" icon={<Search size={18} />} label="搜索" />
-            <SidebarLink to="/favourites" icon={<Heart size={18} />} label="收藏" />
-            <SidebarLink to="/playlists" icon={<ListMusic size={18} />} label="播放列表" />
-            <SidebarLink to="/history" icon={<Clock size={18} />} label="观看历史" />
-            <SidebarLink to="/poster-wall" icon={<GalleryHorizontalEnd size={18} />} label="海报墙" />
-            <SidebarLink to="/ai" icon={<Sparkles size={18} />} label="AI 助手" />
-
-            <SectionHeader label="媒体库" />
-            {libraries.length === 0 && (
-              <div className="hidden px-3 py-1.5 text-xs text-cream-500/50 group-hover:block">
-                暂无媒体库
-              </div>
-            )}
-            {libraries.map((lib) => (
-              <SidebarLink
-                key={lib.id}
-                to={`/library/${lib.id}`}
-                icon={<LibraryIcon size={18} />}
-                label={lib.name}
-              />
-            ))}
-
-            <SectionHeader label="自动化" />
-            <SidebarLink to="/downloads" icon={<CloudDownload size={18} />} label="下载" />
-            <SidebarLink to="/subscriptions" icon={<Rss size={18} />} label="RSS 订阅" />
-            <SidebarLink to="/dlna" icon={<Cast size={18} />} label="DLNA 投屏" />
-            <SidebarLink to="/site-search" icon={<Search size={18} />} label="站点搜索" />
-
-            <SectionHeader label="账号" />
-            <SidebarLink to="/profile" icon={<UserIcon size={18} />} label="个人资料" />
-            <SidebarLink to="/play-profiles" icon={<UserCog size={18} />} label="观影 Profile" />
-
-            {user?.role === 'admin' && (
-              <>
-                <SectionHeader label="管理" />
-                <SidebarLink to="/admin" icon={<Settings size={18} />} label="管理后台" />
-                <SidebarLink to="/tasks" icon={<ListChecks size={18} />} label="实时任务" />
-                <SidebarLink to="/stats" icon={<Activity size={18} />} label="运行状态" />
-                <SidebarLink to="/sites" icon={<Globe size={18} />} label="站点管理" />
-                <SidebarLink to="/notify-channels" icon={<Bell size={18} />} label="通知渠道" />
-                <SidebarLink to="/download-clients" icon={<Server size={18} />} label="下载器" />
-                <SidebarLink to="/scheduler" icon={<Clock size={18} />} label="定时任务" />
-                <SidebarLink to="/storage" icon={<HardDrive size={18} />} label="存储" />
-                <SidebarLink to="/storage-config" icon={<Cloud size={18} />} label="外部存储" />
-                <SidebarLink to="/files" icon={<FolderTree size={18} />} label="文件浏览" />
-                <SidebarLink to="/duplicates" icon={<Copy size={18} />} label="重复文件" />
-                <SidebarLink to="/strm" icon={<Link2 size={18} />} label="STRM 管理" />
-                <SidebarLink to="/tools" icon={<Wrench size={18} />} label="运维工具" />
-                <SidebarLink to="/assistant" icon={<MessageSquare size={18} />} label="AI 对话" />
-                <SidebarLink to="/settings" icon={<Sliders size={18} />} label="系统设置" />
-                <SidebarLink to="/recycle" icon={<Trash2 size={18} />} label="回收站" />
-              </>
-            )}
-          </nav>
-
-          {/* Bottom: logout */}
-          <div className="border-t border-cream-900/15 px-3 py-3">
-            <button
-              onClick={handleLogout}
-              className="flex w-full items-center gap-3 rounded-lg px-2 py-2 text-sm text-cream-400 transition hover:bg-cream-900/10 hover:text-cream-200"
-              title={`退出登录 (${user?.username})`}
-            >
-              <LogOut size={16} />
-              <span className="overflow-hidden whitespace-nowrap opacity-0 transition-opacity duration-200 group-hover:opacity-100">
-                退出
-              </span>
-            </button>
-          </div>
-        </aside>
+        {/* Mobile Drawer Close Button */}
+        <button 
+          onClick={() => setIsMobileDrawerOpen(false)} 
+          className="rounded-lg p-1.5 text-gray-400 hover:bg-gray-100 hover:text-gray-900 transition-colors block lg:hidden"
+        >
+          <X size={18} />
+        </button>
       </div>
 
-      {/* ── Main content ── */}
-      <main className="flex flex-1 flex-col overflow-y-auto">
-        <div className="flex-1 px-6 py-8">
-          <Outlet />
+      {/* Navigation List */}
+      <nav className="flex-1 overflow-y-auto px-4 py-6 space-y-6 scrollbar-hide">
+        {/* Navigation Group: Main */}
+        <div>
+          <SectionHeader label="影音中心" visible={isSidebarOpen || isMobileDrawerOpen} />
+          <div className="space-y-1">
+            <SidebarLink to="/" icon={<Home size={18} />} label="系统首页" end collapsed={!isSidebarOpen && !isMobileDrawerOpen} />
+            <SidebarLink to="/discover" icon={<Compass size={18} />} label="精彩发现" collapsed={!isSidebarOpen && !isMobileDrawerOpen} />
+            <SidebarLink to="/search" icon={<Search size={18} />} label="智能搜索" collapsed={!isSidebarOpen && !isMobileDrawerOpen} />
+            <SidebarLink to="/favourites" icon={<Heart size={18} />} label="我的收藏" collapsed={!isSidebarOpen && !isMobileDrawerOpen} />
+            <SidebarLink to="/playlists" icon={<ListMusic size={18} />} label="播放列表" collapsed={!isSidebarOpen && !isMobileDrawerOpen} />
+            <SidebarLink to="/history" icon={<Clock size={18} />} label="观看历史" collapsed={!isSidebarOpen && !isMobileDrawerOpen} />
+            <SidebarLink to="/poster-wall" icon={<GalleryHorizontalEnd size={18} />} label="影音海报墙" collapsed={!isSidebarOpen && !isMobileDrawerOpen} />
+            <SidebarLink to="/ai" icon={<Sparkles size={18} />} label="AI 影视助理" collapsed={!isSidebarOpen && !isMobileDrawerOpen} />
+          </div>
         </div>
-        <AppFooter className="py-4" />
-      </main>
+
+        {/* Navigation Group: Libraries */}
+        <div>
+          <SectionHeader label="媒体片库" visible={isSidebarOpen || isMobileDrawerOpen} />
+          <div className="space-y-1">
+            {libraries.length === 0 && (isSidebarOpen || isMobileDrawerOpen) && (
+              <div className="px-4 py-2 text-xs text-gray-400 italic">暂无媒体片库</div>
+            )}
+            {libraries.map((lib) => (
+              <SidebarLink 
+                key={lib.id} 
+                to={`/library/${lib.id}`} 
+                icon={<LibraryIcon size={18} />} 
+                label={lib.name} 
+                collapsed={!isSidebarOpen && !isMobileDrawerOpen} 
+              />
+            ))}
+          </div>
+        </div>
+
+        {/* Navigation Group: Automation */}
+        <div>
+          <SectionHeader label="自动化运维" visible={isSidebarOpen || isMobileDrawerOpen} />
+          <div className="space-y-1">
+            <SidebarLink to="/downloads" icon={<CloudDownload size={18} />} label="下载中心" collapsed={!isSidebarOpen && !isMobileDrawerOpen} />
+            <SidebarLink to="/subscriptions" icon={<Rss size={18} />} label="RSS 订阅" collapsed={!isSidebarOpen && !isMobileDrawerOpen} />
+            <SidebarLink to="/dlna" icon={<Cast size={18} />} label="DLNA 串流" collapsed={!isSidebarOpen && !isMobileDrawerOpen} />
+            <SidebarLink to="/site-search" icon={<Search size={18} />} label="站点检索" collapsed={!isSidebarOpen && !isMobileDrawerOpen} />
+          </div>
+        </div>
+
+        {/* Navigation Group: Account Profile */}
+        <div>
+          <SectionHeader label="个人资料" visible={isSidebarOpen || isMobileDrawerOpen} />
+          <div className="space-y-1">
+            <SidebarLink to="/profile" icon={<UserIcon size={18} />} label="账号信息" collapsed={!isSidebarOpen && !isMobileDrawerOpen} />
+            <SidebarLink to="/play-profiles" icon={<UserCog size={18} />} label="观影 Profile" collapsed={!isSidebarOpen && !isMobileDrawerOpen} />
+          </div>
+        </div>
+
+        {/* Navigation Group: Admin Dashboard */}
+        {user?.role === 'admin' && (
+          <div>
+            <SectionHeader label="系统后台" visible={isSidebarOpen || isMobileDrawerOpen} />
+            <div className="space-y-1">
+              <SidebarLink to="/admin" icon={<Settings size={18} />} label="后台主页" collapsed={!isSidebarOpen && !isMobileDrawerOpen} />
+              <SidebarLink to="/tasks" icon={<ListChecks size={18} />} label="实时任务" collapsed={!isSidebarOpen && !isMobileDrawerOpen} />
+              <SidebarLink to="/stats" icon={<Activity size={18} />} label="运行监控" collapsed={!isSidebarOpen && !isMobileDrawerOpen} />
+              <SidebarLink to="/sites" icon={<Globe size={18} />} label="站点管理" collapsed={!isSidebarOpen && !isMobileDrawerOpen} />
+              <SidebarLink to="/notify-channels" icon={<Bell size={18} />} label="通知配置" collapsed={!isSidebarOpen && !isMobileDrawerOpen} />
+              <SidebarLink to="/download-clients" icon={<Server size={18} />} label="下载客户端" collapsed={!isSidebarOpen && !isMobileDrawerOpen} />
+              <SidebarLink to="/scheduler" icon={<Clock size={18} />} label="定时机制" collapsed={!isSidebarOpen && !isMobileDrawerOpen} />
+              <SidebarLink to="/storage" icon={<HardDrive size={18} />} label="存储分析" collapsed={!isSidebarOpen && !isMobileDrawerOpen} />
+              <SidebarLink to="/storage-config" icon={<Cloud size={18} />} label="外部挂载" collapsed={!isSidebarOpen && !isMobileDrawerOpen} />
+              <SidebarLink to="/files" icon={<FolderTree size={18} />} label="文件管家" collapsed={!isSidebarOpen && !isMobileDrawerOpen} />
+              <SidebarLink to="/duplicates" icon={<Copy size={18} />} label="排重清理" collapsed={!isSidebarOpen && !isMobileDrawerOpen} />
+              <SidebarLink to="/strm" icon={<Link2 size={18} />} label="STRM 关联" collapsed={!isSidebarOpen && !isMobileDrawerOpen} />
+              <SidebarLink to="/tools" icon={<Wrench size={18} />} label="运维工具" collapsed={!isSidebarOpen && !isMobileDrawerOpen} />
+              <SidebarLink to="/assistant" icon={<MessageSquare size={18} />} label="AI 智能助教" collapsed={!isSidebarOpen && !isMobileDrawerOpen} />
+              <SidebarLink to="/settings" icon={<Sliders size={18} />} label="系统参数" collapsed={!isSidebarOpen && !isMobileDrawerOpen} />
+              <SidebarLink to="/recycle" icon={<Trash2 size={18} />} label="回收站" collapsed={!isSidebarOpen && !isMobileDrawerOpen} />
+            </div>
+          </div>
+        )}
+      </nav>
+
+      {/* Sidebar Logout Action */}
+      <div className="border-t border-gray-100 p-4 bg-gray-50/50">
+        <button
+          onClick={() => { logout(); navigate('/login') }}
+          className={clsx(
+            "flex items-center gap-3.5 rounded-xl px-4 py-3 text-sm font-semibold transition-all duration-300 w-full group/logout",
+            (isSidebarOpen || isMobileDrawerOpen) ? "justify-start text-gray-500 hover:bg-red-50 hover:text-red-600" : "justify-center text-gray-400 hover:text-red-600"
+          )}
+          title={`安全登出 (${user?.username})`}
+        >
+          <LogOut size={18} className="transition-transform group-hover/logout:-translate-x-0.5" />
+          {(isSidebarOpen || isMobileDrawerOpen) && <span>安全退出</span>}
+        </button>
+      </div>
+    </div>
+  )
+
+  return (
+    <div className="flex h-screen w-screen overflow-hidden bg-[#f9fafb] text-gray-900 font-body select-none">
+      
+      {/* 1. Desktop Persistent Sidebar */}
+      <aside className={clsx(
+        "hidden lg:flex flex-col h-full shrink-0 transition-all duration-300 ease-out",
+        isSidebarOpen ? "w-64" : "w-20"
+      )}>
+        {sidebarContent}
+      </aside>
+
+      {/* 2. Mobile & Tablet Sidebar Drawer (Overlay) */}
+      <AnimatePresence>
+        {isMobileDrawerOpen && (
+          <div className="fixed inset-0 z-50 flex lg:hidden">
+            {/* Backdrop sheet */}
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              onClick={() => setIsMobileDrawerOpen(false)}
+              className="fixed inset-0 bg-black/15 backdrop-blur-sm"
+            />
+            {/* Drawer body container */}
+            <motion.div
+              initial={{ x: '-100%' }}
+              animate={{ x: 0 }}
+              exit={{ x: '-100%' }}
+              transition={{ type: 'spring', damping: 25, stiffness: 220 }}
+              className="relative flex w-64 max-w-xs flex-col h-full z-10 shadow-xl"
+            >
+              {sidebarContent}
+            </motion.div>
+          </div>
+        )}
+      </AnimatePresence>
+
+      {/* 3. Main Workspace Container */}
+      <div className="flex flex-1 flex-col min-w-0 overflow-hidden">
+        
+        {/* Top Header Bar */}
+        <header className="flex h-20 shrink-0 items-center justify-between px-6 md:px-8 bg-white/80 border-b border-gray-200/60 backdrop-blur-md z-30">
+          
+          {/* Header Left Area: Hamburger and Search */}
+          <div className="flex items-center gap-4 flex-1 max-w-lg">
+            {/* Hamburger button shown on Mobile & Tablet */}
+            <button 
+              onClick={() => setIsMobileDrawerOpen(true)}
+              className="rounded-xl border border-gray-200 p-2.5 text-gray-500 hover:bg-gray-100 lg:hidden"
+            >
+              <Menu size={18} />
+            </button>
+
+            {/* Premium Integrated Search Form */}
+            <form onSubmit={handleSearchSubmit} className="relative w-full hidden sm:block">
+              <span className={clsx(
+                "absolute left-4 top-1/2 -translate-y-1/2 transition-colors duration-200",
+                searchFocused ? "text-brand-600" : "text-gray-400"
+              )}>
+                <Search size={16} />
+              </span>
+              <input
+                type="text"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                onFocus={() => setSearchFocused(true)}
+                onBlur={() => setSearchFocused(false)}
+                placeholder="搜索电影、电视剧、演员、种子站点..."
+                className="w-full rounded-full border border-gray-200 bg-gray-50/50 py-2.5 pl-11 pr-12 text-sm text-gray-900 placeholder-gray-400 outline-none transition-all duration-300 focus:border-brand-500 focus:bg-white focus:ring-4 focus:ring-brand-100/40"
+              />
+              <div className="absolute right-4 top-1/2 -translate-y-1/2 pointer-events-none">
+                <span className="rounded-md border border-gray-200 bg-white px-1.5 py-0.5 text-[9px] font-bold text-gray-400 uppercase tracking-wider">
+                  Enter
+                </span>
+              </div>
+            </form>
+          </div>
+
+          {/* Header Right Area: Actions, Notifications, Profile Dropdown */}
+          <div className="flex items-center gap-4 shrink-0">
+            {/* Quick search button shown ONLY on Mobile screens */}
+            <Link 
+              to="/search" 
+              className="rounded-xl border border-gray-200 p-2.5 text-gray-400 hover:bg-gray-100 hover:text-gray-900 sm:hidden"
+            >
+              <Search size={18} />
+            </Link>
+
+            {/* Quick Discover shortcut button */}
+            <Link 
+              to="/discover" 
+              className="hidden md:flex items-center gap-2 rounded-xl border border-gray-200 px-4 py-2.5 text-xs font-bold text-gray-500 hover:bg-gray-50 hover:text-gray-900 transition-all"
+            >
+              <Sparkles size={14} className="text-brand-500" />
+              <span>发现新片</span>
+            </Link>
+
+            {/* Notification alert bubble */}
+            <button className="relative rounded-xl border border-gray-200 p-2.5 text-gray-400 hover:bg-gray-100 hover:text-gray-900 transition-all">
+              <Bell size={18} />
+              <span className="absolute top-1.5 right-1.5 h-2 w-2 rounded-full bg-brand-500 ring-2 ring-white animate-pulse" />
+            </button>
+
+            {/* Horizontal divider lines */}
+            <span className="h-6 w-px bg-gray-200" />
+
+            {/* Elegant user dropdown list */}
+            <div className="relative">
+              <button 
+                onClick={() => setIsProfileOpen(!isProfileOpen)}
+                className="flex items-center gap-2.5 rounded-full border border-gray-200 p-1 pr-3 hover:bg-gray-50 transition-all"
+              >
+                <div className="flex h-8 w-8 items-center justify-center rounded-full bg-gradient-to-br from-[#111827] to-[#1f2937] text-white font-display text-xs font-bold shadow-sm">
+                  {user?.username?.slice(0, 2).toUpperCase() || "US"}
+                </div>
+                <div className="text-left hidden md:block">
+                  <p className="text-xs font-bold text-gray-900 leading-none">{user?.username}</p>
+                  <p className="text-[9px] text-gray-500 font-bold uppercase tracking-wider mt-0.5 leading-none">{user?.role}</p>
+                </div>
+                <ChevronDown size={14} className="text-gray-400" />
+              </button>
+
+              <AnimatePresence>
+                {isProfileOpen && (
+                  <>
+                    {/* Backdrop cover for closing drawer click */}
+                    <div className="fixed inset-0 z-10" onClick={() => setIsProfileOpen(false)} />
+                    <motion.div
+                      initial={{ opacity: 0, y: 10, scale: 0.95 }}
+                      animate={{ opacity: 1, y: 0, scale: 1 }}
+                      exit={{ opacity: 0, y: 10, scale: 0.95 }}
+                      transition={{ duration: 0.15 }}
+                      className="absolute right-0 mt-3 w-56 origin-top-right rounded-2xl border border-gray-200 bg-white p-2 shadow-xl z-20"
+                    >
+                      <Link
+                        to="/profile"
+                        onClick={() => setIsProfileOpen(false)}
+                        className="flex items-center gap-3 rounded-xl px-3 py-2 text-sm text-gray-600 hover:bg-gray-50 hover:text-gray-950 transition-colors"
+                      >
+                        <UserIcon size={16} />
+                        <span>个人基本信息</span>
+                      </Link>
+                      <Link
+                        to="/play-profiles"
+                        onClick={() => setIsProfileOpen(false)}
+                        className="flex items-center gap-3 rounded-xl px-3 py-2 text-sm text-gray-600 hover:bg-gray-50 hover:text-gray-950 transition-colors"
+                      >
+                        <UserCog size={16} />
+                        <span>观影 Profile 切换</span>
+                      </Link>
+                      {user?.role === 'admin' && (
+                        <Link
+                          to="/admin"
+                          onClick={() => setIsProfileOpen(false)}
+                          className="flex items-center gap-3 rounded-xl px-3 py-2 text-sm text-gray-600 hover:bg-gray-50 hover:text-gray-950 transition-colors"
+                        >
+                          <Settings size={16} />
+                          <span>管理主控制台</span>
+                        </Link>
+                      )}
+                      <div className="my-1.5 border-t border-gray-100" />
+                      <button
+                        onClick={() => {
+                          setIsProfileOpen(false);
+                          logout();
+                          navigate('/login');
+                        }}
+                        className="flex w-full items-center gap-3 rounded-xl px-3 py-2 text-sm text-red-600 hover:bg-red-50 transition-colors"
+                      >
+                        <LogOut size={16} />
+                        <span>安全登出系统</span>
+                      </button>
+                    </motion.div>
+                  </>
+                )}
+              </AnimatePresence>
+            </div>
+          </div>
+        </header>
+
+        {/* ── Dynamic Content Workspace Scroll Area ── */}
+        <main className="flex-1 overflow-y-auto px-4 py-6 md:px-8 md:py-10">
+          <div className="max-w-7xl mx-auto">
+            <AnimatePresence mode="wait">
+              <motion.div
+                key={location.pathname}
+                initial={{ opacity: 0, y: 12 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={{ opacity: 0, y: -6 }}
+                transition={{ duration: 0.25, ease: 'easeOut' }}
+              >
+                <Outlet />
+              </motion.div>
+            </AnimatePresence>
+          </div>
+        </main>
+        
+        {/* Absolute Footer Frame */}
+        <AppFooter className="border-t border-gray-200/50 bg-white py-5 text-center text-xs text-gray-400" />
+      </div>
     </div>
   )
 }
 
-/** Section divider — visible only when sidebar is expanded */
-function SectionHeader({ label }: { label: string }) {
+function SectionHeader({ label, visible }: { label: string; visible: boolean }) {
+  if (!visible) return <div className="h-5" />;
   return (
-    <div className="mt-4 mb-1 overflow-hidden whitespace-nowrap px-3 opacity-0 transition-opacity duration-200 group-hover:opacity-100">
-      <span className="text-[10px] font-medium uppercase tracking-[0.15em] text-cream-500/50">
+    <div className="px-4 mb-2 mt-4">
+      <span className="text-[10px] font-bold uppercase tracking-[0.25em] text-gray-400">
         {label}
       </span>
     </div>
   )
 }
 
-/** Single nav link — icon always visible, label fades in on expand */
-function SidebarLink({
-  to,
-  icon,
-  label,
-  end,
-}: {
-  to: string
-  icon: React.ReactNode
-  label: string
-  end?: boolean
-}) {
+interface SidebarLinkProps {
+  to: string;
+  icon: React.ReactNode;
+  label: string;
+  end?: boolean;
+  collapsed?: boolean;
+}
+
+function SidebarLink({ to, icon, label, end, collapsed }: SidebarLinkProps) {
   return (
     <NavLink
       to={to}
       end={end}
       className={({ isActive }) =>
         clsx(
-          'flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors',
+          "flex items-center gap-3.5 rounded-xl px-4 py-3 text-sm font-semibold transition-all duration-300 relative group",
           isActive
-            ? 'bg-brand-500/10 text-brand-400'
-            : 'text-cream-400 hover:bg-cream-900/10 hover:text-cream-200',
+            ? "bg-[#111827] text-white shadow-sm"
+            : "text-gray-500 hover:bg-gray-50 hover:text-gray-900"
         )
       }
     >
-      <span className="flex shrink-0 items-center justify-center w-5 h-5">{icon}</span>
-      <span
-        className={clsx(
-          'overflow-hidden whitespace-nowrap truncate',
-          'opacity-0 transition-opacity duration-200',
-          'group-hover:opacity-100',
-        )}
-      >
-        {label}
-      </span>
+      {({ isActive }) => (
+        <>
+          <span className={clsx(
+            "flex shrink-0 items-center justify-center w-5 h-5 transition-transform duration-300 group-hover:scale-110",
+            isActive ? "text-[#c9954a]" : "text-gray-400 group-hover:text-gray-700"
+          )}>
+            {icon}
+          </span>
+          {!collapsed && (
+            <motion.span
+              initial={{ opacity: 0, x: -5 }}
+              animate={{ opacity: 1, x: 0 }}
+              className="truncate whitespace-nowrap"
+            >
+              {label}
+            </motion.span>
+          )}
+          {collapsed && (
+            <div className="absolute left-full ml-3 px-2.5 py-1.5 rounded-lg bg-gray-900 text-white text-xs font-semibold opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto transition-opacity shadow-lg z-50 whitespace-nowrap">
+              {label}
+            </div>
+          )}
+        </>
+      )}
     </NavLink>
   )
-}
+}
\ No newline at end of file
diff --git a/web/src/components/MediaCard.tsx b/web/src/components/MediaCard.tsx
index 66331d7..e14047f 100644
--- a/web/src/components/MediaCard.tsx
+++ b/web/src/components/MediaCard.tsx
@@ -1,71 +1,103 @@
+﻿import { useRef } from 'react'
 import { Link } from 'react-router-dom'
-import { Film, Play } from 'lucide-react'
-
+import { motion } from 'framer-motion'
+import { Film, Play, Layers, Star } from 'lucide-react'
 import { imageURL } from '../api/client'
 import type { Media } from '../types'
 
-/**
- * Compact poster tile — used by library, search, favourites, poster wall, etc.
- *
- * 视觉密度调小：之前字体偏大、卡片整体偏宽，导致每页只能塞下 5 个左右；
- * 现在文字行 truncate + 字号缩到 12px，让 8 列网格不再"挤"。
- */
-export function MediaCard({
-  media,
-  progress,
+export const MediaCard = ({
+  media, progress, count, rating, linkTo,
 }: {
-  media: Media
-  progress?: number
-}) {
-  return (
-    <Link
-      to={`/media/${media.id}`}
-      className="group block overflow-hidden rounded-lg border border-cream-900/15 bg-surface-400 transition-all hover:border-brand-500/30 hover:bg-surface-300"
-    >
-      {/* Poster */}
-      <div className="relative aspect-[2/3] w-full overflow-hidden bg-surface-600">
-        {media.poster_url ? (
-          <img
-            src={imageURL(media.poster_url)}
-            alt={media.title}
-            loading="lazy"
-            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 items-center justify-center text-cream-900/30">
-            <Film size={36} />
-          </div>
-        )}
+  media: Media; progress?: number; count?: number; rating?: number; linkTo?: string
+}) => {
+  const ref = useRef<HTMLDivElement>(null)
+  const href = linkTo ?? `/media/${media.id}`
 
-        {/* Hover overlay */}
-        <div className="absolute inset-0 flex items-end bg-gradient-to-t from-black/60 via-transparent to-transparent p-2 opacity-0 transition-opacity group-hover:opacity-100">
-          <span className="flex items-center gap-1 text-[11px] text-white/90">
-            <Play size={11} />
-            播放
-          </span>
+  return (
+    <Link to={href} className="group block">
+      <motion.div
+        ref={ref}
+        whileHover={{ scale: 1.04, y: -6 }}
+        transition={{ type: 'spring', stiffness: 280, damping: 22 }}
+        className="relative overflow-hidden rounded-2xl 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)] transition-all duration-300 hover:border-brand-500/40 hover:shadow-[0_12px_32px_rgba(17,24,39,0.04),0_4px_12px_rgba(17,24,39,0.01)]"
+      >
+        {/* Poster Wrapper */}
+        <div className="relative aspect-[2/3] w-full overflow-hidden bg-gray-50">
+          {media.poster_url ? (
+            <img
+              src={imageURL(media.poster_url)}
+              alt={media.title}
+              loading="lazy"
+              className="h-full w-full object-cover transition-transform duration-700 ease-out 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">
+              <Film size={28} className="stroke-[1.5]" />
+              <span className="text-[10px] uppercase tracking-wider font-bold">No Poster</span>
+            </div>
+          )}
+
+          {/* Episode count badge */}
+          {count !== undefined && count > 1 && (
+            <span className="absolute right-3 top-3 inline-flex items-center gap-1 rounded-lg bg-[#111827]/90 px-2 py-1 text-[10px] font-bold text-white shadow-sm border border-white/10">
+              <Layers size={10} className="text-[#c9954a]" />
+              <span>{count} 集</span>
+            </span>
+          )}
+
+          {/* Rating Badge */}
+          {(rating || (media as any).rating) && (
+            <span className="absolute left-3 top-3 inline-flex items-center gap-0.5 rounded-lg bg-[#111827]/90 px-2 py-1 text-[10px] font-bold text-[#c9954a] shadow-sm border border-white/10">
+              <Star size={10} fill="currentColor" />
+              <span>{(rating || (media as any).rating).toFixed(1)}</span>
+            </span>
+          )}
+
+          {/* Premium Hover Overlay */}
+          <div className="absolute inset-0 bg-gradient-to-t from-[#111827]/90 via-[#111827]/30 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-4">
+            <motion.div
+              initial={{ y: 15, opacity: 0 }}
+              whileHover={{ y: 0, opacity: 1 }}
+              transition={{ duration: 0.2 }}
+              className="space-y-2"
+            >
+              <span className="inline-flex items-center gap-1.5 rounded-xl bg-brand-500 px-4 py-2 text-xs font-bold text-white shadow-md shadow-brand-500/20">
+                <Play size={10} fill="currentColor" className="text-white" />
+                <span>立即观影</span>
+              </span>
+              <p className="text-[10px] text-gray-300 font-semibold line-clamp-2 leading-relaxed">
+                {media.overview || "暂无简介内容"}
+              </p>
+            </motion.div>
+          </div>
+
+          {/* Progress Bar overlay */}
+          {progress !== undefined && progress > 0 && progress < 1 && (
+            <div className="absolute inset-x-0 bottom-0 h-1.5 bg-gray-200">
+              <div 
+                className="h-full bg-gradient-to-r from-brand-400 to-brand-500 rounded-r-full transition-all duration-300" 
+                style={{ width: `${Math.round(progress * 100)}%` }} 
+              />
+            </div>
+          )}
         </div>
 
-        {/* Progress bar */}
-        {progress !== undefined && progress > 0 && progress < 1 && (
-          <div className="absolute inset-x-0 bottom-0 h-1 bg-black/40">
-            <div
-              className="h-full bg-brand-500/80 transition-colors group-hover:bg-brand-400"
-              style={{ width: `${Math.round(progress * 100)}%` }}
-            />
+        {/* Media Metadata Info */}
+        <div className="p-4 space-y-1 bg-white border-t border-gray-50">
+          <p className="truncate text-sm font-bold text-gray-900 group-hover:text-brand-500 transition-colors duration-200">
+            {media.title}
+          </p>
+          <div className="flex items-center justify-between text-[11px] text-gray-500 font-bold uppercase tracking-wider">
+            <span>{media.year > 0 ? media.year : "未知年份"}</span>
+            {media.video_codec && (
+              <span className="px-1.5 py-0.5 rounded-md bg-gray-50 text-gray-600 border border-gray-100">
+                {media.video_codec}
+              </span>
+            )}
           </div>
-        )}
-      </div>
-
-      {/* Info */}
-      <div className="px-2 py-2">
-        <p className="truncate text-xs font-medium text-cream-200 group-hover:text-cream-100">
-          {media.title}
-        </p>
-        {media.year > 0 && (
-          <p className="mt-0.5 text-[11px] text-cream-500">{media.year}</p>
-        )}
-      </div>
+        </div>
+      </motion.div>
     </Link>
   )
-}
+}
\ No newline at end of file
diff --git a/web/src/index.css b/web/src/index.css
index 89046b6..8ecb3c9 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -1,162 +1,133 @@
-@tailwind base;
+﻿@tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-:root {
-  color-scheme: dark;
-}
-
-html,
-body,
-#root {
-  height: 100%;
-}
+html, body, #root { height: 100%; }
 
 body {
-  background-color: #111110;
-  color: #e8e4d9;
+  background-color: #f9fafb; /* Premium Swiss Editorial Light/Slate Background */
+  color: #111827;            /* Deep Graphite Charcoal Body Text */
   margin: 0;
-}
-
-/* ─── SVG 噪点纹理 ─── */
-body::before {
-  content: '';
-  position: fixed;
-  inset: 0;
-  z-index: 9999;
-  pointer-events: none;
-  opacity: 0.035;
-  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
-  background-repeat: repeat;
-  background-size: 256px 256px;
-}
-
-/* ─── Scrollbar ─── */
-::-webkit-scrollbar {
-  width: 6px;
-}
-::-webkit-scrollbar-track {
-  background: transparent;
-}
-::-webkit-scrollbar-thumb {
-  background: #2e2e2a;
-  border-radius: 999px;
-}
-::-webkit-scrollbar-thumb:hover {
-  background: #3a3a35;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 /* ─── Selection ─── */
 ::selection {
-  background: rgba(201, 149, 74, 0.3);
-  color: #e8e4d9;
+  background: rgba(201, 149, 74, 0.2);
+  color: #111827;
 }
 
-/* ─── Focus ring ─── */
+/* ─── Focus Ring ─── */
 *:focus-visible {
   outline: 2px solid #c9954a;
   outline-offset: 2px;
-  border-radius: 2px;
+  border-radius: 6px;
+}
+
+/* ─── Scrollbar ─── */
+::-webkit-scrollbar { width: 6px; height: 6px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 999px; }
+::-webkit-scrollbar-thumb:hover { background: #c9954a; }
+
+.scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+.scrollbar-hide::-webkit-scrollbar { display: none; }
+
+/* ─── Reduced Motion ─── */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
 }
 
 @layer components {
-  /* ─── Surface Card — 替代 glass-panel ─── */
-  .surface-card {
-    @apply rounded-lg border border-cream-900/20 bg-surface-400 px-4 py-3;
-    /* No shadow, no blur. Pure material feel. */
+  /* ── Unified Swiss-Editorial Cards ── */
+  .card {
+    @apply rounded-2xl bg-white border border-gray-200/80 shadow-[0_1px_3px_rgba(0,0,0,0.01),0_1px_2px_rgba(0,0,0,0.015)];
   }
-  .surface-card-elevated {
-    @apply surface-card;
-    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
+  .card-hover {
+    @apply card transition-all duration-300 ease-out hover:border-gray-300 hover:shadow-[0_12px_32px_rgba(17,24,39,0.04),0_4px_12px_rgba(17,24,39,0.01)] hover:-translate-y-1;
+  }
+  .card-elevated {
+    @apply card shadow-[0_20px_40px_rgba(17,24,39,0.05),0_1px_3px_rgba(17,24,39,0.01)];
   }
 
-  /* ─── 暖色分割线 ─── */
-  .warm-divider {
-    @apply border-t border-cream-900/15;
-  }
-
-  /* ─── 琥珀色按钮 — 替代 neon-button ─── */
-  .amber-btn {
-    @apply inline-flex items-center justify-center gap-2 rounded-lg border border-brand-500/30
-      bg-brand-500/10 px-4 py-2 text-sm font-medium text-brand-400 transition-all
-      hover:border-brand-500/50 hover:bg-brand-500/20 hover:text-brand-300
-      active:scale-[0.98] disabled:cursor-not-allowed disabled:opacity-40;
-  }
-  .amber-btn--solid {
-    @apply amber-btn border-transparent bg-brand-600 text-cream-100
-      hover:bg-brand-500 hover:text-white;
-  }
-  .amber-btn--ghost {
-    @apply amber-btn border-transparent bg-transparent hover:bg-cream-900/10;
-  }
-
-  /* ─── 鼠尾草按钮 ─── */
-  .sage-btn {
-    @apply inline-flex items-center justify-center gap-2 rounded-lg border border-sage-400/20
-      bg-sage-400/10 px-4 py-2 text-sm font-medium text-sage-300 transition-all
-      hover:border-sage-400/40 hover:bg-sage-400/20 hover:text-sage-200
-      active:scale-[0.98] disabled:cursor-not-allowed disabled:opacity-40;
-  }
-
-  /* ─── 表单输入 ─── */
-  .field-input {
-    @apply w-full rounded-lg border border-cream-900/20 bg-surface-600 px-4 py-2.5
-      text-sm text-cream-200 placeholder:text-cream-500/40
-      transition-colors
-      focus:border-brand-500/50 focus:bg-surface-500 focus:outline-none
-      disabled:cursor-not-allowed disabled:opacity-50;
-  }
-  .field-label {
-    @apply block text-xs font-medium uppercase tracking-wider text-cream-400 mb-1.5;
-  }
-
-  /* ─── 标签/徽章 ─── */
-  .badge {
-    @apply inline-flex items-center rounded-full px-2 py-0.5 text-2xs font-medium;
-  }
-  .badge--brand {
-    @apply badge bg-brand-500/15 text-brand-400;
-  }
-  .badge--sage {
-    @apply badge bg-sage-400/15 text-sage-300;
-  }
-  .badge--neutral {
-    @apply badge bg-cream-900/20 text-cream-400;
-  }
-
-  /* ─── 页面标题 ─── */
-  .page-heading {
-    @apply font-display text-2xl font-bold tracking-tight text-cream-100;
-  }
-  .page-subtitle {
-    @apply mt-1 text-sm text-cream-400;
-  }
-
-  /* ─── 表格（管理面板用） ─── */
-  .data-table {
-    @apply w-full text-left text-sm;
-  }
-  .data-table thead {
-    @apply border-b border-cream-900/20;
-  }
-  .data-table th {
-    @apply px-4 py-3 text-xs font-medium uppercase tracking-wider text-cream-400;
-  }
-  .data-table td {
-    @apply px-4 py-3 text-cream-300;
-  }
-  .data-table tbody tr {
-    @apply border-b border-cream-900/10 transition-colors hover:bg-cream-900/5;
-  }
-
-  /* ─── 旧版兼容别名（逐步废弃） ─── */
+  /* ── Glassmorphic Bright Panels ── */
   .glass-panel {
-    @apply surface-card;
+    @apply backdrop-blur-xl bg-white/80 border border-white/50 shadow-[0_8px_32px_rgba(17,24,39,0.015)];
   }
-  .neon-button {
-    @apply amber-btn;
+  .glass-card {
+    @apply rounded-2xl backdrop-blur-lg bg-white/90 border border-white/60 shadow-[0_4px_24px_rgba(17,24,39,0.01)];
   }
-  .input-base {
-    @apply field-input;
+  .glass-card-elevated {
+    @apply rounded-2xl backdrop-blur-xl bg-white/95 border border-white/70 shadow-[0_16px_48px_rgba(17,24,39,0.03)];
   }
-}
+
+  /* ── Input Fields Redesign ── */
+  .input-field {
+    @apply w-full rounded-xl border border-gray-200 bg-gray-50/50 px-4 py-3 text-sm text-gray-900
+      placeholder:text-gray-400 outline-none transition-all duration-300 ease-out
+      focus:border-brand-500 focus:bg-white focus:ring-4 focus:ring-brand-100/50;
+  }
+  .input-label {
+    @apply block mb-1.5 text-xs font-bold uppercase tracking-widest text-gray-500;
+  }
+
+  /* ── Premium Editorial Buttons Redesign ── */
+  .btn-primary {
+    @apply inline-flex items-center justify-center gap-2 rounded-xl bg-[#111827] px-5 py-3
+      text-sm font-bold text-white transition-all duration-300 ease-out shadow-sm
+      hover:bg-[#1f2937] hover:-translate-y-0.5 active:translate-y-0 active:scale-[0.98]
+      disabled:cursor-not-allowed disabled:opacity-40 disabled:translate-y-0;
+  }
+  .btn-ghost {
+    @apply inline-flex items-center justify-center gap-2 rounded-xl px-4 py-2.5
+      text-sm font-semibold text-gray-600 transition-all duration-200 ease-out
+      hover:bg-gray-100 hover:text-gray-900 active:scale-[0.98];
+  }
+  .btn-outline {
+    @apply inline-flex items-center justify-center gap-2 rounded-xl border border-gray-200/90
+      bg-white px-4 py-2.5 text-sm font-bold text-gray-700 transition-all duration-300 ease-out shadow-sm
+      hover:border-gray-300 hover:text-gray-900 hover:shadow-md hover:-translate-y-0.5 active:translate-y-0 active:scale-[0.98];
+  }
+
+  /* ── Badges Redesign ── */
+  .badge {
+    @apply inline-flex items-center rounded-full px-3 py-1 text-2xs font-bold uppercase tracking-wider;
+  }
+  .badge-brand { @apply badge bg-brand-50 text-brand-700 border border-brand-100/30; }
+  .badge-sage  { @apply badge bg-sage-50 text-sage-700 border border-sage-100/30; }
+  .badge-neutral { @apply badge bg-gray-100 text-gray-600 border border-gray-200/50; }
+
+  /* ── Page Headings ── */
+  .page-heading  { @apply font-display text-3xl font-extrabold tracking-tight text-gray-900; }
+  .page-subtitle { @apply mt-1 text-sm text-gray-500; }
+
+  /* ── Data Tables Redesign ── */
+  .data-table { @apply w-full text-left text-sm border-collapse; }
+  .data-table thead { @apply border-b border-gray-200 bg-gray-50/70; }
+  .data-table th { @apply px-5 py-4 text-xs font-bold uppercase tracking-wider text-gray-500; }
+  .data-table td { @apply px-5 py-4 text-gray-700 border-b border-gray-100; }
+  .data-table tbody tr { @apply transition-colors hover:bg-gray-50/50; }
+
+  /* ── Dividers ── */
+  .divider { @apply border-t border-gray-200/80; }
+
+  /* ── Backward Compatibility ── */
+  .surface-card { @apply card; }
+  .surface-card-elevated { @apply card-elevated; }
+  .field-input { @apply input-field; }
+  .field-label  { @apply input-label; }
+  .amber-btn { @apply btn-outline; }
+  .amber-btn--solid { @apply btn-primary; }
+  .amber-btn--ghost { @apply btn-ghost; }
+  .neon-button { @apply btn-outline; }
+  .input-base { @apply input-field; }
+  .warm-divider { @apply divider; }
+}
\ No newline at end of file
diff --git a/web/src/pages/AIAssistantPage.tsx b/web/src/pages/AIAssistantPage.tsx
index 2ea8f5c..7be933b 100644
--- a/web/src/pages/AIAssistantPage.tsx
+++ b/web/src/pages/AIAssistantPage.tsx
@@ -86,21 +86,21 @@ export function AIAssistantPage() {
       <div className="flex flex-wrap items-end justify-between gap-3">
         <div className="flex items-center gap-3">
           <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-primary-400 to-purple-500">
-            <Sparkles className="h-5 w-5 text-white" />
+            <Sparkles className="h-5 w-5 text-ink-600" />
           </div>
           <div>
-            <h1 className="font-display text-3xl font-bold text-white">AI 助手</h1>
-            <p className="text-sm text-slate-400">
+            <h1 className="font-display text-3xl font-bold text-ink-600">AI 助手</h1>
+            <p className="text-sm text-ink-50">
               自然语言搜索 · 基于观影历史的智能推荐
             </p>
           </div>
         </div>
         {status && (
-          <div className="text-xs text-slate-400">
+          <div className="text-xs text-ink-50">
             <span
               className={
                 'mr-2 inline-block h-2 w-2 rounded-full ' +
-                (status.enabled ? 'bg-emerald-400' : 'bg-slate-500')
+                (status.enabled ? 'bg-emerald-400' : 'bg-sand-500/30')
               }
             />
             {status.enabled
@@ -112,7 +112,7 @@ export function AIAssistantPage() {
 
       {/* Smart search */}
       <section className="glass-panel space-y-4">
-        <h2 className="font-display text-lg font-semibold text-white">智能搜索</h2>
+        <h2 className="font-display text-lg font-semibold text-ink-600">智能搜索</h2>
         <form onSubmit={onSearch} className="flex gap-2">
           <input
             className="input-base flex-1"
@@ -137,7 +137,7 @@ export function AIAssistantPage() {
               onClick={() => {
                 setQuery(h)
               }}
-              className="rounded-full border border-white/10 bg-white/5 px-3 py-1 text-xs text-slate-300 hover:border-primary-400/40 hover:text-primary-400"
+              className="rounded-full border border-white/10 bg-white/5 px-3 py-1 text-xs text-ink-100 hover:border-primary-400/40 hover:text-brand-500"
             >
               {h}
             </button>
@@ -145,35 +145,35 @@ export function AIAssistantPage() {
         </div>
 
         {intent && (
-          <div className="rounded-lg border border-white/5 bg-white/5 p-3 text-xs text-slate-300">
-            <div className="mb-1 font-semibold text-slate-200">解析结果</div>
+          <div className="rounded-lg border border-white/5 bg-white/5 p-3 text-xs text-ink-100">
+            <div className="mb-1 font-semibold text-ink-200">解析结果</div>
             <div className="flex flex-wrap gap-x-6 gap-y-1">
               <span>
-                查询: <span className="text-primary-400">{intent.query || '—'}</span>
+                查询: <span className="text-brand-500">{intent.query || '—'}</span>
               </span>
               {intent.year !== undefined && intent.year > 0 && (
                 <span>
-                  年份: <span className="text-primary-400">{intent.year}</span>
+                  年份: <span className="text-brand-500">{intent.year}</span>
                 </span>
               )}
               {intent.genre && (
                 <span>
-                  类型: <span className="text-primary-400">{intent.genre}</span>
+                  类型: <span className="text-brand-500">{intent.genre}</span>
                 </span>
               )}
               {intent.type && (
                 <span>
-                  分类: <span className="text-primary-400">{intent.type}</span>
+                  分类: <span className="text-brand-500">{intent.type}</span>
                 </span>
               )}
               {intent.sort && (
                 <span>
-                  排序: <span className="text-primary-400">{intent.sort}</span>
+                  排序: <span className="text-brand-500">{intent.sort}</span>
                 </span>
               )}
               {intent.language && (
                 <span>
-                  语言: <span className="text-primary-400">{intent.language}</span>
+                  语言: <span className="text-brand-500">{intent.language}</span>
                 </span>
               )}
             </div>
@@ -192,7 +192,7 @@ export function AIAssistantPage() {
       {/* Recommendations */}
       <section className="glass-panel space-y-4">
         <div className="flex items-center justify-between">
-          <h2 className="font-display text-lg font-semibold text-white">为你推荐</h2>
+          <h2 className="font-display text-lg font-semibold text-ink-600">为你推荐</h2>
           <button onClick={onRecommend} disabled={recommending} className="neon-button">
             {recommending ? (
               <Loader2 size={16} className="animate-spin" />
@@ -202,7 +202,7 @@ export function AIAssistantPage() {
             生成推荐
           </button>
         </div>
-        <p className="text-xs text-slate-500">
+        <p className="text-xs text-sand-500">
           推荐基于你的最近观看历史。点击标题在媒体库中查找。
         </p>
 
@@ -212,7 +212,7 @@ export function AIAssistantPage() {
               <li key={i}>
                 <Link
                   to={`/search?q=${encodeURIComponent(t)}`}
-                  className="flex items-center justify-between rounded-lg border border-white/5 bg-white/5 px-3 py-2 text-sm text-slate-200 hover:border-primary-400/40 hover:text-primary-400"
+                  className="flex items-center justify-between rounded-lg border border-white/5 bg-white/5 px-3 py-2 text-sm text-ink-200 hover:border-primary-400/40 hover:text-brand-500"
                 >
                   <span className="truncate">{t}</span>
                   <Search size={14} className="shrink-0 opacity-60" />
@@ -223,7 +223,7 @@ export function AIAssistantPage() {
         )}
 
         {recs && recs.length === 0 && (
-          <p className="text-sm text-slate-400">
+          <p className="text-sm text-ink-50">
             还没有推荐结果 — 先去看几部片子,我再给你挑。
           </p>
         )}
@@ -231,9 +231,9 @@ export function AIAssistantPage() {
 
       {/* Decorative footer (mirrors the Vue page hint that AI runs locally). */}
       {!status?.enabled && (
-        <p className="text-xs text-slate-500">
+        <p className="text-xs text-sand-500">
           提示: 当前未配置外部 AI Provider,系统将使用本地规则引擎解析查询。
-          管理员可在 <Link to="/api-configs" className="text-primary-400">API 配置</Link>{' '}
+          管理员可在 <Link to="/api-configs" className="text-brand-500">API 配置</Link>{' '}
           中接入 OpenAI / DeepSeek 等服务以获得更好效果。
         </p>
       )}
diff --git a/web/src/pages/APIConfigsPage.tsx b/web/src/pages/APIConfigsPage.tsx
index c98aaa6..3e7703c 100644
--- a/web/src/pages/APIConfigsPage.tsx
+++ b/web/src/pages/APIConfigsPage.tsx
@@ -25,17 +25,17 @@ export function APIConfigsPage() {
   return (
     <div className="space-y-6">
       <header className="flex items-center gap-3">
-        <KeyRound className="h-6 w-6 text-primary-400" />
+        <KeyRound className="h-6 w-6 text-brand-500" />
         <div>
-          <h1 className="font-display text-3xl font-bold text-white">外部 API 配置</h1>
-          <p className="text-sm text-slate-400">
+          <h1 className="font-display text-3xl font-bold text-ink-600">外部 API 配置</h1>
+          <p className="text-sm text-ink-50">
             管理 TMDb / Bangumi / TheTVDB / Fanart / OpenAI / Douban 的密钥。
             后端使用 AES-GCM 加密存储,数据库泄漏时密钥仍然安全。
           </p>
         </div>
       </header>
 
-      {loading && <p className="text-slate-500">加载中…</p>}
+      {loading && <p className="text-sand-500">加载中…</p>}
 
       <div className="space-y-3">
         {items.map((item) => (
@@ -87,19 +87,19 @@ function ProviderCard({ item, onUpdated }: { item: APIConfig; onUpdated: () => v
   return (
     <form onSubmit={submit} className="glass-panel grid gap-3 md:grid-cols-[1fr_2fr]">
       <div>
-        <p className="font-display text-lg font-semibold text-white">{item.provider}</p>
+        <p className="font-display text-lg font-semibold text-ink-600">{item.provider}</p>
         {item.description && (
-          <p className="text-xs text-slate-400">{item.description}</p>
+          <p className="text-xs text-ink-50">{item.description}</p>
         )}
-        <p className="mt-2 text-xs text-slate-500">
-          状态: {item.has_key ? <span className="text-emerald-400">已配置</span> : <span className="text-slate-500">未配置</span>}
+        <p className="mt-2 text-xs text-sand-500">
+          状态: {item.has_key ? <span className="text-emerald-400">已配置</span> : <span className="text-sand-500">未配置</span>}
           {item.has_key && (
-            <span className="ml-2 font-mono text-primary-400">{item.masked_key}</span>
+            <span className="ml-2 font-mono text-brand-500">{item.masked_key}</span>
           )}
         </p>
       </div>
       <div className="space-y-2">
-        <label className="block text-xs text-slate-400">
+        <label className="block text-xs text-ink-50">
           API Key (留空保留原值)
           <input
             className="input-base mt-1"
@@ -109,7 +109,7 @@ function ProviderCard({ item, onUpdated }: { item: APIConfig; onUpdated: () => v
             onChange={(e) => setAPIKey(e.target.value)}
           />
         </label>
-        <label className="block text-xs text-slate-400">
+        <label className="block text-xs text-ink-50">
           Base URL (可选)
           <input
             className="input-base mt-1"
@@ -118,7 +118,7 @@ function ProviderCard({ item, onUpdated }: { item: APIConfig; onUpdated: () => v
             onChange={(e) => setBaseURL(e.target.value)}
           />
         </label>
-        <label className="inline-flex items-center gap-2 text-xs text-slate-400">
+        <label className="inline-flex items-center gap-2 text-xs text-ink-50">
           <input
             type="checkbox"
             checked={enabled}
@@ -133,7 +133,7 @@ function ProviderCard({ item, onUpdated }: { item: APIConfig; onUpdated: () => v
           <button
             type="button"
             onClick={testKey}
-            className="neon-button !text-xs !border-slate-400/40 !text-slate-300"
+            className="neon-button !text-xs !border-sand-400/40 !text-ink-100"
           >
             <Eye size={12} /> 状态
           </button>
diff --git a/web/src/pages/AdminPage.tsx b/web/src/pages/AdminPage.tsx
index 192e019..48048a2 100644
--- a/web/src/pages/AdminPage.tsx
+++ b/web/src/pages/AdminPage.tsx
@@ -16,7 +16,7 @@ export function AdminPage() {
   ]
   return (
     <div className="space-y-6">
-      <h1 className="font-display text-3xl font-bold text-white">管理后台</h1>
+      <h1 className="font-display text-3xl font-bold text-ink-600">管理后台</h1>
       <div className="flex flex-wrap gap-2 border-b border-white/10">
         {tabs.map((k) => (
           <button
@@ -25,8 +25,8 @@ export function AdminPage() {
             className={
               'border-b-2 px-4 py-2 text-sm transition ' +
               (tab === k.key
-                ? 'border-primary-400 text-primary-400'
-                : 'border-transparent text-slate-400 hover:text-white')
+                ? 'border-primary-400 text-brand-500'
+                : 'border-transparent text-ink-50 hover:text-white')
             }
           >
             {k.label}
@@ -98,7 +98,7 @@ function LibraryPanel() {
 
       <div className="glass-panel">
         <table className="w-full text-left text-sm">
-          <thead className="text-xs uppercase tracking-wider text-slate-500">
+          <thead className="text-xs uppercase tracking-wider text-sand-500">
             <tr>
               <th className="py-2">名称</th>
               <th>路径</th>
@@ -109,12 +109,12 @@ function LibraryPanel() {
           <tbody>
             {libs.map((l) => (
               <tr key={l.id} className="border-t border-white/5">
-                <td className="py-2 text-white">{l.name}</td>
-                <td className="text-slate-300">{l.path}</td>
-                <td className="text-slate-300">{l.type}</td>
+                <td className="py-2 text-ink-600">{l.name}</td>
+                <td className="text-ink-100">{l.path}</td>
+                <td className="text-ink-100">{l.type}</td>
                 <td className="space-x-2 py-2 text-right">
                   <button
-                    className="rounded border border-primary-400/40 px-2 py-1 text-xs text-primary-400 hover:bg-primary-400/10"
+                    className="rounded border border-primary-400/40 px-2 py-1 text-xs text-brand-500 hover:bg-primary-400/10"
                     onClick={async () => {
                       const r = await libraryAPI.scan(l.id)
                       toast.success(`扫描完成,新增 ${r.added}`)
@@ -153,7 +153,7 @@ function UsersPanel() {
   return (
     <div className="glass-panel">
       <table className="w-full text-left text-sm">
-        <thead className="text-xs uppercase tracking-wider text-slate-500">
+        <thead className="text-xs uppercase tracking-wider text-sand-500">
           <tr>
             <th className="py-2">用户名</th>
             <th>角色</th>
@@ -164,9 +164,9 @@ function UsersPanel() {
         <tbody>
           {users.map((u) => (
             <tr key={u.id} className="border-t border-white/5">
-              <td className="py-2 text-white">{u.username}</td>
-              <td className="text-slate-300">{u.role}</td>
-              <td className="text-slate-400">
+              <td className="py-2 text-ink-600">{u.username}</td>
+              <td className="text-ink-100">{u.role}</td>
+              <td className="text-ink-50">
                 {u.last_login_at ? new Date(u.last_login_at).toLocaleString() : '从未登录'}
               </td>
               <td className="py-2 text-right">
diff --git a/web/src/pages/AssistantChatPage.tsx b/web/src/pages/AssistantChatPage.tsx
index 9b69c6f..7fb5408 100644
--- a/web/src/pages/AssistantChatPage.tsx
+++ b/web/src/pages/AssistantChatPage.tsx
@@ -115,13 +115,13 @@ export function AssistantChatPage() {
       {/* Sessions sidebar */}
       <aside className="glass-panel flex flex-col overflow-hidden">
         <div className="mb-3 flex items-center justify-between">
-          <h2 className="font-display text-sm font-semibold text-white">会话</h2>
+          <h2 className="font-display text-sm font-semibold text-ink-600">会话</h2>
           <button onClick={onNew} className="neon-button !px-2 !py-1 text-xs">
             <Plus size={12} /> 新建
           </button>
         </div>
         {loading && (
-          <div className="flex justify-center py-6 text-slate-400">
+          <div className="flex justify-center py-6 text-ink-50">
             <Loader2 className="animate-spin" />
           </div>
         )}
@@ -132,8 +132,8 @@ export function AssistantChatPage() {
               className={
                 'group flex items-center gap-2 rounded px-2 py-2 text-sm cursor-pointer ' +
                 (active?.session.id === s.id
-                  ? 'bg-primary-400/10 text-primary-400'
-                  : 'text-slate-300 hover:bg-white/5 hover:text-white')
+                  ? 'bg-primary-400/10 text-brand-500'
+                  : 'text-ink-100 hover:bg-white/5 hover:text-white')
               }
               onClick={() => onSelect(s.id)}
             >
@@ -151,7 +151,7 @@ export function AssistantChatPage() {
             </li>
           ))}
           {!loading && sessions.length === 0 && (
-            <li className="px-2 py-2 text-xs text-slate-500">暂无会话</li>
+            <li className="px-2 py-2 text-xs text-sand-500">暂无会话</li>
           )}
         </ul>
       </aside>
@@ -159,7 +159,7 @@ export function AssistantChatPage() {
       {/* Conversation pane */}
       <section className="glass-panel flex flex-col overflow-hidden">
         {!active && (
-          <div className="m-auto text-center text-slate-400">
+          <div className="m-auto text-center text-ink-50">
             <MessageSquare size={32} className="mx-auto mb-2 opacity-50" />
             <p>选择或创建一个会话开始对话</p>
           </div>
@@ -167,13 +167,13 @@ export function AssistantChatPage() {
         {active && (
           <>
             <div className="mb-3 border-b border-white/5 pb-2">
-              <h2 className="font-display text-base font-semibold text-white">
+              <h2 className="font-display text-base font-semibold text-ink-600">
                 {active.session.title || '未命名'}
               </h2>
             </div>
             <div className="flex-1 space-y-3 overflow-y-auto pr-2">
               {active.messages.length === 0 && (
-                <p className="text-sm text-slate-500">说点什么开始对话…</p>
+                <p className="text-sm text-sand-500">说点什么开始对话…</p>
               )}
               {active.messages.map((m) => (
                 <Bubble key={m.id} message={m} />
@@ -211,7 +211,7 @@ function Bubble({ message }: { message: AssistantMessage }) {
             ? 'bg-primary-400/20 text-primary-100'
             : message.role === 'system'
               ? 'border border-amber-400/30 bg-amber-400/5 text-amber-200'
-              : 'bg-white/5 text-slate-200')
+              : 'bg-white/5 text-ink-200')
         }
       >
         {message.content}
diff --git a/web/src/pages/DiscoverPage.tsx b/web/src/pages/DiscoverPage.tsx
index 4970254..7d583b5 100644
--- a/web/src/pages/DiscoverPage.tsx
+++ b/web/src/pages/DiscoverPage.tsx
@@ -65,11 +65,11 @@ export function DiscoverPage() {
       {/* Header */}
       <header className="flex items-center gap-4 mb-8">
         <div className="p-3 rounded-2xl bg-gradient-to-br from-primary-500/20 to-primary-600/10 border border-primary-500/20">
-          <Sparkles className="h-8 w-8 text-primary-400" />
+          <Sparkles className="h-8 w-8 text-brand-500" />
         </div>
         <div>
-          <h1 className="font-display text-4xl font-bold text-white tracking-tight">发现</h1>
-          <p className="mt-1 text-base text-slate-400">
+          <h1 className="font-display text-4xl font-bold text-ink-600 tracking-tight">发现</h1>
+          <p className="mt-1 text-base text-ink-50">
             来自 TMDb 的当日热门与流行榜单
           </p>
         </div>
@@ -83,13 +83,13 @@ export function DiscoverPage() {
           <div className="mx-auto w-16 h-16 rounded-full bg-amber-500/10 flex items-center justify-center">
             <AlertTriangle className="h-8 w-8 text-amber-400" />
           </div>
-          <h3 className="text-lg font-semibold text-white">TMDb API Key 未配置</h3>
-          <p className="text-sm text-slate-400 max-w-md mx-auto">
+          <h3 className="text-lg font-semibold text-ink-600">TMDb API Key 未配置</h3>
+          <p className="text-sm text-ink-50 max-w-md mx-auto">
             您需要在管理后台填入 TMDb API Key 才能查看发现内容。
           </p>
           <Link
             to="/admin"
-            className="inline-flex items-center gap-2 px-5 py-2.5 rounded-xl bg-primary-500/20 text-primary-400 hover:bg-primary-500/30 transition-colors font-medium"
+            className="inline-flex items-center gap-2 px-5 py-2.5 rounded-xl bg-primary-500/20 text-brand-500 hover:bg-primary-500/30 transition-colors font-medium"
           >
             前往管理后台
             <ExternalLink className="h-4 w-4" />
@@ -103,15 +103,15 @@ export function DiscoverPage() {
           <div className="mx-auto w-16 h-16 rounded-full bg-orange-500/10 flex items-center justify-center">
             <Wifi className="h-8 w-8 text-orange-400" />
           </div>
-          <h3 className="text-lg font-semibold text-white">无法连接到 TMDb</h3>
-          <p className="text-sm text-slate-400 max-w-lg mx-auto">
+          <h3 className="text-lg font-semibold text-ink-600">无法连接到 TMDb</h3>
+          <p className="text-sm text-ink-50 max-w-lg mx-auto">
             服务器到 <code className="font-mono text-orange-300">api.themoviedb.org</code> 的连接超时。
             通常是因为部署机器没有走代理。可以在系统环境变量里设置
             <code className="font-mono text-orange-300 mx-1">HTTPS_PROXY</code>，
             或在「外部 API」配置里填写自建反代地址（tmdb_api_proxy / tmdb_image_proxy）。
           </p>
-          <details className="text-xs text-slate-500 max-w-lg mx-auto text-left">
-            <summary className="cursor-pointer hover:text-slate-400">查看原始错误</summary>
+          <details className="text-xs text-sand-500 max-w-lg mx-auto text-left">
+            <summary className="cursor-pointer hover:text-ink-50">查看原始错误</summary>
             <pre className="mt-2 p-2 rounded bg-black/40 overflow-x-auto whitespace-pre-wrap">{anyErr}</pre>
           </details>
         </div>
@@ -134,7 +134,7 @@ export function DiscoverPage() {
           {/* TMDB 配置 OK 但本次没拿到任何条目（极少见） */}
           {!networkErr && trending.length === 0 && popular.length === 0 && !otherErr && (
             <div className="text-center py-12">
-              <p className="text-slate-500">暂无发现内容</p>
+              <p className="text-sand-500">暂无发现内容</p>
             </div>
           )}
         </div>
@@ -146,7 +146,7 @@ export function DiscoverPage() {
 function ContentRow({ title, items }: { title: string; items: DiscoverItem[] }) {
   return (
     <section className="space-y-4">
-      <h2 className="font-display text-2xl font-semibold text-white pl-1">{title}</h2>
+      <h2 className="font-display text-2xl font-semibold text-ink-600 pl-1">{title}</h2>
       <div className="grid grid-cols-3 gap-4 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-7 xl:grid-cols-8">
         {items.map((item) => (
           <DiscoverCard key={item.tmdb_id} item={item} />
@@ -169,7 +169,7 @@ function DiscoverCard({ item }: { item: DiscoverItem }) {
             className="h-full w-full object-cover group-hover:scale-105 transition-transform duration-500"
           />
         ) : (
-          <div className="flex h-full w-full items-center justify-center text-slate-600 text-xs">
+          <div className="flex h-full w-full items-center justify-center text-sand-400 text-xs">
             无海报
           </div>
         )}
@@ -180,11 +180,11 @@ function DiscoverCard({ item }: { item: DiscoverItem }) {
         )}
       </div>
       <div className="px-2.5 py-2 space-y-0.5">
-        <p className="text-xs font-medium text-white truncate group-hover:text-primary-400 transition-colors">
+        <p className="text-xs font-medium text-ink-600 truncate group-hover:text-brand-500 transition-colors">
           {item.title}
         </p>
         {item.year > 0 && (
-          <p className="text-[11px] text-slate-500">{item.year}</p>
+          <p className="text-[11px] text-sand-500">{item.year}</p>
         )}
       </div>
     </div>
diff --git a/web/src/pages/DlnaPage.tsx b/web/src/pages/DlnaPage.tsx
index 1829e38..2df6c36 100644
--- a/web/src/pages/DlnaPage.tsx
+++ b/web/src/pages/DlnaPage.tsx
@@ -53,17 +53,17 @@ export function DlnaPage() {
   return (
     <div className="space-y-6">
       <header className="flex items-center gap-3">
-        <Cast className="h-6 w-6 text-primary-400" />
+        <Cast className="h-6 w-6 text-brand-500" />
         <div>
-          <h1 className="font-display text-3xl font-bold text-white">DLNA 投屏</h1>
-          <p className="text-sm text-slate-400">
+          <h1 className="font-display text-3xl font-bold text-ink-600">DLNA 投屏</h1>
+          <p className="text-sm text-ink-50">
             扫描局域网中的 UPnP MediaRenderer 设备(电视、机顶盒等),选择媒体后一键播放。
           </p>
         </div>
       </header>
 
       <div className="glass-panel space-y-3">
-        <label className="block text-sm text-slate-300">选择媒体:</label>
+        <label className="block text-sm text-ink-100">选择媒体:</label>
         <select
           className="input-base"
           value={selectedMedia}
@@ -79,7 +79,7 @@ export function DlnaPage() {
       </div>
 
       <div className="flex items-center justify-between">
-        <h2 className="font-display text-xl font-semibold text-white">
+        <h2 className="font-display text-xl font-semibold text-ink-600">
           设备 ({devices.length})
         </h2>
         <button
@@ -93,7 +93,7 @@ export function DlnaPage() {
 
       {devices.length === 0 && !scanning && (
         <div className="glass-panel">
-          <p className="text-slate-300">
+          <p className="text-ink-100">
             未发现任何 DLNA 设备。请确保:服务器与设备在同一局域网,容器使用 host 网络模式,
             目标设备已开启 DLNA / 屏幕镜像。
           </p>
@@ -104,10 +104,10 @@ export function DlnaPage() {
         {devices.map((dev) => (
           <div key={dev.udn} className="glass-panel space-y-2 !p-4">
             <div className="flex items-center gap-2">
-              <Tv size={18} className="text-primary-400" />
-              <p className="font-medium text-white">{dev.friendly_name || dev.model_name}</p>
+              <Tv size={18} className="text-brand-500" />
+              <p className="font-medium text-ink-600">{dev.friendly_name || dev.model_name}</p>
             </div>
-            <p className="text-xs text-slate-400">
+            <p className="text-xs text-ink-50">
               {dev.manufacturer} · {dev.ip_address}
             </p>
             <button
diff --git a/web/src/pages/DownloadClientsPage.tsx b/web/src/pages/DownloadClientsPage.tsx
index baf5f09..98551b2 100644
--- a/web/src/pages/DownloadClientsPage.tsx
+++ b/web/src/pages/DownloadClientsPage.tsx
@@ -66,8 +66,8 @@ export function DownloadClientsPage() {
             <Server size={20} />
           </div>
           <div>
-            <h1 className="font-display text-3xl font-bold text-white">下载器管理</h1>
-            <p className="text-sm text-slate-400">
+            <h1 className="font-display text-3xl font-bold text-ink-600">下载器管理</h1>
+            <p className="text-sm text-ink-50">
               qBittorrent / Aria2 / Transmission · 多客户端 + 连接测试
             </p>
           </div>
@@ -84,13 +84,13 @@ export function DownloadClientsPage() {
       </div>
 
       {loading && (
-        <div className="flex justify-center py-12 text-slate-400">
+        <div className="flex justify-center py-12 text-ink-50">
           <Loader2 className="animate-spin" />
         </div>
       )}
 
       {!loading && clients.length === 0 && (
-        <div className="glass-panel py-12 text-center text-slate-400">暂无下载器</div>
+        <div className="glass-panel py-12 text-center text-ink-50">暂无下载器</div>
       )}
 
       {!loading && clients.length > 0 && (
@@ -102,22 +102,22 @@ export function DownloadClientsPage() {
             >
               <div className="min-w-0">
                 <div className="flex items-center gap-2">
-                  <span className="font-medium text-white">{c.name}</span>
-                  <span className="rounded border border-white/10 bg-white/5 px-2 py-0.5 text-xs text-slate-400">
+                  <span className="font-medium text-ink-600">{c.name}</span>
+                  <span className="rounded border border-white/10 bg-white/5 px-2 py-0.5 text-xs text-ink-50">
                     {c.type}
                   </span>
                   {c.is_default && (
-                    <span className="rounded bg-primary-400/20 px-2 py-0.5 text-xs text-primary-400">
+                    <span className="rounded bg-primary-400/20 px-2 py-0.5 text-xs text-brand-500">
                       默认
                     </span>
                   )}
                   {!c.enabled && (
-                    <span className="rounded bg-slate-500/30 px-2 py-0.5 text-xs text-slate-300">
+                    <span className="rounded bg-sand-500/30 px-2 py-0.5 text-xs text-ink-100">
                       已禁用
                     </span>
                   )}
                 </div>
-                <div className="mt-1 truncate text-xs text-slate-400">
+                <div className="mt-1 truncate text-xs text-ink-50">
                   {c.host}
                   {c.username && ` · ${c.username}`}
                 </div>
@@ -125,7 +125,7 @@ export function DownloadClientsPage() {
               <div className="flex shrink-0 gap-2">
                 <button
                   onClick={() => onTest(c.id)}
-                  className="rounded border border-white/10 px-2 py-1 text-xs text-slate-300 hover:border-primary-400/40 hover:text-primary-400"
+                  className="rounded border border-white/10 px-2 py-1 text-xs text-ink-100 hover:border-primary-400/40 hover:text-brand-500"
                 >
                   <Send size={12} className="inline" /> 测试
                 </button>
@@ -134,7 +134,7 @@ export function DownloadClientsPage() {
                     setEditing(c)
                     setShowForm(true)
                   }}
-                  className="rounded border border-white/10 px-2 py-1 text-xs text-slate-300 hover:border-primary-400/40 hover:text-primary-400"
+                  className="rounded border border-white/10 px-2 py-1 text-xs text-ink-100 hover:border-primary-400/40 hover:text-brand-500"
                 >
                   <Pencil size={12} className="inline" /> 编辑
                 </button>
@@ -216,7 +216,7 @@ function ClientFormModal({
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4 backdrop-blur-sm">
       <div className="glass-panel w-full max-w-lg max-h-[90vh] overflow-y-auto">
-        <h2 className="mb-4 font-display text-xl font-semibold text-white">
+        <h2 className="mb-4 font-display text-xl font-semibold text-ink-600">
           {editing ? '编辑下载器' : '添加下载器'}
         </h2>
         <form onSubmit={onSubmit} className="space-y-4">
@@ -278,7 +278,7 @@ function ClientFormModal({
             </Field>
           )}
           <div className="flex flex-wrap gap-4">
-            <label className="flex items-center gap-2 text-sm text-slate-300">
+            <label className="flex items-center gap-2 text-sm text-ink-100">
               <input
                 type="checkbox"
                 className="h-4 w-4 accent-primary-400"
@@ -287,7 +287,7 @@ function ClientFormModal({
               />
               设为默认
             </label>
-            <label className="flex items-center gap-2 text-sm text-slate-300">
+            <label className="flex items-center gap-2 text-sm text-ink-100">
               <input
                 type="checkbox"
                 className="h-4 w-4 accent-primary-400"
@@ -301,7 +301,7 @@ function ClientFormModal({
             <button
               type="button"
               onClick={onClose}
-              className="rounded border border-white/10 px-4 py-2 text-sm text-slate-300 hover:bg-white/5"
+              className="rounded border border-white/10 px-4 py-2 text-sm text-ink-100 hover:bg-white/5"
             >
               取消
             </button>
@@ -318,7 +318,7 @@ function ClientFormModal({
 function Field({ label, children }: { label: string; children: React.ReactNode }) {
   return (
     <label className="block">
-      <span className="mb-1 block text-sm text-slate-300">{label}</span>
+      <span className="mb-1 block text-sm text-ink-100">{label}</span>
       {children}
     </label>
   )
diff --git a/web/src/pages/DownloadsPage.tsx b/web/src/pages/DownloadsPage.tsx
index cf7d20d..2e8aae6 100644
--- a/web/src/pages/DownloadsPage.tsx
+++ b/web/src/pages/DownloadsPage.tsx
@@ -60,7 +60,7 @@ export function DownloadsPage() {
 
   return (
     <div className="space-y-6">
-      <h1 className="font-display text-3xl font-bold text-white">下载</h1>
+      <h1 className="font-display text-3xl font-bold text-ink-600">下载</h1>
 
       <form onSubmit={onAdd} className="glass-panel grid gap-3 md:grid-cols-[1fr_1fr_auto]">
         <input
@@ -82,20 +82,20 @@ export function DownloadsPage() {
       </form>
 
       <section className="glass-panel">
-        <h2 className="mb-3 font-display text-lg font-semibold text-white">实时状态</h2>
+        <h2 className="mb-3 font-display text-lg font-semibold text-ink-600">实时状态</h2>
         {torrents === null && (
-          <p className="text-slate-500">
+          <p className="text-sand-500">
             尚未连接到下载器 — 请到{' '}
-            <a href="/download-clients" className="text-primary-400 hover:underline">
+            <a href="/download-clients" className="text-brand-500 hover:underline">
               下载器
             </a>{' '}
             页面添加并测试连接（qBittorrent / Aria2 / Transmission）。
           </p>
         )}
-        {torrents && torrents.length === 0 && <p className="text-slate-500">暂无运行中任务。</p>}
+        {torrents && torrents.length === 0 && <p className="text-sand-500">暂无运行中任务。</p>}
         {torrents && torrents.length > 0 && (
           <table className="w-full text-left text-sm">
-            <thead className="text-xs uppercase tracking-wider text-slate-500">
+            <thead className="text-xs uppercase tracking-wider text-sand-500">
               <tr>
                 <th className="py-2">名称</th>
                 <th>状态</th>
@@ -108,11 +108,11 @@ export function DownloadsPage() {
             <tbody>
               {torrents.map((t) => (
                 <tr key={t.hash} className="border-t border-white/5 align-top">
-                  <td className="max-w-md truncate py-2 text-white" title={t.name}>
+                  <td className="max-w-md truncate py-2 text-ink-600" title={t.name}>
                     {t.name}
                   </td>
-                  <td className="text-slate-300">{t.state}</td>
-                  <td className="text-slate-300">
+                  <td className="text-ink-100">{t.state}</td>
+                  <td className="text-ink-100">
                     <div className="flex items-center gap-2">
                       <div className="h-1 w-24 overflow-hidden rounded bg-white/10">
                         <div
@@ -123,10 +123,10 @@ export function DownloadsPage() {
                       {(t.progress * 100).toFixed(1)}%
                     </div>
                   </td>
-                  <td className="text-slate-300">
+                  <td className="text-ink-100">
                     ↓ {fmtSpeed(t.dlspeed)} / ↑ {fmtSpeed(t.upspeed)}
                   </td>
-                  <td className="text-slate-300">{fmtBytes(t.size)}</td>
+                  <td className="text-ink-100">{fmtBytes(t.size)}</td>
                   {role === 'admin' && (
                     <td className="py-2 text-right">
                       <button
@@ -151,9 +151,9 @@ export function DownloadsPage() {
 
       {tasks.length > 0 && (
         <section className="glass-panel">
-          <h2 className="mb-3 font-display text-lg font-semibold text-white">历史记录</h2>
+          <h2 className="mb-3 font-display text-lg font-semibold text-ink-600">历史记录</h2>
           <table className="w-full text-left text-sm">
-            <thead className="text-xs uppercase tracking-wider text-slate-500">
+            <thead className="text-xs uppercase tracking-wider text-sand-500">
               <tr>
                 <th className="py-2">来源</th>
                 <th>URL</th>
@@ -164,12 +164,12 @@ export function DownloadsPage() {
             <tbody>
               {tasks.map((t) => (
                 <tr key={t.id} className="border-t border-white/5">
-                  <td className="py-2 text-slate-300">{t.source}</td>
-                  <td className="max-w-md truncate text-slate-300" title={t.url}>
+                  <td className="py-2 text-ink-100">{t.source}</td>
+                  <td className="max-w-md truncate text-ink-100" title={t.url}>
                     {t.url}
                   </td>
-                  <td className="text-slate-300">{t.save_path || '—'}</td>
-                  <td className="text-slate-500">
+                  <td className="text-ink-100">{t.save_path || '—'}</td>
+                  <td className="text-sand-500">
                     {new Date(t.created_at).toLocaleString()}
                   </td>
                 </tr>
diff --git a/web/src/pages/DuplicatesPage.tsx b/web/src/pages/DuplicatesPage.tsx
index e424f02..eee6153 100644
--- a/web/src/pages/DuplicatesPage.tsx
+++ b/web/src/pages/DuplicatesPage.tsx
@@ -54,10 +54,10 @@ export function DuplicatesPage() {
   return (
     <div className="space-y-6">
       <header className="flex items-center gap-3">
-        <Copy className="h-6 w-6 text-primary-400" />
+        <Copy className="h-6 w-6 text-brand-500" />
         <div>
-          <h1 className="font-display text-3xl font-bold text-white">重复文件</h1>
-          <p className="text-sm text-slate-400">
+          <h1 className="font-display text-3xl font-bold text-ink-600">重复文件</h1>
+          <p className="text-sm text-ink-50">
             通过稀疏采样 MD5(头部 / 中部 / 尾部各 1 MiB + 文件大小)检测重复媒体,
             同一组中保留刮削过的较大文件作为主条目,其余标记为重复。
           </p>
@@ -86,19 +86,19 @@ export function DuplicatesPage() {
       </div>
 
       {report && report.groups_found === 0 && (
-        <p className="text-slate-400">扫描了 {report.total_scanned} 项,未发现重复。</p>
+        <p className="text-ink-50">扫描了 {report.total_scanned} 项,未发现重复。</p>
       )}
 
       {report && report.groups.map((g) => (
         <section key={g.hash} className="glass-panel space-y-2">
           <div className="flex items-center justify-between">
-            <p className="font-mono text-xs text-slate-500">{g.hash}</p>
+            <p className="font-mono text-xs text-sand-500">{g.hash}</p>
             <span className="rounded border border-emerald-400/40 px-2 py-0.5 text-xs text-emerald-400">
               主条目
             </span>
           </div>
-          <p className="font-medium text-white">{g.primary.title}</p>
-          <p className="font-mono text-xs text-slate-400">
+          <p className="font-medium text-ink-600">{g.primary.title}</p>
+          <p className="font-mono text-xs text-ink-50">
             {g.primary.path} · {fmtBytes(g.primary.size_bytes)}
           </p>
           <div className="space-y-1 border-t border-white/5 pt-2">
@@ -106,8 +106,8 @@ export function DuplicatesPage() {
               重复 ({g.duplicates.length})
             </p>
             {g.duplicates.map((d) => (
-              <div key={d.id} className="text-xs text-slate-400">
-                <span className="text-white">{d.title}</span> · {d.path} · {fmtBytes(d.size_bytes)}
+              <div key={d.id} className="text-xs text-ink-50">
+                <span className="font-medium text-ink-600">{d.title}</span> · {d.path} · {fmtBytes(d.size_bytes)}
               </div>
             ))}
           </div>
diff --git a/web/src/pages/FavouritesPage.tsx b/web/src/pages/FavouritesPage.tsx
index 372d58c..7d632dd 100644
--- a/web/src/pages/FavouritesPage.tsx
+++ b/web/src/pages/FavouritesPage.tsx
@@ -28,10 +28,10 @@ export function FavouritesPage() {
 
   return (
     <div className="space-y-6">
-      <h1 className="font-display text-3xl font-bold text-white">我的收藏</h1>
+      <h1 className="font-display text-3xl font-bold text-ink-600">我的收藏</h1>
 
       {loading && (
-        <div className="flex items-center gap-2 py-8 text-slate-400">
+        <div className="flex items-center gap-2 py-8 text-ink-50">
           <span className="inline-block h-4 w-4 animate-spin rounded-full border-2 border-primary-400 border-t-transparent" />
           加载中…
         </div>
@@ -64,8 +64,8 @@ export function FavouritesPage() {
 
       {isEmpty && (
         <div className="glass-panel flex flex-col items-center gap-3 p-10 text-center">
-          <p className="text-lg text-slate-300">还没有任何收藏</p>
-          <p className="text-sm text-slate-500">
+          <p className="text-lg text-ink-100">还没有任何收藏</p>
+          <p className="text-sm text-sand-500">
             点击媒体详情页的「收藏」按钮添加喜欢的内容
           </p>
         </div>
diff --git a/web/src/pages/FileManagerPage.tsx b/web/src/pages/FileManagerPage.tsx
index 9f2d6dc..07f3db1 100644
--- a/web/src/pages/FileManagerPage.tsx
+++ b/web/src/pages/FileManagerPage.tsx
@@ -49,8 +49,8 @@ export function FileManagerPage() {
   return (
     <div className="space-y-6">
       <header>
-        <h1 className="font-display text-3xl font-bold text-white">文件浏览器</h1>
-        <p className="text-sm text-slate-400">
+        <h1 className="font-display text-3xl font-bold text-ink-600">文件浏览器</h1>
+        <p className="text-sm text-ink-50">
           只允许访问已配置的根目录(媒体库 + data + cache)。
         </p>
       </header>
@@ -72,13 +72,13 @@ export function FileManagerPage() {
           </button>
         )}
         {data?.path && (
-          <span className="rounded border border-white/10 bg-white/5 px-2 py-1 font-mono text-xs text-slate-300">
+          <span className="rounded border border-white/10 bg-white/5 px-2 py-1 font-mono text-xs text-ink-100">
             {data.path}
           </span>
         )}
       </div>
 
-      {loading && <p className="text-slate-500">加载中…</p>}
+      {loading && <p className="text-sand-500">加载中…</p>}
       {error && <div className="glass-panel !border-red-400/40 text-red-400">{error}</div>}
 
       {!loading && data && !data.entries && data.roots && (
@@ -89,10 +89,10 @@ export function FileManagerPage() {
               onClick={() => setPath(r.path)}
               className="glass-panel flex items-center gap-3 text-left transition hover:border-primary-400/40"
             >
-              <FolderOpen size={20} className="text-primary-400" />
+              <FolderOpen size={20} className="text-brand-500" />
               <div>
-                <p className="font-mono text-sm text-white">{r.label}</p>
-                <p className="font-mono text-xs text-slate-400">{r.path}</p>
+                <p className="font-mono text-sm text-ink-600">{r.label}</p>
+                <p className="font-mono text-xs text-ink-50">{r.path}</p>
               </div>
             </button>
           ))}
@@ -102,7 +102,7 @@ export function FileManagerPage() {
       {!loading && data?.entries && data.entries.length > 0 && (
         <div className="glass-panel">
           <table className="w-full text-left text-sm">
-            <thead className="text-xs uppercase tracking-wider text-slate-500">
+            <thead className="text-xs uppercase tracking-wider text-sand-500">
               <tr>
                 <th className="py-2">名称</th>
                 <th>大小</th>
@@ -117,16 +117,16 @@ export function FileManagerPage() {
                   onClick={() => enter(e)}
                   title={e.path}
                 >
-                  <td className="flex items-center gap-2 py-2 text-white">
+                  <td className="flex items-center gap-2 py-2 text-ink-600">
                     {e.is_dir ? (
-                      <Folder size={16} className="text-primary-400" />
+                      <Folder size={16} className="text-brand-500" />
                     ) : (
-                      <FileVideo size={16} className="text-slate-400" />
+                      <FileVideo size={16} className="text-ink-50" />
                     )}
                     {e.name}
                   </td>
-                  <td className="text-slate-300">{e.is_dir ? '—' : fmtBytes(e.size)}</td>
-                  <td className="text-slate-500">
+                  <td className="text-ink-100">{e.is_dir ? '—' : fmtBytes(e.size)}</td>
+                  <td className="text-sand-500">
                     {new Date(e.modified * 1000).toLocaleString()}
                   </td>
                 </tr>
@@ -137,7 +137,7 @@ export function FileManagerPage() {
       )}
 
       {!loading && data?.entries && data.entries.length === 0 && (
-        <p className="text-slate-400">空目录。</p>
+        <p className="text-ink-50">空目录。</p>
       )}
     </div>
   )
diff --git a/web/src/pages/HomePage.tsx b/web/src/pages/HomePage.tsx
index 5c676c2..baab792 100644
--- a/web/src/pages/HomePage.tsx
+++ b/web/src/pages/HomePage.tsx
@@ -1,44 +1,23 @@
-import { useEffect, useMemo, useState } from 'react'
+﻿import { useEffect, useMemo, useState } from 'react'
 import { Link } from 'react-router-dom'
+import { motion } from 'framer-motion'
 import {
-  ArrowRight,
-  Play,
-  Clock,
-  Film,
-  Compass,
-  Sparkles,
-  Layers,
-  Library as LibraryIcon,
-  Tv,
-  Music,
-  PlayCircle,
+  ArrowRight, Play, Clock, Film, Sparkles,
+  Library as LibraryIcon, Tv, Music, PlayCircle, ChevronRight
 } from 'lucide-react'
-
 import { libraryAPI, mediaAPI } from '../api/library'
 import { playbackAPI, type HistoryItem } from '../api/playback'
 import { imageURL } from '../api/client'
+import { MediaCard } from '../components/MediaCard'
 import type { Library, Media } from '../types'
 import { groupSeries } from '../utils/groupSeries'
 
-// LibraryRow 把单个媒体库的最近添加聚合成代表卡片列表。
-type LibraryRow = {
-  library: Library
-  cards: ReturnType<typeof groupSeries>
-}
-
-const TYPE_LABELS: Record<string, string> = {
-  movie: '电影',
-  tv: '电视剧',
-  anime: '动漫',
-  music: '音乐',
-}
+type LibraryRow = { library: Library; cards: ReturnType<typeof groupSeries> }
 
 const TYPE_ICONS: Record<string, React.ReactNode> = {
-  movie: <Film size={16} />,
-  tv: <Tv size={16} />,
-  anime: <PlayCircle size={16} />,
-  music: <Music size={16} />,
+  movie: <Film size={18} />, tv: <Tv size={18} />, anime: <PlayCircle size={18} />, music: <Music size={18} />,
 }
+const TYPE_LABELS: Record<string, string> = { movie: '电影', tv: '电视剧', anime: '动漫', music: '音乐' }
 
 export function HomePage() {
   const [libraries, setLibraries] = useState<Library[]>([])
@@ -48,11 +27,9 @@ export function HomePage() {
 
   useEffect(() => {
     let cancelled = false
-
     async function load() {
       setLoading(true)
       try {
-        // 1) 拉所有库 + 历史
         const [libs, hist] = await Promise.all([
           libraryAPI.list().catch(() => [] as Library[]),
           playbackAPI.recentHistory().catch(() => [] as HistoryItem[]),
@@ -60,295 +37,267 @@ export function HomePage() {
         if (cancelled) return
         setLibraries(libs)
         setHistory(hist.filter((h) => !h.completed && !!h.media))
-
-        // 2) 并行为每个库拉最近 60 条 media，前端折叠成剧集卡片
-        const perLib = await Promise.all(
-          libs.map(async (lib) => {
-            try {
-              const page = await libraryAPI.listMedia(lib.id, 1, 60)
-              const cards = groupSeries(page.items).slice(0, 12)
-              return { library: lib, cards } as LibraryRow
-            } catch {
-              return { library: lib, cards: [] } as LibraryRow
-            }
-          }),
-        )
+        const perLib = await Promise.all(libs.map(async (lib) => {
+          try {
+            const page = await libraryAPI.listMedia(lib.id, 1, 60)
+            return { library: lib, cards: groupSeries(page.items).slice(0, 14) } as LibraryRow
+          } catch { return { library: lib, cards: [] } as LibraryRow }
+        }))
         if (cancelled) return
         setRows(perLib)
-      } finally {
-        if (!cancelled) setLoading(false)
-      }
+      } finally { if (!cancelled) setLoading(false) }
     }
-
     load()
-    return () => {
-      cancelled = true
-    }
+    return () => { cancelled = true }
   }, [])
 
-  // 兜底：如果一个库都没有，但 /api/media 有内容（旧数据），回退展示一个总卡片墙。
   const [fallback, setFallback] = useState<Media[]>([])
   useEffect(() => {
-    if (loading) return
-    if (libraries.length > 0) return
+    if (loading || libraries.length > 0) return
     mediaAPI.search('', 60).then((d) => setFallback(d.items)).catch(() => undefined)
   }, [loading, libraries.length])
-
   const fallbackCards = useMemo(() => groupSeries(fallback).slice(0, 16), [fallback])
-  const empty =
-    !loading &&
-    history.length === 0 &&
-    rows.every((r) => r.cards.length === 0) &&
-    fallbackCards.length === 0
+
+  // Pick a featured movie/show for the premium editorial billboard
+  const featuredItem = useMemo(() => {
+    if (history.length > 0 && history[0].media) {
+      return history[0].media;
+    }
+    if (rows.length > 0 && rows[0].cards.length > 0) {
+      return rows[0].cards[0].rep;
+    }
+    if (fallback.length > 0) {
+      return fallback[0];
+    }
+    return null;
+  }, [history, rows, fallback]);
+
+  const empty = !loading && history.length === 0 && rows.every((r) => r.cards.length === 0) && fallbackCards.length === 0
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center py-48">
+        <motion.div animate={{ opacity: [0.4, 1, 0.4] }} transition={{ repeat: Infinity, duration: 1.5 }} className="flex flex-col items-center gap-4">
+          <div className="relative flex items-center justify-center">
+            <div className="h-10 w-10 rounded-full border-2 border-gray-100 border-t-gray-900 animate-spin" />
+            <Film className="absolute h-4 w-4 text-brand-500" />
+          </div>
+          <span className="text-sm font-semibold tracking-widest text-gray-400 uppercase">站点舱准备中…</span>
+        </motion.div>
+      </div>
+    )
+  }
+
+  if (empty) {
+    return (
+      <div className="flex flex-col items-center justify-center py-32 text-center max-w-md mx-auto">
+        <div className="mb-6 flex h-24 w-24 items-center justify-center rounded-3xl bg-gray-100 border border-gray-200/50 shadow-sm">
+          <Film className="h-10 w-10 text-gray-400" />
+        </div>
+        <p className="text-xl font-bold text-gray-900">您的家庭影视站暂无内容</p>
+        <p className="mt-2 text-sm text-gray-500 leading-relaxed">
+          立即前往管理后台配置您的第一个媒体库，添加影视目录并触发后台刮削扫描任务。
+        </p>
+        <Link to="/admin" className="mt-8 btn-primary">
+          前往管理后台
+        </Link>
+      </div>
+    )
+  }
 
   return (
-    <div className="animate-fade-in space-y-12">
-      {/* ── Header ── */}
-      <header className="flex items-end justify-between">
-        <div>
-          <h1 className="font-display text-3xl font-bold tracking-tight text-cream-100">
-            媒体中心
-          </h1>
-          <p className="mt-1.5 text-sm text-cream-400">
-            从你上次离开的地方继续
-          </p>
-        </div>
-        {!loading && (
-          <Link
-            to="/discover"
-            className="flex items-center gap-1.5 text-sm text-cream-400 transition-colors hover:text-brand-400"
-          >
-            <Compass size={14} />
-            发现更多
-            <ArrowRight size={14} />
-          </Link>
-        )}
-      </header>
-
-      {/* Loading */}
-      {loading && (
-        <div className="flex items-center gap-3 py-16">
-          <div className="h-1.5 w-1.5 animate-pulse rounded-full bg-brand-500/60" />
-          <p className="text-sm text-cream-500">加载媒体库…</p>
-        </div>
-      )}
-
-      {/* Empty */}
-      {empty && (
-        <div className="surface-card flex flex-col items-center gap-4 py-16 text-center">
-          <Film className="h-12 w-12 text-cream-900/40" />
-          <div>
-            <p className="font-medium text-cream-300">还没有任何媒体</p>
-            <p className="mt-1 text-sm text-cream-500">
-              前往{' '}
-              <Link to="/admin" className="text-brand-400 underline underline-offset-2">
-                管理后台
-              </Link>{' '}
-              创建媒体库，然后触发一次扫描
-            </p>
+    <div className="space-y-12">
+      {/* ─── Premium Swiss-Editorial Billboard Hero ─── */}
+      {featuredItem && (
+        <section 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)]">
+          {/* Background Poster Cover & Soft Faded Backdrop */}
+          <div className="absolute inset-0 z-0">
+            {featuredItem.poster_url ? (
+              <img 
+                src={imageURL(featuredItem.poster_url)} 
+                alt="" 
+                className="w-full h-full object-cover object-top opacity-5 scale-105 blur-sm"
+              />
+            ) : (
+              <div className="w-full h-full bg-gray-50" />
+            )}
+            {/* Soft Bright Masking */}
+            <div className="absolute inset-0 bg-gradient-to-r from-white via-white/95 to-transparent" />
+            <div className="absolute inset-0 bg-gradient-to-t from-white via-transparent to-transparent" />
           </div>
-        </div>
+
+          {/* Billboard Content */}
+          <div className="relative z-10 px-8 py-14 sm:px-12 md:py-16 lg:py-20 max-w-3xl space-y-5">
+            <div className="inline-flex items-center gap-2 rounded-full bg-brand-50 px-3.5 py-1.5 text-xs font-bold uppercase tracking-widest text-[#c9954a] border border-brand-100/40">
+              <Sparkles size={12} fill="currentColor" />
+              <span>本周力荐 / Featured</span>
+            </div>
+
+            <h1 className="font-display text-3xl sm:text-4xl md:text-5xl font-extrabold tracking-tight leading-tight text-gray-900">
+              {featuredItem.title}
+            </h1>
+
+            {featuredItem.overview ? (
+              <p className="text-gray-500 text-sm sm:text-base leading-relaxed line-clamp-3 font-semibold">
+                {featuredItem.overview}
+              </p>
+            ) : (
+              <p className="text-gray-400 text-sm italic">
+                家庭私人媒体中心收藏。极高视听品质，支持多端原生无损解码及HLS转码播放。
+              </p>
+            )}
+
+            {/* Metadata Badges */}
+            <div className="flex flex-wrap items-center gap-3 text-xs text-gray-500 font-bold">
+              {featuredItem.year > 0 && (
+                <span className="bg-gray-100 px-2.5 py-1 rounded-md text-gray-900 border border-gray-200">{featuredItem.year} 年</span>
+              )}
+              {featuredItem.video_codec && (
+                <span className="rounded bg-brand-50 px-2 py-1 text-brand-700 border border-brand-100 uppercase font-bold text-[10px]">
+                  {featuredItem.video_codec}
+                </span>
+              )}
+              {featuredItem.container && (
+                <span className="rounded bg-gray-100 px-2 py-1 text-gray-700 border border-gray-200 uppercase font-mono text-[10px]">
+                  {featuredItem.container}
+                </span>
+              )}
+            </div>
+
+            {/* Buttons */}
+            <div className="flex flex-wrap items-center gap-4 pt-4">
+              <Link to={`/media/${featuredItem.id}`} className="inline-flex items-center justify-center gap-2 rounded-xl bg-[#111827] px-6 py-3.5 text-sm font-bold text-white shadow-sm hover:bg-[#1f2937] hover:-translate-y-0.5 transition-all">
+                <Play size={16} fill="currentColor" />
+                <span>立即播放</span>
+              </Link>
+              <Link to="/discover" className="btn-outline px-5 py-3.5 text-sm font-bold text-gray-700 border border-gray-200 hover:border-gray-300">
+                <span>发现更多精彩</span>
+                <ArrowRight size={16} />
+              </Link>
+            </div>
+          </div>
+        </section>
       )}
 
-      {/* Continue Watching */}
+      {/* ─── Continue Watching Section ─── */}
       {history.length > 0 && (
-        <section>
-          <SectionHeading icon={<Play size={16} />} label="继续观看" />
-          <div className="flex gap-4 overflow-x-auto pb-2">
-            {history.slice(0, 6).map((h) => {
+        <section className="space-y-5">
+          <div className="flex items-center gap-2.5">
+            <span className="p-1.5 rounded-lg bg-gray-100 border border-gray-200/50 text-gray-900">
+              <Clock size={16} />
+            </span>
+            <h2 className="font-display text-xl font-extrabold tracking-tight text-gray-900">继续观看</h2>
+            <span className="text-xs font-bold text-gray-400 bg-gray-100 px-2.5 py-0.5 rounded-full border border-gray-200/40">{history.length} 个记录</span>
+          </div>
+
+          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4">
+            {history.slice(0, 8).map((h) => {
               const m = h.media!
-              const progress = h.duration_ms > 0 ? h.position_ms / h.duration_ms : 0
-              return <WideContinueCard key={h.id} media={m} progress={progress} />
+              const pct = h.duration_ms > 0 ? h.position_ms / h.duration_ms : 0
+              return <ContinueCard key={h.id} media={m} progress={pct} />
             })}
           </div>
         </section>
       )}
 
-      {/* 每个媒体库一行 */}
-      {!loading &&
-        rows
-          .filter((r) => r.cards.length > 0)
-          .map((row) => (
-            <LibrarySection key={row.library.id} row={row} />
-          ))}
+      {/* ─── Media Libraries Grid Sections ─── */}
+      <div className="space-y-12">
+        {rows.filter((r) => r.cards.length > 0).map((row) => (
+          <section key={row.library.id} className="space-y-5">
+            <div className="flex items-center justify-between border-b border-gray-200/80 pb-3">
+              <div className="flex items-center gap-2.5">
+                <span className="p-1.5 rounded-lg bg-gray-100 text-gray-900 border border-gray-200/50">
+                  {TYPE_ICONS[row.library.type] ?? <LibraryIcon size={18} />}
+                </span>
+                <h2 className="font-display text-xl font-extrabold tracking-tight text-gray-900">
+                  {row.library.name}
+                </h2>
+                <span className="rounded-full bg-gray-100 border border-gray-200/80 px-2 py-0.5 text-[10px] font-bold text-gray-500 uppercase tracking-wider">
+                  {TYPE_LABELS[row.library.type] ?? row.library.type}
+                </span>
+              </div>
+              <Link to={`/library/${row.library.id}`} className="group inline-flex items-center gap-1 text-xs font-bold text-gray-600 hover:text-brand-600 transition-colors">
+                <span>浏览全部</span>
+                <ChevronRight size={14} className="transition-transform group-hover:translate-x-0.5" />
+              </Link>
+            </div>
 
-      {/* 旧数据兜底 */}
-      {!loading && libraries.length === 0 && fallbackCards.length > 0 && (
-        <section>
-          <SectionHeading icon={<Clock size={16} />} label="最近添加" />
-          <div className="grid grid-cols-3 gap-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-7 xl:grid-cols-8">
-            {fallbackCards.map((s) => (
-              <PosterCard key={s.rep.id} media={s.rep} count={s.count} />
-            ))}
-          </div>
-        </section>
-      )}
-
-      {/* Quick Links */}
-      {!empty && (
-        <section>
-          <SectionHeading icon={<Sparkles size={16} />} label="快捷入口" />
-          <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
-            <QuickLink to="/discover" label="发现" desc="探索新内容" />
-            <QuickLink to="/favourites" label="收藏" desc="我的珍藏" />
-            <QuickLink to="/history" label="历史" desc="观看记录" />
-            <QuickLink to="/ai" label="AI" desc="智能推荐" />
-          </div>
-        </section>
-      )}
-    </div>
-  )
-}
-
-/* ─── Library 行 ─── */
-function LibrarySection({ row }: { row: LibraryRow }) {
-  const lib = row.library
-  const typeIcon = TYPE_ICONS[lib.type] ?? <LibraryIcon size={16} />
-  const typeLabel = TYPE_LABELS[lib.type] ?? lib.type
-  return (
-    <section>
-      <div className="mb-4 flex items-center justify-between">
-        <div className="flex items-center gap-2">
-          <span className="text-cream-400">{typeIcon}</span>
-          <h2 className="font-display text-lg font-semibold tracking-tight text-cream-200">
-            {lib.name}
-          </h2>
-          <span className="text-xs text-cream-500">·</span>
-          <span className="text-xs text-cream-500">{typeLabel}</span>
-        </div>
-        <Link
-          to={`/library/${lib.id}`}
-          className="flex items-center gap-1.5 text-xs text-cream-400 transition-colors hover:text-brand-400"
-        >
-          查看全部
-          <ArrowRight size={12} />
-        </Link>
-      </div>
-      <div className="grid grid-cols-3 gap-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-7 xl:grid-cols-8">
-        {row.cards.map((s) => (
-          <PosterCard key={s.rep.id} media={s.rep} count={s.count} />
+            <div className="grid grid-cols-2 gap-5 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7">
+              {row.cards.map((s) => (
+                <MediaCard
+                  key={s.rep.id}
+                  media={s.rep}
+                  count={s.count}
+                  linkTo={s.count > 1 ? `/library/${row.library.id}` : undefined}
+                />
+              ))}
+            </div>
+          </section>
         ))}
-      </div>
-    </section>
-  )
-}
 
-/* ─── Section Heading ─── */
-function SectionHeading({ icon, label }: { icon: React.ReactNode; label: string }) {
-  return (
-    <div className="mb-4 flex items-center gap-2">
-      <span className="text-cream-400">{icon}</span>
-      <h2 className="font-display text-lg font-semibold tracking-tight text-cream-200">
-        {label}
-      </h2>
+        {/* ─── Fallback Recents Section ─── */}
+        {libraries.length === 0 && fallbackCards.length > 0 && (
+          <section className="space-y-5">
+            <div className="flex items-center justify-between border-b border-gray-200/80 pb-3">
+              <div className="flex items-center gap-2.5">
+                <span className="p-1.5 rounded-lg bg-gray-100 text-gray-900 border border-gray-200/50">
+                  <Clock size={18} />
+                </span>
+                <h2 className="font-display text-xl font-extrabold tracking-tight text-gray-900">最近添加</h2>
+              </div>
+            </div>
+
+            <div className="grid grid-cols-2 gap-5 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7">
+              {fallbackCards.map((s) => (
+                <MediaCard key={s.rep.id} media={s.rep} count={s.count} />
+              ))}
+            </div>
+          </section>
+        )}
+      </div>
     </div>
   )
 }
 
-/* ─── Wide Continue-Watching Card ─── */
-function WideContinueCard({ media, progress }: { media: Media; progress: number }) {
+function ContinueCard({ media, progress }: { media: Media; progress: number }) {
   return (
-    <Link
-      to={`/media/${media.id}`}
-      className="group flex shrink-0 w-72 items-center gap-4 rounded-lg border border-cream-900/15 bg-surface-400 p-3 transition-all hover:border-brand-500/30 hover:bg-surface-300"
-    >
-      <div className="relative h-20 w-14 shrink-0 overflow-hidden rounded-md bg-surface-600">
+    <Link to={`/media/${media.id}`} className="group flex items-center gap-4 rounded-2xl bg-white p-3.5 border border-gray-200/80 shadow-[0_1px_3px_rgba(0,0,0,0.01)] transition-all duration-300 hover:shadow-md hover:border-brand-500/30">
+      <div className="relative h-18 w-12 shrink-0 overflow-hidden rounded-xl bg-gray-50 border border-gray-100">
         {media.poster_url ? (
-          <img
-            src={imageURL(media.poster_url)}
-            alt={media.title}
-            loading="lazy"
-            className="h-full w-full object-cover"
-            referrerPolicy="no-referrer"
+          <img 
+            src={imageURL(media.poster_url)} 
+            alt="" 
+            loading="lazy" 
+            className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105" 
+            referrerPolicy="no-referrer" 
           />
         ) : (
-          <div className="flex h-full items-center justify-center text-cream-900/30">
-            <Film size={20} />
+          <div className="flex h-full items-center justify-center text-gray-400 bg-gray-50">
+            <Film size={16} />
           </div>
         )}
+        <div className="absolute inset-0 flex items-center justify-center bg-black/30 opacity-0 transition-opacity group-hover:opacity-100">
+          <Play size={14} fill="white" className="text-white" />
+        </div>
       </div>
-      <div className="min-w-0 flex-1">
-        <p className="truncate text-sm font-medium text-cream-200 group-hover:text-cream-100">
+      <div className="min-w-0 flex-1 space-y-1.5">
+        <p className="truncate text-sm font-bold text-gray-900 group-hover:text-brand-500 transition-colors">
           {media.title}
         </p>
-        {media.year > 0 && (
-          <p className="mt-0.5 text-xs text-cream-500">{media.year}</p>
-        )}
-        {progress > 0 && (
-          <div className="mt-2 h-1 w-full overflow-hidden rounded-full bg-cream-900/20">
-            <div
-              className="h-full rounded-full bg-brand-500/70 transition-all group-hover:bg-brand-400"
-              style={{ width: `${Math.round(progress * 100)}%` }}
+        <div className="space-y-1">
+          <div className="h-1.5 w-full overflow-hidden rounded-full bg-gray-100">
+            <motion.div
+              initial={{ width: 0 }}
+              animate={{ width: `${Math.round(progress * 100)}%` }}
+              transition={{ duration: 0.5, delay: 0.1 }}
+              className="h-full rounded-full bg-gradient-to-r from-brand-400 to-brand-500"
             />
           </div>
-        )}
-      </div>
-      <Play
-        size={14}
-        className="shrink-0 text-cream-600 opacity-0 transition-all group-hover:opacity-100 group-hover:text-brand-400"
-      />
-    </Link>
-  )
-}
-
-/* ─── Poster Card (grid item) ─── */
-function PosterCard({ media, count = 1 }: { media: Media; count?: number }) {
-  return (
-    <Link
-      to={`/media/${media.id}`}
-      className="group block overflow-hidden rounded-lg border border-cream-900/15 bg-surface-400 transition-all hover:border-brand-500/30 hover:bg-surface-300"
-    >
-      <div className="relative aspect-[2/3] w-full overflow-hidden bg-surface-600">
-        {media.poster_url ? (
-          <img
-            src={imageURL(media.poster_url)}
-            alt={media.title}
-            loading="lazy"
-            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 items-center justify-center text-cream-900/30">
-            <Film size={36} />
-          </div>
-        )}
-        {count > 1 && (
-          <span className="absolute right-1.5 top-1.5 inline-flex items-center gap-0.5 rounded-md bg-black/60 px-1.5 py-0.5 text-[10px] font-medium text-white backdrop-blur-sm">
-            <Layers size={10} />
-            {count}
-          </span>
-        )}
-        <div className="absolute inset-0 flex items-end bg-gradient-to-t from-black/60 via-transparent to-transparent p-2.5 opacity-0 transition-opacity group-hover:opacity-100">
-          <span className="flex items-center gap-1 text-[11px] text-white/90">
-            <Play size={11} />
-            播放
-          </span>
+          <p className="text-[10px] text-gray-400 font-bold tracking-wide uppercase">
+            已观看到 {Math.round(progress * 100)}%
+          </p>
         </div>
       </div>
-      <div className="px-2.5 py-2">
-        <p className="truncate text-xs font-medium text-cream-200 group-hover:text-cream-100">
-          {media.title}
-        </p>
-        {media.year > 0 && (
-          <p className="mt-0.5 text-[11px] text-cream-500">{media.year}</p>
-        )}
-      </div>
     </Link>
   )
-}
-
-/* ─── Quick Link Tile ─── */
-function QuickLink({ to, label, desc }: { to: string; label: string; desc: string }) {
-  return (
-    <Link
-      to={to}
-      className="group flex items-center gap-3 rounded-lg border border-cream-900/15 bg-surface-400 px-4 py-3.5 transition-all hover:border-brand-500/20 hover:bg-surface-300"
-    >
-      <div className="flex-1">
-        <p className="text-sm font-medium text-cream-300 group-hover:text-cream-100">{label}</p>
-        <p className="mt-0.5 text-xs text-cream-500">{desc}</p>
-      </div>
-      <ArrowRight size={14} className="text-cream-600 transition-colors group-hover:text-brand-400" />
-    </Link>
-  )
-}
+}
\ No newline at end of file
diff --git a/web/src/pages/LibraryPage.tsx b/web/src/pages/LibraryPage.tsx
index 12dd47d..6d6171e 100644
--- a/web/src/pages/LibraryPage.tsx
+++ b/web/src/pages/LibraryPage.tsx
@@ -1,72 +1,92 @@
 import { useEffect, useMemo, useState } from 'react'
-import { useParams } from 'react-router-dom'
+import { Link, useParams, useNavigate } from 'react-router-dom'
+import { motion, AnimatePresence } from 'framer-motion'
 import toast from 'react-hot-toast'
+import { ArrowLeft, Play, Film, Layers } from 'lucide-react'
 
 import { libraryAPI } from '../api/library'
-import { seriesAPI, type SeasonGroup } from '../api/series'
 import type { Library, Media } from '../types'
 import { MediaCard } from '../components/MediaCard'
+import { imageURL } from '../api/client'
 import { useAuthStore } from '../stores/auth'
+import { groupSeries, type SeriesCard } from '../utils/groupSeries'
 
-// LibraryPage renders one of two layouts depending on the library type:
-//
-//   - movie / music / default → flat poster grid with pagination.
-//   - tv / anime              → grouped by season with an episode list.
-//
-// Admins also get scan + scrape buttons in the header.
 export function LibraryPage() {
   const { id = '' } = useParams()
+  const navigate = useNavigate()
   const role = useAuthStore((s) => s.user?.role)
 
   const [library, setLibrary] = useState<Library | null>(null)
   const [items, setItems] = useState<Media[]>([])
-  const [seasons, setSeasons] = useState<SeasonGroup[]>([])
   const [total, setTotal] = useState(0)
   const [loading, setLoading] = useState(true)
   const [scanning, setScanning] = useState(false)
   const [scraping, setScraping] = useState(false)
 
+  // 剧集模式：选中某个剧集后展开详情
+  const [selectedSeries, setSelectedSeries] = useState<SeriesCard | null>(null)
+
   const isSeries = library?.type === 'tv' || library?.type === 'anime'
 
+  // 折叠后的剧集卡片
+  const seriesCards = useMemo(() => {
+    if (!isSeries || items.length === 0) return []
+    return groupSeries(items)
+  }, [isSeries, items])
+
+  // 选中的剧集：所有集按季分组
+  const selectedEpisodes = useMemo(() => {
+    if (!selectedSeries || items.length === 0) return []
+    const title = selectedSeries.rep.title.toLowerCase()
+    const eps = items.filter(
+      (m) => (m.title ?? '').toLowerCase() === title || m.tmdb_id === selectedSeries.rep.tmdb_id,
+    )
+    // 按季分组，按集排序
+    const seasons = new Map<number, Media[]>()
+    for (const ep of eps) {
+      const s = ep.season_num || 1
+      if (!seasons.has(s)) seasons.set(s, [])
+      seasons.get(s)!.push(ep)
+    }
+    for (const [, list] of seasons) {
+      list.sort((a, b) => (a.episode_num || 0) - (b.episode_num || 0))
+    }
+    return Array.from(seasons.entries())
+      .sort(([a], [b]) => a - b)
+      .map(([season, episodes]) => ({ season, episodes }))
+  }, [selectedSeries, items])
+
   useEffect(() => {
     if (!id) return
-    setLoading(true)
-    Promise.all([
-      libraryAPI.list().then((all) => all.find((l) => l.id === id) ?? null),
-    ]).then(([lib]) => setLibrary(lib))
+    libraryAPI.list().then((all) => {
+      const lib = all.find((l) => l.id === id) ?? null
+      setLibrary(lib)
+    })
   }, [id])
 
   useEffect(() => {
     if (!id || !library) return
     setLoading(true)
-    if (library.type === 'tv' || library.type === 'anime') {
-      seriesAPI
-        .seasons(id)
-        .then((s) => setSeasons(s))
-        .finally(() => setLoading(false))
-    } else {
-      libraryAPI
-        .listMedia(id)
-        .then((d) => {
-          setItems(d.items)
-          setTotal(d.total)
-        })
-        .finally(() => setLoading(false))
-    }
+    // tv/anime 拉取较多集数以支持前端分组
+    const limit = library.type === 'tv' || library.type === 'anime' ? 1000 : 200
+    libraryAPI
+      .listMedia(id, 1, limit)
+      .then((d) => {
+        setItems(d.items)
+        setTotal(d.total)
+      })
+      .finally(() => setLoading(false))
   }, [id, library])
 
   const handleScan = async () => {
     setScanning(true)
     try {
       const r = await libraryAPI.scan(id)
-      toast.success(`扫描完成:新增 ${r.added} 项,探测 ${r.probed} 项`)
-      // Force a reload by toggling library state.
+      toast.success(`扫描完成:新增 ${r.added} 项`)
       setLibrary((l) => (l ? { ...l } : l))
     } catch {
       toast.error('扫描失败')
-    } finally {
-      setScanning(false)
-    }
+    } finally { setScanning(false) }
   }
 
   const handleScrape = async () => {
@@ -74,79 +94,177 @@ export function LibraryPage() {
     try {
       await libraryAPI.scrape(id)
       toast.success('刮削已加入后台队列')
-    } catch (err: unknown) {
-      const msg =
-        (err as { response?: { data?: { error?: string } } })?.response?.data?.error ??
-        '刮削失败'
-      toast.error(msg)
-    } finally {
-      setScraping(false)
-    }
+    } catch { toast.error('刮削失败') }
+    finally { setScraping(false) }
   }
 
-  const heading = useMemo(
-    () => (library ? `${library.name}` : '媒体库'),
-    [library],
-  )
+  const handleSeriesClick = (card: SeriesCard) => {
+    setSelectedSeries(card)
+    window.scrollTo({ top: 0, behavior: 'smooth' })
+  }
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center py-32">
+        <motion.div animate={{ opacity: [0.4, 1, 0.4] }} transition={{ repeat: Infinity, duration: 2 }} className="flex items-center gap-3">
+          <div className="h-2 w-2 rounded-full bg-brand-500" />
+          <span className="text-sm text-sand-500">加载中…</span>
+        </motion.div>
+      </div>
+    )
+  }
 
   return (
     <div className="space-y-6">
+      {/* Header */}
       <div className="flex flex-wrap items-center justify-between gap-3">
         <div>
-          <h1 className="font-display text-3xl font-bold text-white">
-            {heading}
-            {!isSeries && <span className="text-slate-500"> ({total})</span>}
+          <h1 className="font-display text-3xl font-bold text-ink-600">
+            {library?.name ?? '媒体库'}
+            {!isSeries && <span className="text-sand-500"> ({total})</span>}
           </h1>
-          {library && (
-            <p className="text-sm text-slate-400">
-              {library.type} · {library.path}
-            </p>
-          )}
+          {library && <p className="text-sm text-ink-50">{library.type} · {library.path}</p>}
         </div>
         {role === 'admin' && (
           <div className="flex gap-2">
-            <button onClick={handleScan} disabled={scanning} className="neon-button">
-              {scanning ? '扫描中…' : '立即扫描'}
-            </button>
-            <button onClick={handleScrape} disabled={scraping} className="neon-button">
-              {scraping ? '刮削中…' : '刮削元数据'}
-            </button>
+            <button onClick={handleScan} disabled={scanning} className="btn-outline">{scanning ? '扫描中…' : '立即扫描'}</button>
+            <button onClick={handleScrape} disabled={scraping} className="btn-outline">{scraping ? '刮削中…' : '刮削元数据'}</button>
           </div>
         )}
       </div>
 
-      {loading && <p className="text-slate-500">加载中…</p>}
-
-      {!isSeries && (
-        <div className="grid grid-cols-3 gap-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-7 xl:grid-cols-8">
+      {/* 非剧集：直接展示海报网格 */}
+      {!isSeries && items.length > 0 && (
+        <div className="grid grid-cols-3 gap-4 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 xl:grid-cols-7 2xl:grid-cols-8">
           {items.map((m) => (
             <MediaCard key={m.id} media={m} />
           ))}
         </div>
       )}
 
-      {isSeries &&
-        seasons.map((s) => (
-          <section key={s.season} className="space-y-3">
-            <h2 className="font-display text-xl font-semibold text-white">
-              {s.season > 0 ? `第 ${s.season} 季` : '未分季'} ({s.episodes.length})
-            </h2>
-            <div className="grid grid-cols-3 gap-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-7 xl:grid-cols-8">
-              {s.episodes.map((e) => (
-                <div key={e.id} className="space-y-1">
-                  <MediaCard media={e} />
-                  {e.episode_num > 0 && (
-                    <p className="px-1 text-xs text-slate-400">第 {e.episode_num} 集</p>
-                  )}
+      {!isSeries && items.length === 0 && (
+        <div className="flex flex-col items-center justify-center py-24 text-center">
+          <Film className="h-12 w-12 text-sand-400 mb-4" />
+          <p className="text-ink-50">该媒体库暂无内容，触发一次扫描后再来看看</p>
+        </div>
+      )}
+
+      {/* 剧集模式：折叠卡片网格 */}
+      {isSeries && seriesCards.length > 0 && !selectedSeries && (
+        <div className="grid grid-cols-3 gap-4 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 xl:grid-cols-7 2xl:grid-cols-8">
+          {seriesCards.map((s) => (
+            <button key={s.rep.id} onClick={() => handleSeriesClick(s)} className="text-left">
+              <MediaCard media={s.rep} count={s.count} />
+            </button>
+          ))}
+        </div>
+      )}
+
+      {/* 剧集详情：季/集选择器 */}
+      <AnimatePresence mode="wait">
+        {selectedSeries && (
+          <motion.div
+            initial={{ opacity: 0, y: 16 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0 }}
+            className="space-y-6"
+          >
+            {/* 返回按钮 + 标题 */}
+            <div className="flex items-center gap-4">
+              <button
+                onClick={() => setSelectedSeries(null)}
+                className="btn-ghost gap-2"
+              >
+                <ArrowLeft size={16} />
+                返回列表
+              </button>
+              <h2 className="font-display text-2xl font-bold text-ink-600 truncate">
+                {selectedSeries.rep.title}
+              </h2>
+              <span className="text-sm text-sand-500">共 {selectedSeries.count} 集</span>
+            </div>
+
+            {/* 海报 + 从第一集开始播放 */}
+            <div className="flex flex-col sm:flex-row gap-6">
+              <div className="w-40 shrink-0 overflow-hidden rounded-xl bg-sand-200 shadow-card">
+                {selectedSeries.rep.poster_url ? (
+                  <img src={imageURL(selectedSeries.rep.poster_url)} alt={selectedSeries.rep.title} className="w-full aspect-[2/3] object-cover" referrerPolicy="no-referrer" />
+                ) : (
+                  <div className="flex items-center justify-center aspect-[2/3] text-sand-400"><Film size={40} /></div>
+                )}
+              </div>
+              <div className="flex-1 space-y-3">
+                <p className="text-sm text-ink-50 leading-relaxed">
+                  {selectedSeries.rep.overview || '暂无简介'}
+                </p>
+
+                {/* 从第一集开始 */}
+                {(() => {
+                  const firstEps = selectedEpisodes.flatMap((s) => s.episodes).filter((e) => e.episode_num > 0).sort((a, b) => (a.episode_num || 0) - (b.episode_num || 0))
+                  const first = firstEps.length > 0 ? firstEps[0] : null
+                  return first ? (
+                    <Link to={`/play/${first.id}`} className="btn-primary inline-flex">
+                      <Play size={16} fill="currentColor" />
+                      从第一集开始播放
+                    </Link>
+                  ) : null
+                })()}
+              </div>
+            </div>
+
+            {/* 季 / 集列表 */}
+            <div className="space-y-6">
+              {selectedEpisodes.map(({ season, episodes }) => (
+                <div key={season}>
+                  <h3 className="mb-3 font-display text-lg font-semibold text-ink-600">
+                    第 {season} 季 · {episodes.length} 集
+                  </h3>
+                  <div className="grid grid-cols-2 gap-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6">
+                    {episodes.map((ep) => (
+                      <Link
+                        key={ep.id}
+                        to={`/play/${ep.id}`}
+                        className="group flex items-center gap-3 rounded-xl border border-sand-200 bg-white p-3 shadow-card transition-all hover:border-brand-300 hover:shadow-card-hover"
+                      >
+                        <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-brand-50 text-brand-600 font-semibold text-sm">
+                          {ep.episode_num || '—'}
+                        </div>
+                        <div className="min-w-0 flex-1">
+                          <p className="truncate text-sm font-medium text-ink-600">
+                            {ep.episode_num > 0 ? `第 ${ep.episode_num} 集` : ep.title}
+                          </p>
+                          <p className="text-xs text-sand-500">
+                            {ep.duration_sec > 0
+                              ? `${Math.floor(ep.duration_sec / 60)} 分钟`
+                              : formatSize(ep.size_bytes)}
+                          </p>
+                        </div>
+                        <Play size={14} className="shrink-0 text-sand-400 opacity-0 transition-opacity group-hover:opacity-100 group-hover:text-brand-500" />
+                      </Link>
+                    ))}
+                  </div>
                 </div>
               ))}
             </div>
-          </section>
-        ))}
+          </motion.div>
+        )}
+      </AnimatePresence>
 
-      {isSeries && !loading && seasons.length === 0 && (
-        <p className="text-slate-400">该库尚未发现任何剧集,触发一次扫描后再来看看。</p>
+      {/* 剧集为空 */}
+      {isSeries && seriesCards.length === 0 && !loading && (
+        <div className="flex flex-col items-center justify-center py-24 text-center">
+          <Film className="h-12 w-12 text-sand-400 mb-4" />
+          <p className="text-ink-50">该库尚未发现任何剧集，触发一次扫描后再来看看</p>
+        </div>
       )}
     </div>
   )
 }
+
+function formatSize(bytes: number): string {
+  if (!bytes || bytes <= 0) return '—'
+  const units = ['B', 'KB', 'MB', 'GB', 'TB']
+  let v = bytes, i = 0
+  while (v >= 1024 && i < units.length - 1) { v /= 1024; i++ }
+  return `${v.toFixed(1)} ${units[i]}`
+}
diff --git a/web/src/pages/LicensePage.tsx b/web/src/pages/LicensePage.tsx
index a7aab87..c7f3294 100644
--- a/web/src/pages/LicensePage.tsx
+++ b/web/src/pages/LicensePage.tsx
@@ -102,16 +102,16 @@ export function LicensePage() {
           <KeySquare size={20} />
         </div>
         <div>
-          <h1 className="font-display text-3xl font-bold text-white">许可证</h1>
-          <p className="text-sm text-slate-400">绑定授权密钥以解锁全部功能</p>
+          <h1 className="font-display text-3xl font-bold text-ink-600">许可证</h1>
+          <p className="text-sm text-ink-50">绑定授权密钥以解锁全部功能</p>
         </div>
       </div>
 
       {/* ── Bind Form ── */}
       <div className="glass-panel space-y-4">
         <div className="flex items-center gap-2">
-          <Link2 size={18} className="text-primary-400" />
-          <h2 className="font-display text-lg font-semibold text-white">绑定许可证</h2>
+          <Link2 size={18} className="text-brand-500" />
+          <h2 className="font-display text-lg font-semibold text-ink-600">绑定许可证</h2>
         </div>
         <form onSubmit={onBind} className="flex gap-3">
           <input
@@ -126,14 +126,14 @@ export function LicensePage() {
             绑定
           </button>
         </form>
-        <p className="text-xs text-slate-500">
+        <p className="text-xs text-sand-500">
           输入从授权服务器获取的许可证密钥，激活后即可使用所有高级功能。
         </p>
       </div>
 
       {/* ── License Status ── */}
       {loadingStatus ? (
-        <div className="flex justify-center py-8 text-slate-400">
+        <div className="flex justify-center py-8 text-ink-50">
           <Loader2 className="animate-spin" />
         </div>
       ) : (
@@ -143,14 +143,14 @@ export function LicensePage() {
               {active && !isExpired ? (
                 <CheckCircle2 size={18} className="text-emerald-400" />
               ) : (
-                <XCircle size={18} className="text-slate-500" />
+                <XCircle size={18} className="text-sand-500" />
               )}
-              <h2 className="font-display text-lg font-semibold text-white">当前状态</h2>
+              <h2 className="font-display text-lg font-semibold text-ink-600">当前状态</h2>
             </div>
             <div className="flex gap-2">
               <button
                 onClick={refreshStatus}
-                className="rounded border border-white/10 p-2 text-slate-400 hover:bg-white/5 hover:text-white"
+                className="rounded border border-white/10 p-2 text-ink-50 hover:bg-white/5 hover:text-white"
                 title="刷新状态"
               >
                 <RefreshCw size={14} />
@@ -158,7 +158,7 @@ export function LicensePage() {
               {active && (
                 <button
                   onClick={onHeartbeat}
-                  className="rounded border border-primary-400/30 px-3 py-1.5 text-xs text-primary-400 hover:bg-primary-400/10"
+                  className="rounded border border-primary-400/30 px-3 py-1.5 text-xs text-brand-500 hover:bg-primary-400/10"
                 >
                   心跳上报
                 </button>
@@ -168,7 +168,7 @@ export function LicensePage() {
 
           {!active && (
             <div className="space-y-3 rounded-lg border border-white/5 bg-white/[0.02] p-4 text-center">
-              <p className="text-slate-400">
+              <p className="text-ink-50">
                 尚未绑定许可证。请在上方输入密钥完成激活。
               </p>
             </div>
@@ -184,8 +184,8 @@ export function LicensePage() {
                   activation.plan === 'enterprise'
                     ? 'text-amber-300'
                     : activation.plan === 'pro'
-                      ? 'text-primary-400'
-                      : 'text-slate-300'
+                      ? 'text-brand-500'
+                      : 'text-ink-100'
                 }
               />
               <StatusBadge label="设备名称" value={activation.device_name || 'Web Client'} />
@@ -212,10 +212,10 @@ export function LicensePage() {
       {/* ── Pro tip ── */}
       {!active && !loadingStatus && (
         <div className="rounded-xl border border-white/5 bg-white/[0.02] p-5 text-center">
-          <p className="text-sm text-slate-500">
+          <p className="text-sm text-sand-500">
             需要获取许可证？请联系管理员获取 MediaStationGo 授权密钥。
           </p>
-          <p className="mt-1 text-xs text-slate-600">
+          <p className="mt-1 text-xs text-sand-400">
             授权服务器地址可在系统设置中配置
           </p>
         </div>
@@ -239,8 +239,8 @@ function StatusBadge({
 }) {
   return (
     <div className="rounded-lg border border-white/5 bg-white/[0.02] p-3">
-      <p className="mb-0.5 text-xs text-slate-500">{label}</p>
-      <p className={`text-sm text-white ${mono ? 'font-mono' : ''} ${className ?? ''}`}>
+      <p className="mb-0.5 text-xs text-sand-500">{label}</p>
+      <p className={`text-sm text-ink-600 ${mono ? 'font-mono' : ''} ${className ?? ''}`}>
         {value}
       </p>
     </div>
diff --git a/web/src/pages/LoginPage.tsx b/web/src/pages/LoginPage.tsx
index 730ae78..da1e79a 100644
--- a/web/src/pages/LoginPage.tsx
+++ b/web/src/pages/LoginPage.tsx
@@ -1,19 +1,18 @@
-import { FormEvent, useState } from 'react'
+﻿import { FormEvent, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
+import { motion } from 'framer-motion'
 import toast from 'react-hot-toast'
-import { Film } from 'lucide-react'
-
+import { Eye, EyeOff, Film, ArrowRight, ShieldCheck, Lock, User } from 'lucide-react'
 import { AppFooter } from '../components/AppFooter'
 import { authAPI } from '../api/auth'
 import { useAuthStore } from '../stores/auth'
 
-// Single-form login screen. The first install seeds admin/admin123 — we
-// surface that hint when no JWT exists yet.
 export function LoginPage() {
   const navigate = useNavigate()
   const setSession = useAuthStore((s) => s.setSession)
   const [username, setUsername] = useState('')
   const [password, setPassword] = useState('')
+  const [showPw, setShowPw] = useState(false)
   const [loading, setLoading] = useState(false)
 
   const handleSubmit = async (e: FormEvent) => {
@@ -25,67 +24,175 @@ export function LoginPage() {
       toast.success(`欢迎回来, ${data.user.username}`)
       navigate('/')
     } catch (err: unknown) {
-      const msg =
-        (err as { response?: { data?: { error?: string } } })?.response?.data?.error ??
-        '登录失败,请检查用户名与密码'
+      const msg = (err as { response?: { data?: { error?: string } } })?.response?.data?.error ?? '登录失败'
       toast.error(msg)
-    } finally {
-      setLoading(false)
-    }
+    } finally { setLoading(false) }
   }
 
   return (
-    <div className="flex min-h-screen flex-col items-center px-4">
-      {/* 表单居中区域：flex-grow + flex center 使表单在剩余空间内垂直居中 */}
-      <div className="flex flex-1 flex-col items-center justify-center">
-        <form onSubmit={handleSubmit} className="glass-panel w-full max-w-md">
-          <div className="mb-8 flex flex-col items-center gap-2">
-            <Film className="h-10 w-10 text-primary-400" />
-            <h1 className="font-display text-2xl font-bold tracking-wide text-white">
-              MediaStationGo
-            </h1>
-            <p className="text-sm text-slate-400">登录到你的家庭媒体中心</p>
-          </div>
-
-          <label className="mb-4 block">
-            <span className="mb-1 block text-sm text-slate-300">用户名</span>
-            <input
-              className="input-base"
-              value={username}
-              onChange={(e) => setUsername(e.target.value)}
-              autoComplete="username"
-              required
-            />
-          </label>
-
-          <label className="mb-6 block">
-            <span className="mb-1 block text-sm text-slate-300">密码</span>
-            <input
-              type="password"
-              className="input-base"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              autoComplete="current-password"
-              required
-            />
-          </label>
-
-          <button
-            type="submit"
-            disabled={loading}
-            className="neon-button w-full justify-center"
-          >
-            {loading ? '登录中…' : '登录'}
-          </button>
-
-          <p className="mt-6 text-center text-xs text-slate-500">
-            首次部署默认账号:<code className="text-primary-400">admin / admin123</code>
-          </p>
-        </form>
+    <div className="relative flex min-h-screen flex-col items-center justify-center bg-gray-50/50 overflow-hidden px-4">
+      {/* ── Editorial Soft Geometric Background Decor ── */}
+      <div className="pointer-events-none absolute inset-0 z-0">
+        <div className="absolute -right-20 -top-20 h-[600px] w-[600px] rounded-full bg-brand-100/30 blur-[130px]" />
+        <div className="absolute -bottom-40 -left-20 h-[500px] w-[500px] rounded-full bg-sage-100/30 blur-[110px]" />
+        <div className="absolute inset-0 bg-[radial-gradient(#e5e7eb_1px,transparent_1px)] [background-size:20px_20px] opacity-40" />
       </div>
 
-      {/* 页脚始终在底部 */}
-      <AppFooter className="mb-4 mt-auto" />
+      {/* ── Main Container ── */}
+      <motion.div
+        initial={{ opacity: 0, y: 30 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.7, ease: [0.16, 1, 0.3, 1] }}
+        className="relative z-10 w-full max-w-[420px] px-2"
+      >
+        {/* High-Contrast Swiss White Panel */}
+        <div className="rounded-3xl border border-gray-200/90 bg-white p-8 sm:p-10 shadow-[0_25px_60px_rgba(17,24,39,0.04),0_1px_3px_rgba(17,24,39,0.01)]">
+          
+          {/* Logo & Headline */}
+          <div className="flex flex-col items-center text-center pb-8">
+            <motion.div
+              initial={{ scale: 0.8, opacity: 0 }}
+              animate={{ scale: 1, opacity: 1 }}
+              transition={{ delay: 0.15, type: 'spring', stiffness: 200 }}
+              className="mb-4 flex h-14 w-14 items-center justify-center rounded-2xl bg-[#111827] shadow-sm"
+            >
+              <Film className="h-7 w-7 text-[#c9954a]" />
+            </motion.div>
+            
+            <motion.h1
+              initial={{ opacity: 0, y: 10 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: 0.25 }}
+              className="font-display text-2xl font-extrabold tracking-tight text-gray-900"
+            >
+              MediaStation
+            </motion.h1>
+            
+            <motion.p
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              transition={{ delay: 0.35 }}
+              className="mt-2 text-xs font-bold uppercase tracking-widest text-[#c9954a]"
+            >
+              家庭媒体私有站舱
+            </motion.p>
+          </div>
+
+          {/* Form */}
+          <form onSubmit={handleSubmit} className="space-y-5">
+            {/* Username Input with Integrated Icon */}
+            <motion.div
+              initial={{ opacity: 0, x: -10 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ delay: 0.4 }}
+            >
+              <label className="block mb-2 text-xs font-bold uppercase tracking-widest text-gray-500">
+                用户名
+              </label>
+              <div className="relative">
+                <span className="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400">
+                  <User size={16} />
+                </span>
+                <input
+                  type="text"
+                  className="w-full rounded-xl border border-gray-200 bg-gray-50/50 px-11 py-3.5 text-sm text-gray-900 placeholder-gray-400 outline-none transition-all duration-300 focus:border-brand-500 focus:bg-white focus:ring-4 focus:ring-brand-100/50"
+                  value={username}
+                  onChange={(e) => setUsername(e.target.value)}
+                  autoComplete="username"
+                  autoFocus
+                  required
+                  placeholder="请输入您的账号"
+                />
+              </div>
+            </motion.div>
+
+            {/* Password Input with Integrated Icon */}
+            <motion.div
+              initial={{ opacity: 0, x: -10 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ delay: 0.45 }}
+            >
+              <label className="block mb-2 text-xs font-bold uppercase tracking-widest text-gray-500">
+                安全密码
+              </label>
+              <div className="relative">
+                <span className="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400">
+                  <Lock size={16} />
+                </span>
+                <input
+                  type={showPw ? 'text' : 'password'}
+                  className="w-full rounded-xl border border-gray-200 bg-gray-50/50 px-11 py-3.5 text-sm text-gray-900 placeholder-gray-400 outline-none transition-all duration-300 focus:border-brand-500 focus:bg-white focus:ring-4 focus:ring-brand-100/50 pr-12"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  autoComplete="current-password"
+                  required
+                  placeholder="••••••••"
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowPw(!showPw)}
+                  className="absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 transition-colors hover:text-gray-900"
+                  tabIndex={-1}
+                >
+                  {showPw ? <EyeOff size={16} /> : <Eye size={16} />}
+                </button>
+              </div>
+            </motion.div>
+
+            {/* Submit Button */}
+            <motion.div
+              initial={{ opacity: 0, y: 10 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: 0.5 }}
+              className="pt-2"
+            >
+              <button
+                type="submit"
+                disabled={loading}
+                className="w-full flex items-center justify-center gap-2 rounded-xl bg-[#111827] py-3.5 text-sm font-bold text-white transition-all duration-300 hover:bg-[#1f2937] hover:-translate-y-0.5 active:translate-y-0 active:scale-[0.98] disabled:opacity-50"
+              >
+                {loading ? (
+                  <span className="flex items-center gap-2">
+                    <svg className="h-4 w-4 animate-spin text-white" viewBox="0 0 24 24" fill="none">
+                      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+                    </svg>
+                    正在进入系统舱...
+                  </span>
+                ) : (
+                  <span className="flex items-center gap-2">
+                    立即开启观影之旅 <ArrowRight size={16} />
+                  </span>
+                )}
+              </button>
+            </motion.div>
+
+            {/* Quick Helper Credentials */}
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              transition={{ delay: 0.55 }}
+              className="flex items-center justify-center gap-1.5 rounded-xl bg-gray-50 border border-gray-100 px-4 py-2.5 text-xs text-gray-500"
+            >
+              <ShieldCheck size={14} className="text-brand-500" />
+              <span>默认访问凭证: </span>
+              <code className="rounded bg-gray-200/50 px-1.5 py-0.5 font-mono text-[#111827] font-semibold">
+                admin / admin123
+              </code>
+            </motion.div>
+          </form>
+        </div>
+      </motion.div>
+
+      {/* Footer */}
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ delay: 0.6 }}
+        className="relative z-10 mt-10 text-gray-400 hover:text-gray-600 transition-colors"
+      >
+        <AppFooter />
+      </motion.div>
     </div>
   )
-}
+}
\ No newline at end of file
diff --git a/web/src/pages/MediaDetailPage.tsx b/web/src/pages/MediaDetailPage.tsx
index 4dcf359..71ad7b5 100644
--- a/web/src/pages/MediaDetailPage.tsx
+++ b/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>
-  )
-}
+}
\ No newline at end of file
diff --git a/web/src/pages/NotifyChannelsPage.tsx b/web/src/pages/NotifyChannelsPage.tsx
index 3a5b62a..81721ee 100644
--- a/web/src/pages/NotifyChannelsPage.tsx
+++ b/web/src/pages/NotifyChannelsPage.tsx
@@ -62,8 +62,8 @@ export function NotifyChannelsPage() {
             <Bell size={20} />
           </div>
           <div>
-            <h1 className="font-display text-3xl font-bold text-white">通知渠道</h1>
-            <p className="text-sm text-slate-400">
+            <h1 className="font-display text-3xl font-bold text-ink-600">通知渠道</h1>
+            <p className="text-sm text-ink-50">
               配置 Telegram / Bark / 企业微信 / Webhook 多通道推送
             </p>
           </div>
@@ -80,13 +80,13 @@ export function NotifyChannelsPage() {
       </div>
 
       {loading && (
-        <div className="flex justify-center py-12 text-slate-400">
+        <div className="flex justify-center py-12 text-ink-50">
           <Loader2 className="animate-spin" />
         </div>
       )}
 
       {!loading && channels.length === 0 && (
-        <div className="glass-panel py-12 text-center text-slate-400">暂无通知渠道</div>
+        <div className="glass-panel py-12 text-center text-ink-50">暂无通知渠道</div>
       )}
 
       {!loading && channels.length > 0 && (
@@ -144,26 +144,26 @@ function ChannelCard({
     <div className="glass-panel flex items-center justify-between gap-3">
       <div className="min-w-0">
         <div className="flex items-center gap-2">
-          <span className="font-medium text-white">{channel.name}</span>
-          <span className="rounded border border-white/10 bg-white/5 px-2 py-0.5 text-xs text-slate-400">
+          <span className="font-medium text-ink-600">{channel.name}</span>
+          <span className="rounded border border-white/10 bg-white/5 px-2 py-0.5 text-xs text-ink-50">
             {TYPE_LABELS[channel.channel_type] ?? channel.channel_type}
           </span>
           {!channel.enabled && (
-            <span className="rounded bg-slate-500/30 px-2 py-0.5 text-xs text-slate-300">已禁用</span>
+            <span className="rounded bg-sand-500/30 px-2 py-0.5 text-xs text-ink-100">已禁用</span>
           )}
         </div>
-        <div className="mt-1 truncate text-xs text-slate-400">{summary}</div>
+        <div className="mt-1 truncate text-xs text-ink-50">{summary}</div>
       </div>
       <div className="flex shrink-0 gap-2">
         <button
           onClick={onTest}
-          className="rounded border border-white/10 px-2 py-1 text-xs text-slate-300 hover:border-primary-400/40 hover:text-primary-400"
+          className="rounded border border-white/10 px-2 py-1 text-xs text-ink-100 hover:border-primary-400/40 hover:text-brand-500"
         >
           <Send size={12} className="inline" /> 测试
         </button>
         <button
           onClick={onEdit}
-          className="rounded border border-white/10 px-2 py-1 text-xs text-slate-300 hover:border-primary-400/40 hover:text-primary-400"
+          className="rounded border border-white/10 px-2 py-1 text-xs text-ink-100 hover:border-primary-400/40 hover:text-brand-500"
         >
           <Pencil size={12} className="inline" /> 编辑
         </button>
@@ -262,7 +262,7 @@ function ChannelFormModal({
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4 backdrop-blur-sm">
       <div className="glass-panel w-full max-w-lg max-h-[90vh] overflow-y-auto">
-        <h2 className="mb-4 font-display text-xl font-semibold text-white">
+        <h2 className="mb-4 font-display text-xl font-semibold text-ink-600">
           {editing ? '编辑通知渠道' : '添加通知渠道'}
         </h2>
         <form onSubmit={onSubmit} className="space-y-4">
@@ -460,7 +460,7 @@ function ChannelFormModal({
             </>
           )}
 
-          <label className="flex cursor-pointer items-center gap-2 text-sm text-slate-300">
+          <label className="flex cursor-pointer items-center gap-2 text-sm text-ink-100">
             <input
               type="checkbox"
               className="h-4 w-4 accent-primary-400"
@@ -474,7 +474,7 @@ function ChannelFormModal({
             <button
               type="button"
               onClick={onClose}
-              className="rounded border border-white/10 px-4 py-2 text-sm text-slate-300 hover:bg-white/5"
+              className="rounded border border-white/10 px-4 py-2 text-sm text-ink-100 hover:bg-white/5"
             >
               取消
             </button>
@@ -491,7 +491,7 @@ function ChannelFormModal({
 function Field({ label, children }: { label: string; children: React.ReactNode }) {
   return (
     <label className="block">
-      <span className="mb-1 block text-sm text-slate-300">{label}</span>
+      <span className="mb-1 block text-sm text-ink-100">{label}</span>
       {children}
     </label>
   )
diff --git a/web/src/pages/PlayerPage.tsx b/web/src/pages/PlayerPage.tsx
index 59d8da0..5942097 100644
--- a/web/src/pages/PlayerPage.tsx
+++ b/web/src/pages/PlayerPage.tsx
@@ -130,7 +130,7 @@ export function PlayerPage() {
     <div className="-m-6 flex min-h-screen flex-col bg-black md:-m-8">
       <button
         onClick={() => navigate(-1)}
-        className="absolute left-4 top-4 z-10 flex items-center gap-2 rounded-full bg-black/60 px-3 py-1.5 text-sm text-white backdrop-blur transition hover:bg-black/80"
+        className="absolute left-4 top-4 z-10 flex items-center gap-2 rounded-full bg-black/60 px-3 py-1.5 text-sm text-ink-600 backdrop-blur transition hover:bg-black/80"
       >
         <ArrowLeft size={16} /> 返回
       </button>
@@ -142,7 +142,7 @@ export function PlayerPage() {
           params.set('mode', next)
           setParams(params, { replace: true })
         }}
-        className="absolute right-4 top-4 z-10 flex items-center gap-2 rounded-full bg-black/60 px-3 py-1.5 text-sm text-white backdrop-blur transition hover:bg-black/80"
+        className="absolute right-4 top-4 z-10 flex items-center gap-2 rounded-full bg-black/60 px-3 py-1.5 text-sm text-ink-600 backdrop-blur transition hover:bg-black/80"
         title="切换播放模式"
       >
         {mode === 'hls' ? (
@@ -189,7 +189,7 @@ export function PlayerPage() {
             ))}
           </video>
         ) : (
-          <p className="text-slate-500">加载中…</p>
+          <p className="text-sand-500">加载中…</p>
         )}
       </div>
     </div>
diff --git a/web/src/pages/PlaylistDetailPage.tsx b/web/src/pages/PlaylistDetailPage.tsx
index b5d5e40..0646e63 100644
--- a/web/src/pages/PlaylistDetailPage.tsx
+++ b/web/src/pages/PlaylistDetailPage.tsx
@@ -18,18 +18,18 @@ export function PlaylistDetailPage() {
   }, [id])
 
   if (!detail) {
-    return <p className="text-slate-500">加载中…</p>
+    return <p className="text-sand-500">加载中…</p>
   }
 
   return (
     <div className="space-y-6">
       <header>
-        <h1 className="font-display text-3xl font-bold text-white">{detail.playlist.name}</h1>
-        <p className="text-sm text-slate-400">{detail.items.length} 部影片</p>
+        <h1 className="font-display text-3xl font-bold text-ink-600">{detail.playlist.name}</h1>
+        <p className="text-sm text-ink-50">{detail.items.length} 部影片</p>
       </header>
 
       {detail.items.length === 0 && (
-        <p className="text-slate-400">暂无内容,前往媒体详情页通过「加入播放列表」添加。</p>
+        <p className="text-ink-50">暂无内容,前往媒体详情页通过「加入播放列表」添加。</p>
       )}
 
       <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6">
@@ -37,7 +37,7 @@ export function PlaylistDetailPage() {
           <div key={m.id} className="relative">
             <MediaCard media={m} />
             <button
-              className="absolute right-2 top-2 rounded-full bg-black/70 p-1 text-white transition hover:bg-red-600"
+              className="absolute right-2 top-2 rounded-full bg-black/70 p-1 text-ink-600 transition hover:bg-red-600"
               onClick={async () => {
                 await playbackAPI.removeFromPlaylist(detail.playlist.id, m.id)
                 toast.success('已移除')
diff --git a/web/src/pages/PlaylistsPage.tsx b/web/src/pages/PlaylistsPage.tsx
index 030e93c..694a474 100644
--- a/web/src/pages/PlaylistsPage.tsx
+++ b/web/src/pages/PlaylistsPage.tsx
@@ -37,7 +37,7 @@ export function PlaylistsPage() {
 
   return (
     <div className="space-y-6">
-      <h1 className="font-display text-3xl font-bold text-white">播放列表</h1>
+      <h1 className="font-display text-3xl font-bold text-ink-600">播放列表</h1>
 
       <form onSubmit={onCreate} className="glass-panel grid gap-3 md:grid-cols-[1fr_auto]">
         <input
@@ -52,8 +52,8 @@ export function PlaylistsPage() {
         </button>
       </form>
 
-      {loading && <p className="text-slate-500">加载中…</p>}
-      {!loading && items.length === 0 && <p className="text-slate-400">还没有任何播放列表。</p>}
+      {loading && <p className="text-sand-500">加载中…</p>}
+      {!loading && items.length === 0 && <p className="text-ink-50">还没有任何播放列表。</p>}
 
       <div className="grid gap-3 md:grid-cols-2 lg:grid-cols-3">
         {items.map((p) => (
@@ -63,11 +63,11 @@ export function PlaylistsPage() {
           >
             <Link
               to={`/playlist/${p.id}`}
-              className="font-medium text-white transition hover:text-primary-400"
+              className="font-medium text-ink-600 transition hover:text-brand-500"
             >
               {p.name}
               {p.is_public && (
-                <span className="ml-2 rounded border border-primary-400/40 px-1.5 py-0.5 text-xs text-primary-400">
+                <span className="ml-2 rounded border border-primary-400/40 px-1.5 py-0.5 text-xs text-brand-500">
                   public
                 </span>
               )}
diff --git a/web/src/pages/PosterWallPage.tsx b/web/src/pages/PosterWallPage.tsx
index e6e09be..e159a88 100644
--- a/web/src/pages/PosterWallPage.tsx
+++ b/web/src/pages/PosterWallPage.tsx
@@ -26,25 +26,25 @@ export function PosterWallPage() {
   return (
     <div className="space-y-6">
       <header className="flex items-center gap-3">
-        <GalleryHorizontalEnd className="h-6 w-6 text-primary-400" />
+        <GalleryHorizontalEnd className="h-6 w-6 text-brand-500" />
         <div>
-          <h1 className="font-display text-3xl font-bold text-white">海报墙</h1>
-          <p className="text-sm text-slate-400">
+          <h1 className="font-display text-3xl font-bold text-ink-600">海报墙</h1>
+          <p className="text-sm text-ink-50">
             按剧集聚合 · 共 {cards.length} 个条目
           </p>
         </div>
       </header>
 
-      {loading && <p className="text-slate-500">加载中…</p>}
+      {loading && <p className="text-sand-500">加载中…</p>}
       {!loading && cards.length === 0 && (
-        <p className="text-slate-400">暂无媒体。请先添加媒体库并扫描。</p>
+        <p className="text-ink-50">暂无媒体。请先添加媒体库并扫描。</p>
       )}
       <div className="grid grid-cols-3 gap-3 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8 xl:grid-cols-10">
         {cards.map((s) => (
           <div key={s.rep.id} className="relative">
             <MediaCard media={s.rep} />
             {s.count > 1 && (
-              <span className="pointer-events-none absolute right-1.5 top-1.5 inline-flex items-center gap-0.5 rounded-md bg-black/60 px-1.5 py-0.5 text-[10px] font-medium text-white backdrop-blur-sm">
+              <span className="pointer-events-none absolute right-1.5 top-1.5 inline-flex items-center gap-0.5 rounded-md bg-black/60 px-1.5 py-0.5 text-[10px] font-medium text-ink-600 backdrop-blur-sm">
                 <Layers size={10} />
                 {s.count}
               </span>
diff --git a/web/src/pages/ProfileManagementPage.tsx b/web/src/pages/ProfileManagementPage.tsx
index 0d6ef7b..3cd4905 100644
--- a/web/src/pages/ProfileManagementPage.tsx
+++ b/web/src/pages/ProfileManagementPage.tsx
@@ -72,8 +72,8 @@ export function ProfileManagementPage() {
             <UserCog size={20} />
           </div>
           <div>
-            <h1 className="font-display text-3xl font-bold text-white">观影 Profile</h1>
-            <p className="text-sm text-slate-400">
+            <h1 className="font-display text-3xl font-bold text-ink-600">观影 Profile</h1>
+            <p className="text-sm text-ink-50">
               为不同场景(儿童 / 影院 / 成人)定义独立的内容分级和媒体库访问规则
             </p>
           </div>
@@ -84,7 +84,7 @@ export function ProfileManagementPage() {
       </div>
 
       {loading && (
-        <div className="flex justify-center py-12 text-slate-400">
+        <div className="flex justify-center py-12 text-ink-50">
           <Loader2 className="animate-spin" />
         </div>
       )}
@@ -92,8 +92,8 @@ export function ProfileManagementPage() {
       {!loading && profiles.length === 0 && (
         <div className="glass-panel py-12 text-center">
           <div className="mb-2 text-4xl">👤</div>
-          <p className="font-medium text-white">暂无 Profile</p>
-          <p className="text-sm text-slate-400">点击右上角"创建 Profile"开始</p>
+          <p className="font-medium text-ink-600">暂无 Profile</p>
+          <p className="text-sm text-ink-50">点击右上角"创建 Profile"开始</p>
         </div>
       )}
 
@@ -149,7 +149,7 @@ function ProfileCard({
     <div className="glass-panel flex items-start justify-between gap-4">
       <div className="flex min-w-0 items-start gap-3">
         <div
-          className="flex h-12 w-12 shrink-0 items-center justify-center rounded-full text-lg font-bold text-white"
+          className="flex h-12 w-12 shrink-0 items-center justify-center rounded-full text-lg font-bold text-ink-600"
           style={{
             background: `hsl(${(profile.name.charCodeAt(0) * 47) % 360}, 60%, 35%)`,
           }}
@@ -158,9 +158,9 @@ function ProfileCard({
         </div>
         <div className="min-w-0 space-y-1">
           <div className="flex flex-wrap items-center gap-2">
-            <span className="font-semibold text-white">{profile.name}</span>
+            <span className="font-semibold text-ink-600">{profile.name}</span>
             {profile.is_default && (
-              <span className="rounded bg-primary-400/20 px-2 py-0.5 text-xs text-primary-400">
+              <span className="rounded bg-primary-400/20 px-2 py-0.5 text-xs text-brand-500">
                 默认
               </span>
             )}
@@ -175,12 +175,12 @@ function ProfileCard({
               </span>
             )}
           </div>
-          <div className="flex flex-wrap gap-x-4 gap-y-1 text-xs text-slate-400">
+          <div className="flex flex-wrap gap-x-4 gap-y-1 text-xs text-ink-50">
             {profile.content_rating_limit && <span>分级: {profile.content_rating_limit}</span>}
             <span>媒体库: {libNames}</span>
             <span>用户: {profile.user_id.slice(0, 8)}…</span>
           </div>
-          <div className="text-xs text-slate-500">
+          <div className="text-xs text-sand-500">
             观看时长 {Math.round(profile.total_watch_time / 3600)} 小时
             {profile.last_active_at && ` · 最近活跃 ${new Date(profile.last_active_at).toLocaleDateString()}`}
           </div>
@@ -189,7 +189,7 @@ function ProfileCard({
       <div className="flex shrink-0 gap-2">
         <button
           onClick={onEdit}
-          className="rounded border border-white/10 px-2 py-1 text-xs text-slate-300 hover:border-primary-400/40 hover:text-primary-400"
+          className="rounded border border-white/10 px-2 py-1 text-xs text-ink-100 hover:border-primary-400/40 hover:text-brand-500"
         >
           <Pencil size={12} className="inline" /> 编辑
         </button>
@@ -267,7 +267,7 @@ function ProfileFormModal({
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4 backdrop-blur-sm">
       <div className="glass-panel w-full max-w-lg max-h-[90vh] overflow-y-auto">
-        <h2 className="mb-4 font-display text-xl font-semibold text-white">
+        <h2 className="mb-4 font-display text-xl font-semibold text-ink-600">
           {editing ? '编辑 Profile' : '创建 Profile'}
         </h2>
         <form onSubmit={onSubmit} className="space-y-4">
@@ -388,15 +388,15 @@ function ProfileFormModal({
                   className={
                     'rounded-full border px-3 py-1 text-xs ' +
                     (form.allowed_library_ids.includes(l.id)
-                      ? 'border-primary-400/60 bg-primary-400/10 text-primary-400'
-                      : 'border-white/10 text-slate-400 hover:text-white')
+                      ? 'border-primary-400/60 bg-primary-400/10 text-brand-500'
+                      : 'border-white/10 text-ink-50 hover:text-white')
                   }
                 >
                   {l.name}
                 </button>
               ))}
               {libraries.length === 0 && (
-                <span className="text-xs text-slate-500">暂无媒体库</span>
+                <span className="text-xs text-sand-500">暂无媒体库</span>
               )}
             </div>
           </Field>
@@ -405,7 +405,7 @@ function ProfileFormModal({
             <button
               type="button"
               onClick={onClose}
-              className="rounded border border-white/10 px-4 py-2 text-sm text-slate-300 hover:bg-white/5"
+              className="rounded border border-white/10 px-4 py-2 text-sm text-ink-100 hover:bg-white/5"
             >
               取消
             </button>
@@ -423,7 +423,7 @@ function ProfileFormModal({
 function Field({ label, children }: { label: string; children: React.ReactNode }) {
   return (
     <label className="block">
-      <span className="mb-1 block text-sm text-slate-300">{label}</span>
+      <span className="mb-1 block text-sm text-ink-100">{label}</span>
       {children}
     </label>
   )
@@ -443,8 +443,8 @@ function Toggle({
   return (
     <label className="flex cursor-pointer items-center justify-between gap-3 rounded-lg border border-white/5 bg-white/5 px-3 py-2">
       <div>
-        <div className="text-sm text-white">{label}</div>
-        {hint && <div className="text-xs text-slate-400">{hint}</div>}
+        <div className="text-sm text-ink-600">{label}</div>
+        {hint && <div className="text-xs text-ink-50">{hint}</div>}
       </div>
       <input
         type="checkbox"
diff --git a/web/src/pages/ProfilePage.tsx b/web/src/pages/ProfilePage.tsx
index bcd3696..1b97e2f 100644
--- a/web/src/pages/ProfilePage.tsx
+++ b/web/src/pages/ProfilePage.tsx
@@ -43,10 +43,10 @@ export function ProfilePage() {
 
   return (
     <div className="space-y-6">
-      <h1 className="font-display text-3xl font-bold text-white">个人资料</h1>
+      <h1 className="font-display text-3xl font-bold text-ink-600">个人资料</h1>
 
       <form onSubmit={onProfile} className="glass-panel space-y-4">
-        <h2 className="font-display text-lg font-semibold text-white">基本信息</h2>
+        <h2 className="font-display text-lg font-semibold text-ink-600">基本信息</h2>
         <Field label="用户名">
           <input className="input-base" value={user?.username ?? ''} disabled />
         </Field>
@@ -74,7 +74,7 @@ export function ProfilePage() {
       </form>
 
       <form onSubmit={onPwd} className="glass-panel space-y-4">
-        <h2 className="font-display text-lg font-semibold text-white">修改密码</h2>
+        <h2 className="font-display text-lg font-semibold text-ink-600">修改密码</h2>
         <Field label="当前密码">
           <input
             required
@@ -107,7 +107,7 @@ export function ProfilePage() {
 function Field({ label, children }: { label: string; children: React.ReactNode }) {
   return (
     <label className="block">
-      <span className="mb-1 block text-sm text-slate-300">{label}</span>
+      <span className="mb-1 block text-sm text-ink-100">{label}</span>
       {children}
     </label>
   )
diff --git a/web/src/pages/RecycleBinPage.tsx b/web/src/pages/RecycleBinPage.tsx
index 9e8d5d5..7ebdf0e 100644
--- a/web/src/pages/RecycleBinPage.tsx
+++ b/web/src/pages/RecycleBinPage.tsx
@@ -21,18 +21,18 @@ export function RecycleBinPage() {
 
   return (
     <div className="space-y-6">
-      <h1 className="font-display text-3xl font-bold text-white">回收站</h1>
-      <p className="text-sm text-slate-400">
+      <h1 className="font-display text-3xl font-bold text-ink-600">回收站</h1>
+      <p className="text-sm text-ink-50">
         软删除的媒体保留在数据库中,可以恢复。彻底删除不会移除磁盘上的文件,只会从数据库清除条目。
       </p>
 
-      {loading && <p className="text-slate-500">加载中…</p>}
-      {!loading && items.length === 0 && <p className="text-slate-400">回收站为空。</p>}
+      {loading && <p className="text-sand-500">加载中…</p>}
+      {!loading && items.length === 0 && <p className="text-ink-50">回收站为空。</p>}
 
       {items.length > 0 && (
         <div className="glass-panel">
           <table className="w-full text-left text-sm">
-            <thead className="text-xs uppercase tracking-wider text-slate-500">
+            <thead className="text-xs uppercase tracking-wider text-sand-500">
               <tr>
                 <th className="py-2">标题</th>
                 <th>路径</th>
@@ -42,13 +42,13 @@ export function RecycleBinPage() {
             <tbody>
               {items.map((m) => (
                 <tr key={m.id} className="border-t border-white/5">
-                  <td className="py-2 text-white">{m.title}</td>
-                  <td className="max-w-md truncate text-slate-400" title={m.path}>
+                  <td className="py-2 text-ink-600">{m.title}</td>
+                  <td className="max-w-md truncate text-ink-50" title={m.path}>
                     {m.path}
                   </td>
                   <td className="space-x-2 py-2 text-right">
                     <button
-                      className="rounded border border-primary-400/40 px-2 py-1 text-xs text-primary-400 hover:bg-primary-400/10"
+                      className="rounded border border-primary-400/40 px-2 py-1 text-xs text-brand-500 hover:bg-primary-400/10"
                       onClick={async () => {
                         await recycleAPI.restore(m.id)
                         toast.success('已恢复')
diff --git a/web/src/pages/SchedulerPage.tsx b/web/src/pages/SchedulerPage.tsx
index ecef77c..796f9f8 100644
--- a/web/src/pages/SchedulerPage.tsx
+++ b/web/src/pages/SchedulerPage.tsx
@@ -34,10 +34,10 @@ export function SchedulerPage() {
   return (
     <div className="space-y-6">
       <header className="flex items-center gap-3">
-        <Clock className="h-6 w-6 text-primary-400" />
+        <Clock className="h-6 w-6 text-brand-500" />
         <div>
-          <h1 className="font-display text-3xl font-bold text-white">定时任务</h1>
-          <p className="text-sm text-slate-400">
+          <h1 className="font-display text-3xl font-bold text-ink-600">定时任务</h1>
+          <p className="text-sm text-ink-50">
             后端周期性任务(媒体库扫描、转码缓存清理、回收站自动清理),每 5 秒刷新状态。
           </p>
         </div>
@@ -45,7 +45,7 @@ export function SchedulerPage() {
 
       <div className="glass-panel">
         <table className="w-full text-left text-sm">
-          <thead className="text-xs uppercase tracking-wider text-slate-500">
+          <thead className="text-xs uppercase tracking-wider text-sand-500">
             <tr>
               <th className="py-2">任务</th>
               <th>间隔</th>
@@ -57,9 +57,9 @@ export function SchedulerPage() {
           <tbody>
             {jobs.map((j) => (
               <tr key={j.name} className="border-t border-white/5">
-                <td className="py-2 font-mono text-white">{j.name}</td>
-                <td className="text-slate-300">{j.interval}</td>
-                <td className="text-slate-400">
+                <td className="py-2 font-mono text-ink-600">{j.name}</td>
+                <td className="text-ink-100">{j.interval}</td>
+                <td className="text-ink-50">
                   {j.last_run && new Date(j.last_run).getFullYear() > 2000
                     ? new Date(j.last_run).toLocaleString()
                     : '尚未运行'}
@@ -69,7 +69,7 @@ export function SchedulerPage() {
                   <button
                     onClick={() => runNow(j.name)}
                     disabled={running === j.name}
-                    className="rounded border border-primary-400/40 px-2 py-1 text-xs text-primary-400 hover:bg-primary-400/10"
+                    className="rounded border border-primary-400/40 px-2 py-1 text-xs text-brand-500 hover:bg-primary-400/10"
                   >
                     <Play size={12} className="inline" /> 立即运行
                   </button>
diff --git a/web/src/pages/SearchPage.tsx b/web/src/pages/SearchPage.tsx
index 6ab09ce..6857c51 100644
--- a/web/src/pages/SearchPage.tsx
+++ b/web/src/pages/SearchPage.tsx
@@ -84,7 +84,7 @@ export function SearchPage() {
   return (
     <div className="space-y-6">
       <header className="flex items-center justify-between">
-        <h1 className="font-display text-3xl font-bold text-white">搜索</h1>
+        <h1 className="font-display text-3xl font-bold text-ink-600">搜索</h1>
         <button
           disabled={!aiAvailable}
           className={
@@ -122,14 +122,14 @@ export function SearchPage() {
       )}
 
       {intent && (
-        <div className="glass-panel !p-3 text-xs text-slate-300">
+        <div className="glass-panel !p-3 text-xs text-ink-100">
           AI 解析:
-          <span className="ml-2 font-mono text-primary-400">{JSON.stringify(intent)}</span>
+          <span className="ml-2 font-mono text-brand-500">{JSON.stringify(intent)}</span>
         </div>
       )}
 
       {loading && (
-        <div className="flex items-center gap-2 py-8 text-slate-400">
+        <div className="flex items-center gap-2 py-8 text-ink-50">
           <span className="inline-block h-4 w-4 animate-spin rounded-full border-2 border-primary-400 border-t-transparent" />
           搜索中…
         </div>
@@ -141,8 +141,8 @@ export function SearchPage() {
 
       {showIdle && (
         <div className="glass-panel flex flex-col items-center gap-2 p-10 text-center">
-          <p className="text-lg text-slate-300">输入关键词开始搜索</p>
-          <p className="text-sm text-slate-500">
+          <p className="text-lg text-ink-100">输入关键词开始搜索</p>
+          <p className="text-sm text-sand-500">
             支持电影、电视剧、动漫等媒体内容的快速搜索
           </p>
         </div>
@@ -150,8 +150,8 @@ export function SearchPage() {
 
       {showEmpty && (
         <div className="glass-panel flex flex-col items-center gap-2 p-10 text-center">
-          <p className="text-lg text-slate-300">未找到匹配的媒体</p>
-          <p className="text-sm text-slate-500">尝试其他关键词，或者添加媒体库后执行扫描</p>
+          <p className="text-lg text-ink-100">未找到匹配的媒体</p>
+          <p className="text-sm text-sand-500">尝试其他关键词，或者添加媒体库后执行扫描</p>
         </div>
       )}
 
diff --git a/web/src/pages/SettingsPage.tsx b/web/src/pages/SettingsPage.tsx
index 97a8116..c189efd 100644
--- a/web/src/pages/SettingsPage.tsx
+++ b/web/src/pages/SettingsPage.tsx
@@ -239,12 +239,12 @@ export function SettingsPage() {
   return (
     <div className="space-y-6">
       <div className="flex items-center gap-3">
-        <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-slate-400/10 text-slate-300">
+        <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-sand-300/40 text-ink-100">
           <SettingsIcon size={20} />
         </div>
         <div>
-          <h1 className="font-display text-3xl font-bold text-white">系统设置</h1>
-          <p className="text-sm text-slate-400">
+          <h1 className="font-display text-3xl font-bold text-ink-600">系统设置</h1>
+          <p className="text-sm text-ink-50">
             按分组编辑转码 / 整理 / 刮削 / 下载器等关键配置
           </p>
         </div>
@@ -258,8 +258,8 @@ export function SettingsPage() {
             className={
               'border-b-2 px-4 py-2 text-sm whitespace-nowrap transition ' +
               (activeGroup === g.key
-                ? 'border-primary-400 text-primary-400'
-                : 'border-transparent text-slate-400 hover:text-white')
+                ? 'border-primary-400 text-brand-500'
+                : 'border-transparent text-ink-50 hover:text-white')
             }
           >
             {g.label}
@@ -268,14 +268,14 @@ export function SettingsPage() {
       </div>
 
       {loading && (
-        <div className="flex justify-center py-12 text-slate-400">
+        <div className="flex justify-center py-12 text-ink-50">
           <Loader2 className="animate-spin" />
         </div>
       )}
 
       {!loading && (
         <form onSubmit={onSave} className="glass-panel space-y-4">
-          {group.description && <p className="text-xs text-slate-500">{group.description}</p>}
+          {group.description && <p className="text-xs text-sand-500">{group.description}</p>}
           {group.items.map((it) => (
             <SettingRow
               key={it.key}
@@ -285,7 +285,7 @@ export function SettingsPage() {
             />
           ))}
           <div className="flex items-center justify-between pt-2">
-            <span className="text-xs text-slate-500">
+            <span className="text-xs text-sand-500">
               {dirty.size > 0 ? `有 ${dirty.size} 项未保存` : '所有更改已保存'}
             </span>
             <button
@@ -303,12 +303,12 @@ export function SettingsPage() {
       {/* 整理 tab 时显示各媒体库默认路径 */}
       {!loading && activeGroup === 'organize' && libraries.length > 0 && (
         <div className="glass-panel">
-          <div className="mb-3 flex items-center gap-2 text-sm text-slate-300">
-            <FolderOpen size={16} className="text-primary-400" />
+          <div className="mb-3 flex items-center gap-2 text-sm text-ink-100">
+            <FolderOpen size={16} className="text-brand-500" />
             <span>默认整理路径参考（未设目标目录时按媒体库归类）</span>
           </div>
           <table className="w-full text-left text-sm">
-            <thead className="text-xs uppercase tracking-wider text-slate-500">
+            <thead className="text-xs uppercase tracking-wider text-sand-500">
               <tr>
                 <th className="py-2">媒体库</th>
                 <th>类型</th>
@@ -319,12 +319,12 @@ export function SettingsPage() {
             <tbody>
               {libraries.map((lib) => (
                 <tr key={lib.id} className="border-t border-white/5">
-                  <td className="py-2 font-medium text-white">{lib.name}</td>
-                  <td className="text-slate-400">
+                  <td className="py-2 font-medium text-ink-600">{lib.name}</td>
+                  <td className="text-ink-50">
                     {lib.type === 'movie' ? '电影' : lib.type === 'tv' ? '电视剧' : lib.type === 'anime' ? '动漫' : '音乐'}
                   </td>
-                  <td className="font-mono text-xs text-slate-400">{lib.path}</td>
-                  <td className="font-mono text-[11px] text-slate-500">
+                  <td className="font-mono text-xs text-ink-50">{lib.path}</td>
+                  <td className="font-mono text-[11px] text-sand-500">
                     {lib.type === 'movie'
                       ? `${lib.path}/片名 (2024)/片名 (2024).mkv`
                       : lib.type === 'tv' || lib.type === 'anime'
@@ -352,10 +352,10 @@ function SettingRow({
 }) {
   return (
     <div className="grid items-start gap-2 md:grid-cols-[280px_1fr]">
-      <label className="text-sm text-slate-300">
+      <label className="text-sm text-ink-100">
         <div className="font-medium">{def.label}</div>
-        {def.hint && <div className="mt-0.5 text-xs text-slate-500">{def.hint}</div>}
-        <div className="mt-0.5 font-mono text-[10px] text-slate-600">{def.key}</div>
+        {def.hint && <div className="mt-0.5 text-xs text-sand-500">{def.hint}</div>}
+        <div className="mt-0.5 font-mono text-[10px] text-sand-400">{def.key}</div>
       </label>
       <div>
         {def.type === 'text' && (
@@ -402,7 +402,7 @@ function SettingRow({
               checked={value === 'true' || value === '1' || value === 'on'}
               onChange={(e) => onChange(e.target.checked ? 'true' : 'false')}
             />
-            <span className="text-sm text-slate-300">{value === 'true' ? '已启用' : '已关闭'}</span>
+            <span className="text-sm text-ink-100">{value === 'true' ? '已启用' : '已关闭'}</span>
           </label>
         )}
       </div>
diff --git a/web/src/pages/SiteSearchPage.tsx b/web/src/pages/SiteSearchPage.tsx
index 8bc0e76..6e94456 100644
--- a/web/src/pages/SiteSearchPage.tsx
+++ b/web/src/pages/SiteSearchPage.tsx
@@ -66,10 +66,10 @@ export function SiteSearchPage() {
   return (
     <div className="space-y-6">
       <header className="flex items-center gap-3">
-        <Search className="h-6 w-6 text-primary-400" />
+        <Search className="h-6 w-6 text-brand-500" />
         <div>
-          <h1 className="font-display text-3xl font-bold text-white">站点搜索</h1>
-          <p className="text-sm text-slate-400">
+          <h1 className="font-display text-3xl font-bold text-ink-600">站点搜索</h1>
+          <p className="text-sm text-ink-50">
             跨站搜索所有已启用的 PT/BT 站点,结果按做种数排序。
           </p>
         </div>
@@ -88,11 +88,11 @@ export function SiteSearchPage() {
         </button>
       </form>
 
-      {loading && <p className="text-slate-500">正在查询所有站点…</p>}
+      {loading && <p className="text-sand-500">正在查询所有站点…</p>}
 
       {!loading && searched && results.length === 0 && (
         <div className="glass-panel">
-          <p className="text-slate-300">
+          <p className="text-ink-100">
             未找到结果。请确认已在「站点管理」中添加并启用了至少一个站点,且 Cookie / API Key 有效。
           </p>
         </div>
@@ -101,7 +101,7 @@ export function SiteSearchPage() {
       {results.length > 0 && (
         <div className="glass-panel overflow-x-auto">
           <table className="w-full text-left text-sm">
-            <thead className="text-xs uppercase tracking-wider text-slate-500">
+            <thead className="text-xs uppercase tracking-wider text-sand-500">
               <tr>
                 <th className="py-2">站点</th>
                 <th>标题</th>
@@ -115,13 +115,13 @@ export function SiteSearchPage() {
             <tbody>
               {results.map((item, idx) => (
                 <tr key={idx} className="border-t border-white/5 align-top">
-                  <td className="py-2 text-primary-400">{item.site_name}</td>
+                  <td className="py-2 text-brand-500">{item.site_name}</td>
                   <td className="max-w-md py-2">
                     <a
                       href={item.torrent_url}
                       target="_blank"
                       rel="noopener noreferrer"
-                      className="text-white transition hover:text-primary-400"
+                      className="text-white transition hover:text-brand-500"
                       title={item.title}
                     >
                       {item.title.length > 80
@@ -129,7 +129,7 @@ export function SiteSearchPage() {
                         : item.title}
                     </a>
                   </td>
-                  <td className="whitespace-nowrap text-slate-300">
+                  <td className="whitespace-nowrap text-ink-100">
                     {fmtBytes(item.size)}
                   </td>
                   <td className="text-emerald-400">{item.seeders || '—'}</td>
@@ -144,7 +144,7 @@ export function SiteSearchPage() {
                   <td className="py-2 text-right">
                     <button
                       onClick={() => downloadTorrent(item)}
-                      className="rounded border border-primary-400/40 px-2 py-1 text-xs text-primary-400 hover:bg-primary-400/10"
+                      className="rounded border border-primary-400/40 px-2 py-1 text-xs text-brand-500 hover:bg-primary-400/10"
                       title="加入下载"
                     >
                       <Download size={12} className="inline" />
diff --git a/web/src/pages/SitesPage.tsx b/web/src/pages/SitesPage.tsx
index 671f857..2d6eaa8 100644
--- a/web/src/pages/SitesPage.tsx
+++ b/web/src/pages/SitesPage.tsx
@@ -30,7 +30,7 @@ const SITE_TYPE_COLORS: Record<string, string> = {
   unit3d: 'bg-orange-500/15 text-orange-400',
   mteam: 'bg-green-500/15 text-green-400',
   discuz: 'bg-yellow-500/15 text-yellow-400',
-  custom_rss: 'bg-slate-500/15 text-slate-400',
+  custom_rss: 'bg-sand-500/15 text-ink-50',
 }
 
 const AUTH_TYPE_LABELS: Record<string, string> = {
@@ -237,7 +237,7 @@ export function SitesPage() {
     <div className="space-y-6">
       {/* 页头 */}
       <div className="flex items-center justify-between">
-        <h1 className="font-display text-3xl font-bold text-white">站点管理</h1>
+        <h1 className="font-display text-3xl font-bold text-ink-600">站点管理</h1>
         <button onClick={openCreate} className="neon-button flex items-center gap-2">
           <Plus size={16} />
           添加站点
@@ -251,12 +251,12 @@ export function SitesPage() {
             {/* 头部 */}
             <div className="flex items-start justify-between">
               <div className="flex items-center gap-2 min-w-0">
-                <div className={`w-8 h-8 rounded-lg flex items-center justify-center text-xs font-bold shrink-0 ${SITE_TYPE_COLORS[site.type] || 'bg-slate-500/15 text-slate-400'}`}>
+                <div className={`w-8 h-8 rounded-lg flex items-center justify-center text-xs font-bold shrink-0 ${SITE_TYPE_COLORS[site.type] || 'bg-sand-500/15 text-ink-50'}`}>
                   {SITE_TYPE_ABBR[site.type] || '?'}
                 </div>
                 <div className="min-w-0">
-                  <div className="font-medium text-white truncate">{site.name}</div>
-                  <div className="text-xs text-slate-400 truncate max-w-[160px]">{site.url}</div>
+                  <div className="font-medium text-ink-600 truncate">{site.name}</div>
+                  <div className="text-xs text-ink-50 truncate max-w-[160px]">{site.url}</div>
                 </div>
               </div>
               {/* 状态指示 */}
@@ -268,22 +268,22 @@ export function SitesPage() {
                     <CheckCircle size={14} className="text-green-400" />
                   )
                 ) : (
-                  <HelpCircle size={14} className="text-slate-500" />
+                  <HelpCircle size={14} className="text-sand-500" />
                 )}
-                {!site.enabled && <span className="text-xs text-slate-500 ml-1">已停用</span>}
+                {!site.enabled && <span className="text-xs text-sand-500 ml-1">已停用</span>}
               </div>
             </div>
 
             {/* 标签 */}
             <div className="flex flex-wrap gap-1.5">
-              <span className="text-xs px-1.5 py-0.5 rounded bg-white/5 text-slate-400">
+              <span className="text-xs px-1.5 py-0.5 rounded bg-white/5 text-ink-50">
                 {SITE_TYPE_LABELS[site.type] || site.type}
               </span>
-              <span className="text-xs px-1.5 py-0.5 rounded bg-white/5 text-slate-400">
+              <span className="text-xs px-1.5 py-0.5 rounded bg-white/5 text-ink-50">
                 {AUTH_TYPE_LABELS[site.auth_type] || site.auth_type}
               </span>
               {site.is_default && (
-                <span className="text-xs px-1.5 py-0.5 rounded bg-primary-400/15 text-primary-400">默认</span>
+                <span className="text-xs px-1.5 py-0.5 rounded bg-primary-400/15 text-brand-500">默认</span>
               )}
               {site.use_proxy && (
                 <span className="text-xs px-1.5 py-0.5 rounded bg-blue-500/15 text-blue-400">代理</span>
@@ -297,11 +297,11 @@ export function SitesPage() {
             </div>
 
             {/* 状态与统计（只读） */}
-            <div className="text-xs text-slate-500 space-y-0.5">
+            <div className="text-xs text-sand-500 space-y-0.5">
               <div>状态：
                 <span className={
                   site.login_status === 'ok' ? 'text-green-400' :
-                  site.login_status === 'failed' ? 'text-red-400' : 'text-slate-400'
+                  site.login_status === 'failed' ? 'text-red-400' : 'text-ink-50'
                 }>
                   {site.login_status || 'unknown'}
                 </span>
@@ -319,7 +319,7 @@ export function SitesPage() {
               <button
                 onClick={() => handleTest(site.id)}
                 disabled={testingId === site.id}
-                className="flex-1 rounded border border-white/10 px-2 py-1.5 text-xs text-slate-300 hover:bg-white/5 disabled:opacity-50 flex items-center justify-center gap-1 transition"
+                className="flex-1 rounded border border-white/10 px-2 py-1.5 text-xs text-ink-100 hover:bg-white/5 disabled:opacity-50 flex items-center justify-center gap-1 transition"
               >
                 {testingId === site.id ? (
                   <>
@@ -335,14 +335,14 @@ export function SitesPage() {
               </button>
               <button
                 onClick={() => openEdit(site.id)}
-                className="rounded border border-white/10 p-1.5 text-slate-400 hover:text-white hover:bg-white/5 transition"
+                className="rounded border border-white/10 p-1.5 text-ink-50 hover:text-white hover:bg-white/5 transition"
                 title="编辑"
               >
                 <Edit3 size={14} />
               </button>
               <button
                 onClick={() => handleDelete(site)}
-                className="rounded border border-white/10 p-1.5 text-slate-400 hover:text-red-400 hover:bg-red-400/10 transition"
+                className="rounded border border-white/10 p-1.5 text-ink-50 hover:text-red-400 hover:bg-red-400/10 transition"
                 title="删除"
               >
                 <Trash2 size={14} />
@@ -353,16 +353,16 @@ export function SitesPage() {
 
         {/* 空状态 */}
         {!loading && sites.length === 0 && (
-          <div className="col-span-full py-12 text-center text-slate-400">
-            <Globe size={40} className="mx-auto mb-3 text-slate-600" />
+          <div className="col-span-full py-12 text-center text-ink-50">
+            <Globe size={40} className="mx-auto mb-3 text-sand-400" />
             <p>暂无站点</p>
-            <p className="text-sm mt-1 text-slate-500">点击「添加站点」添加 PT/BT 站点</p>
+            <p className="text-sm mt-1 text-sand-500">点击「添加站点」添加 PT/BT 站点</p>
           </div>
         )}
 
         {/* 加载中 */}
         {loading && (
-          <div className="col-span-full py-12 text-center text-slate-400">
+          <div className="col-span-full py-12 text-center text-ink-50">
             <RefreshCw size={24} className="mx-auto mb-3 animate-spin" />
             <p>加载中...</p>
           </div>
@@ -378,10 +378,10 @@ export function SitesPage() {
           >
             {/* 标题栏 */}
             <div className="flex items-center justify-between">
-              <h2 className="text-lg font-bold text-white">
+              <h2 className="text-lg font-bold text-ink-600">
                 {editingId ? '编辑站点' : '添加站点'}
               </h2>
-              <button onClick={closeModal} className="text-slate-400 hover:text-white transition">
+              <button onClick={closeModal} className="text-ink-50 hover:text-white transition">
                 <X size={20} />
               </button>
             </div>
@@ -389,7 +389,7 @@ export function SitesPage() {
             <form onSubmit={handleSave} className="space-y-4">
               {/* 名称 */}
               <div>
-                <label className="block text-sm text-slate-400 mb-1.5">站点名称 *</label>
+                <label className="block text-sm text-ink-50 mb-1.5">站点名称 *</label>
                 <input
                   required
                   className="input-base w-full"
@@ -401,7 +401,7 @@ export function SitesPage() {
 
               {/* 地址 */}
               <div>
-                <label className="block text-sm text-slate-400 mb-1.5">站点地址 *</label>
+                <label className="block text-sm text-ink-50 mb-1.5">站点地址 *</label>
                 <input
                   required
                   className="input-base w-full"
@@ -409,13 +409,13 @@ export function SitesPage() {
                   value={form.url}
                   onChange={(e) => setForm((f) => ({ ...f, url: e.target.value }))}
                 />
-                <p className="text-xs text-slate-500 mt-1">格式: https://www.example.com/</p>
+                <p className="text-xs text-sand-500 mt-1">格式: https://www.example.com/</p>
               </div>
 
               {/* 站点类型 + 状态 */}
               <div className="grid grid-cols-2 gap-4">
                 <div>
-                  <label className="block text-sm text-slate-400 mb-1.5">站点类型</label>
+                  <label className="block text-sm text-ink-50 mb-1.5">站点类型</label>
                   <select
                     className="input-base w-full"
                     value={form.type}
@@ -430,7 +430,7 @@ export function SitesPage() {
                   </select>
                 </div>
                 <div>
-                  <label className="block text-sm text-slate-400 mb-1.5">状态</label>
+                  <label className="block text-sm text-ink-50 mb-1.5">状态</label>
                   <div className="flex items-center gap-3 h-10">
                     <button
                       type="button"
@@ -441,7 +441,7 @@ export function SitesPage() {
                         className={`pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow transform transition-transform mt-0.5 ${form.enabled ? 'translate-x-4' : 'translate-x-0.5'}`}
                       />
                     </button>
-                    <span className={`text-sm ${form.enabled ? 'text-white' : 'text-slate-500'}`}>
+                    <span className={`text-sm ${form.enabled ? 'text-white' : 'text-sand-500'}`}>
                       {form.enabled ? '启用' : '停用'}
                     </span>
                   </div>
@@ -452,10 +452,10 @@ export function SitesPage() {
               {form.type === 'mteam' && (
                 <div className="p-3 rounded-lg border border-green-500/30 bg-green-500/5">
                   <div className="text-sm font-medium text-green-400 mb-1">馒头站点配置指南</div>
-                  <div className="text-xs text-slate-400 space-y-1">
+                  <div className="text-xs text-ink-50 space-y-1">
                     <div><b>站点地址：</b><code className="text-green-300">https://api2.m-team.cc</code></div>
                     <div><b>认证方式：</b>推荐使用「API Key / Passkey」</div>
-                    <div className="pl-3 text-slate-500">
+                    <div className="pl-3 text-sand-500">
                       1. 登录馒头站 → 控制台 → 实验室 → 存取令牌<br />
                       2. 点击「创建令牌」，复制生成的 Token<br />
                       3. 将 Token 填入下方「令牌」输入框
@@ -466,7 +466,7 @@ export function SitesPage() {
 
               {/* 认证方式 */}
               <div>
-                <label className="block text-sm text-slate-400 mb-2">认证方式</label>
+                <label className="block text-sm text-ink-50 mb-2">认证方式</label>
                 <div className="flex gap-2 mb-3">
                   {[
                     { value: 'cookie', label: 'Cookie' },
@@ -479,8 +479,8 @@ export function SitesPage() {
                       onClick={() => setForm((f) => ({ ...f, auth_type: opt.value }))}
                       className={`px-3 py-1.5 rounded-lg text-xs font-medium border transition ${
                         form.auth_type === opt.value
-                          ? 'bg-primary-500 text-white border-primary-500'
-                          : 'border-white/10 text-slate-400 hover:border-primary-500/50'
+                          ? 'bg-primary-500 text-ink-600 border-primary-500'
+                          : 'border-white/10 text-ink-50 hover:border-primary-500/50'
                       }`}
                     >
                       {opt.label}
@@ -490,7 +490,7 @@ export function SitesPage() {
 
                 {form.auth_type === 'cookie' && (
                   <div>
-                    <label className="block text-xs text-slate-400 mb-1">Cookie</label>
+                    <label className="block text-xs text-ink-50 mb-1">Cookie</label>
                     <textarea
                       rows={3}
                       className="input-base w-full resize-none text-xs font-mono"
@@ -498,13 +498,13 @@ export function SitesPage() {
                       value={form.cookie}
                       onChange={(e) => setForm((f) => ({ ...f, cookie: e.target.value }))}
                     />
-                    <p className="text-xs text-slate-500 mt-1">从浏览器开发者工具的请求头中获取 Cookie 值</p>
+                    <p className="text-xs text-sand-500 mt-1">从浏览器开发者工具的请求头中获取 Cookie 值</p>
                   </div>
                 )}
 
                 {form.auth_type === 'api_key' && (
                   <div>
-                    <label className="block text-xs text-slate-400 mb-1">令牌（API Key / Passkey）</label>
+                    <label className="block text-xs text-ink-50 mb-1">令牌（API Key / Passkey）</label>
                     <input
                       type="password"
                       className="input-base w-full font-mono text-sm"
@@ -512,7 +512,7 @@ export function SitesPage() {
                       value={form.api_key}
                       onChange={(e) => setForm((f) => ({ ...f, api_key: e.target.value }))}
                     />
-                    <p className="text-xs text-slate-500 mt-1">
+                    <p className="text-xs text-sand-500 mt-1">
                       {form.type === 'mteam'
                         ? '馒头：控制台 → 实验室 → 存取令牌'
                         : '站点的访问 API Key'}
@@ -522,7 +522,7 @@ export function SitesPage() {
 
                 {form.auth_type === 'auth_header' && (
                   <div>
-                    <label className="block text-xs text-slate-400 mb-1">请求头（Authorization）</label>
+                    <label className="block text-xs text-ink-50 mb-1">请求头（Authorization）</label>
                     <input
                       className="input-base w-full font-mono text-xs"
                       placeholder="Bearer eyJhbGciOiJIUzI1NiIs..."
@@ -534,14 +534,14 @@ export function SitesPage() {
 
                 {/* RSS 地址（主表单） */}
                 <div className="mt-4">
-                  <label className="block text-xs text-slate-400 mb-1">RSS 地址</label>
+                  <label className="block text-xs text-ink-50 mb-1">RSS 地址</label>
                   <input
                     className="input-base w-full text-xs font-mono"
                     placeholder="https://.../torrents/rss?..."
                     value={form.rss_url}
                     onChange={(e) => setForm((f) => ({ ...f, rss_url: e.target.value }))}
                   />
-                  <p className="text-xs text-slate-500 mt-1">站点 RSS 订阅地址，用于获取最新资源</p>
+                  <p className="text-xs text-sand-500 mt-1">站点 RSS 订阅地址，用于获取最新资源</p>
                 </div>
               </div>
 
@@ -550,7 +550,7 @@ export function SitesPage() {
                 <button
                   type="button"
                   onClick={() => setAdvancedOpen(!advancedOpen)}
-                  className="flex items-center gap-1 text-xs text-slate-400 hover:text-white transition"
+                  className="flex items-center gap-1 text-xs text-ink-50 hover:text-white transition"
                 >
                   {advancedOpen ? '▾' : '▸'} 高级选项
                 </button>
@@ -559,7 +559,7 @@ export function SitesPage() {
                     {/* 新增高级字段 */}
                     <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                       <div>
-                        <label className="block text-xs text-slate-400 mb-1">User-Agent</label>
+                        <label className="block text-xs text-ink-50 mb-1">User-Agent</label>
                         <input
                           className="input-base w-full text-xs"
                           placeholder="自定义 UA，留空使用默认"
@@ -568,7 +568,7 @@ export function SitesPage() {
                         />
                       </div>
                       <div>
-                        <label className="block text-xs text-slate-400 mb-1">请求超时 (秒)</label>
+                        <label className="block text-xs text-ink-50 mb-1">请求超时 (秒)</label>
                         <input
                           type="number"
                           className="input-base w-full"
@@ -579,7 +579,7 @@ export function SitesPage() {
                         />
                       </div>
                       <div>
-                        <label className="block text-xs text-slate-400 mb-1">优先级 (数字越大越优先)</label>
+                        <label className="block text-xs text-ink-50 mb-1">优先级 (数字越大越优先)</label>
                         <input
                           type="number"
                           className="input-base w-full"
@@ -590,7 +590,7 @@ export function SitesPage() {
                         />
                       </div>
                       <div>
-                        <label className="block text-xs text-slate-400 mb-1">关联下载器</label>
+                        <label className="block text-xs text-ink-50 mb-1">关联下载器</label>
                         <input
                           className="input-base w-full text-xs"
                           placeholder="下载器 ID 或名称"
@@ -609,7 +609,7 @@ export function SitesPage() {
                           checked={form.use_proxy}
                           onChange={(e) => setForm((f) => ({ ...f, use_proxy: e.target.checked }))}
                         />
-                        <span className="text-xs text-slate-300">使用代理</span>
+                        <span className="text-xs text-ink-100">使用代理</span>
                       </label>
                       <label className="flex items-center gap-2 cursor-pointer">
                         <input
@@ -618,7 +618,7 @@ export function SitesPage() {
                           checked={form.rate_limit}
                           onChange={(e) => setForm((f) => ({ ...f, rate_limit: e.target.checked }))}
                         />
-                        <span className="text-xs text-slate-300">启用限流</span>
+                        <span className="text-xs text-ink-100">启用限流</span>
                       </label>
                       <label className="flex items-center gap-2 cursor-pointer">
                         <input
@@ -627,13 +627,13 @@ export function SitesPage() {
                           checked={form.browser_emulation}
                           onChange={(e) => setForm((f) => ({ ...f, browser_emulation: e.target.checked }))}
                         />
-                        <span className="text-xs text-slate-300">浏览器模拟</span>
+                        <span className="text-xs text-ink-100">浏览器模拟</span>
                       </label>
                     </div>
 
                     {/* Extra JSON */}
                     <div>
-                      <label className="block text-xs text-slate-400 mb-1">Extra 扩展配置 (JSON)</label>
+                      <label className="block text-xs text-ink-50 mb-1">Extra 扩展配置 (JSON)</label>
                       <textarea
                         rows={3}
                         className="input-base w-full resize-none text-xs font-mono"
@@ -652,7 +652,7 @@ export function SitesPage() {
                           className={`pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow transform transition-transform mt-0.5 ${form.is_default ? 'translate-x-4' : 'translate-x-0.5'}`}
                         />
                       </button>
-                      <span className="text-sm text-slate-400">设为默认站点</span>
+                      <span className="text-sm text-ink-50">设为默认站点</span>
                     </div>
                   </div>
                 )}
@@ -660,7 +660,7 @@ export function SitesPage() {
 
               {/* 按钮 */}
               <div className="flex justify-end gap-2 pt-2">
-                <button type="button" onClick={closeModal} className="rounded border border-white/10 px-4 py-2 text-sm text-slate-300 hover:bg-white/5 transition">
+                <button type="button" onClick={closeModal} className="rounded border border-white/10 px-4 py-2 text-sm text-ink-100 hover:bg-white/5 transition">
                   取消
                 </button>
                 <button
diff --git a/web/src/pages/StatsPage.tsx b/web/src/pages/StatsPage.tsx
index ba9bc7f..9ed27c1 100644
--- a/web/src/pages/StatsPage.tsx
+++ b/web/src/pages/StatsPage.tsx
@@ -43,8 +43,8 @@ export function StatsPage() {
     }
   }, [])
 
-  if (loading) return <p className="text-slate-500">加载中…</p>
-  if (!snap) return <p className="text-slate-500">无法获取统计数据</p>
+  if (loading) return <p className="text-sand-500">加载中…</p>
+  if (!snap) return <p className="text-sand-500">无法获取统计数据</p>
 
   const memPct =
     snap.hardware.memory_total > 0
@@ -58,8 +58,8 @@ export function StatsPage() {
   return (
     <div className="space-y-8">
       <header>
-        <h1 className="font-display text-3xl font-bold text-white">运行状态</h1>
-        <p className="text-sm text-slate-400">
+        <h1 className="font-display text-3xl font-bold text-ink-600">运行状态</h1>
+        <p className="text-sm text-ink-50">
           快照时间:{new Date(snap.generated_at).toLocaleString()}
         </p>
       </header>
@@ -76,7 +76,7 @@ export function StatsPage() {
       </section>
 
       <section className="space-y-3">
-        <h2 className="font-display text-xl font-semibold text-white">系统</h2>
+        <h2 className="font-display text-xl font-semibold text-ink-600">系统</h2>
         <div className="glass-panel grid gap-2 text-sm">
           <Row label="Go 运行时" value={snap.hardware.go_version} />
           <Row label="Goroutines" value={snap.hardware.goroutines.toLocaleString()} />
@@ -93,7 +93,7 @@ export function StatsPage() {
 
       {snap.recently_added.length > 0 && (
         <section className="space-y-3">
-          <h2 className="font-display text-xl font-semibold text-white">最近入库</h2>
+          <h2 className="font-display text-xl font-semibold text-ink-600">最近入库</h2>
           <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6">
             {snap.recently_added.map((m) => (
               <MediaCard key={m.id} media={m} />
@@ -116,12 +116,12 @@ function Tile({
 }) {
   return (
     <div className="glass-panel flex items-center gap-3 !p-4">
-      <div className="rounded-lg border border-primary-400/40 bg-primary-400/10 p-2 text-primary-400">
+      <div className="rounded-lg border border-primary-400/40 bg-primary-400/10 p-2 text-brand-500">
         {icon}
       </div>
       <div>
-        <p className="text-xs uppercase tracking-wider text-slate-500">{label}</p>
-        <p className="font-display text-lg font-semibold text-white">{value}</p>
+        <p className="text-xs uppercase tracking-wider text-sand-500">{label}</p>
+        <p className="font-display text-lg font-semibold text-ink-600">{value}</p>
       </div>
     </div>
   )
@@ -130,8 +130,8 @@ function Tile({
 function Row({ label, value }: { label: string; value: string }) {
   return (
     <div className="flex items-center justify-between border-b border-white/5 pb-1 text-sm last:border-0">
-      <span className="text-slate-400">{label}</span>
-      <span className="font-mono text-white">{value}</span>
+      <span className="text-ink-50">{label}</span>
+      <span className="font-mono text-ink-600">{value}</span>
     </div>
   )
 }
diff --git a/web/src/pages/StorageConfigPage.tsx b/web/src/pages/StorageConfigPage.tsx
index edb2743..ff830d6 100644
--- a/web/src/pages/StorageConfigPage.tsx
+++ b/web/src/pages/StorageConfigPage.tsx
@@ -16,8 +16,8 @@ export function StorageConfigPage() {
           <Cloud size={20} />
         </div>
         <div>
-          <h1 className="font-display text-3xl font-bold text-white">外部存储</h1>
-          <p className="text-sm text-slate-400">
+          <h1 className="font-display text-3xl font-bold text-ink-600">外部存储</h1>
+          <p className="text-sm text-ink-50">
             配置 Alist / S3 / WebDAV 后端,支持密码加密存储 + 在线测试
           </p>
         </div>
@@ -31,8 +31,8 @@ export function StorageConfigPage() {
             className={
               'border-b-2 px-4 py-2 text-sm uppercase ' +
               (active === t
-                ? 'border-primary-400 text-primary-400'
-                : 'border-transparent text-slate-400 hover:text-white')
+                ? 'border-primary-400 text-brand-500'
+                : 'border-transparent text-ink-50 hover:text-white')
             }
           >
             {t}
@@ -135,7 +135,7 @@ function StorageForm({ type }: { type: StorageType }) {
 
   if (loading) {
     return (
-      <div className="flex justify-center py-12 text-slate-400">
+      <div className="flex justify-center py-12 text-ink-50">
         <Loader2 className="animate-spin" />
       </div>
     )
@@ -145,9 +145,9 @@ function StorageForm({ type }: { type: StorageType }) {
     <form onSubmit={onSave} className="glass-panel space-y-4">
       {fields.map((f) => (
         <label key={f.key} className="block">
-          <span className="mb-1 block text-sm text-slate-300">
+          <span className="mb-1 block text-sm text-ink-100">
             {f.label}
-            <span className="ml-2 font-mono text-[10px] text-slate-600">{f.key}</span>
+            <span className="ml-2 font-mono text-[10px] text-sand-400">{f.key}</span>
           </span>
           <input
             type={f.secret ? 'password' : 'text'}
@@ -158,7 +158,7 @@ function StorageForm({ type }: { type: StorageType }) {
           />
         </label>
       ))}
-      <label className="flex items-center gap-2 text-sm text-slate-300">
+      <label className="flex items-center gap-2 text-sm text-ink-100">
         <input
           type="checkbox"
           className="h-4 w-4 accent-primary-400"
@@ -172,7 +172,7 @@ function StorageForm({ type }: { type: StorageType }) {
           type="button"
           onClick={onTest}
           disabled={testing}
-          className="rounded border border-white/10 px-4 py-2 text-sm text-slate-300 hover:bg-white/5"
+          className="rounded border border-white/10 px-4 py-2 text-sm text-ink-100 hover:bg-white/5"
         >
           {testing ? <Loader2 size={14} className="inline animate-spin" /> : <Send size={14} className="inline" />}
           {' '}测试
diff --git a/web/src/pages/StoragePage.tsx b/web/src/pages/StoragePage.tsx
index c513fae..3a7462b 100644
--- a/web/src/pages/StoragePage.tsx
+++ b/web/src/pages/StoragePage.tsx
@@ -33,18 +33,18 @@ export function StoragePage() {
       .finally(() => setLoading(false))
   }, [])
 
-  if (loading) return <p className="text-slate-500">加载中…</p>
-  if (!data) return <p className="text-slate-500">无法获取存储数据</p>
+  if (loading) return <p className="text-sand-500">加载中…</p>
+  if (!data) return <p className="text-sand-500">无法获取存储数据</p>
 
   const totalBytes = data.total_bytes || 1
 
   return (
     <div className="space-y-8">
       <header className="flex items-center gap-3">
-        <HardDrive className="h-6 w-6 text-primary-400" />
+        <HardDrive className="h-6 w-6 text-brand-500" />
         <div>
-          <h1 className="font-display text-3xl font-bold text-white">存储</h1>
-          <p className="text-sm text-slate-400">
+          <h1 className="font-display text-3xl font-bold text-ink-600">存储</h1>
+          <p className="text-sm text-ink-50">
             按媒体库和容器格式统计的磁盘占用,数据来自数据库快照(无须实时扫描磁盘)。
           </p>
         </div>
@@ -57,10 +57,10 @@ export function StoragePage() {
       </section>
 
       <section className="space-y-3">
-        <h2 className="font-display text-xl font-semibold text-white">按媒体库</h2>
+        <h2 className="font-display text-xl font-semibold text-ink-600">按媒体库</h2>
         <div className="glass-panel">
           <table className="w-full text-left text-sm">
-            <thead className="text-xs uppercase tracking-wider text-slate-500">
+            <thead className="text-xs uppercase tracking-wider text-sand-500">
               <tr>
                 <th className="py-2">名称</th>
                 <th>类型</th>
@@ -74,10 +74,10 @@ export function StoragePage() {
                 const pct = (l.total_bytes / totalBytes) * 100
                 return (
                   <tr key={l.library_id} className="border-t border-white/5">
-                    <td className="py-2 text-white">{l.name}</td>
-                    <td className="text-slate-300">{l.type}</td>
-                    <td className="text-slate-300">{l.media_count}</td>
-                    <td className="text-slate-300">{fmtBytes(l.total_bytes)}</td>
+                    <td className="py-2 text-ink-600">{l.name}</td>
+                    <td className="text-ink-100">{l.type}</td>
+                    <td className="text-ink-100">{l.media_count}</td>
+                    <td className="text-ink-100">{fmtBytes(l.total_bytes)}</td>
                     <td>
                       <div className="flex items-center gap-2">
                         <div className="h-1 w-24 overflow-hidden rounded bg-white/10">
@@ -86,7 +86,7 @@ export function StoragePage() {
                             style={{ width: `${pct.toFixed(1)}%` }}
                           />
                         </div>
-                        <span className="text-xs text-slate-400">{pct.toFixed(1)}%</span>
+                        <span className="text-xs text-ink-50">{pct.toFixed(1)}%</span>
                       </div>
                     </td>
                   </tr>
@@ -98,7 +98,7 @@ export function StoragePage() {
       </section>
 
       <section className="space-y-3">
-        <h2 className="font-display text-xl font-semibold text-white">按容器格式</h2>
+        <h2 className="font-display text-xl font-semibold text-ink-600">按容器格式</h2>
         <div className="grid gap-3 sm:grid-cols-2 md:grid-cols-3">
           {data.by_container.map((c) => (
             <div
@@ -106,10 +106,10 @@ export function StoragePage() {
               className="glass-panel flex items-center justify-between !p-4"
             >
               <div>
-                <p className="text-xs uppercase tracking-wider text-slate-500">{c.container}</p>
-                <p className="font-display text-lg font-semibold text-white">{c.count} 项</p>
+                <p className="text-xs uppercase tracking-wider text-sand-500">{c.container}</p>
+                <p className="font-display text-lg font-semibold text-ink-600">{c.count} 项</p>
               </div>
-              <p className="text-sm text-slate-300">{fmtBytes(c.bytes)}</p>
+              <p className="text-sm text-ink-100">{fmtBytes(c.bytes)}</p>
             </div>
           ))}
         </div>
@@ -129,12 +129,12 @@ function Tile({
 }) {
   return (
     <div className="glass-panel flex items-center gap-3 !p-4">
-      <div className="rounded-lg border border-primary-400/40 bg-primary-400/10 p-2 text-primary-400">
+      <div className="rounded-lg border border-primary-400/40 bg-primary-400/10 p-2 text-brand-500">
         {icon}
       </div>
       <div>
-        <p className="text-xs uppercase tracking-wider text-slate-500">{label}</p>
-        <p className="font-display text-lg font-semibold text-white">{value}</p>
+        <p className="text-xs uppercase tracking-wider text-sand-500">{label}</p>
+        <p className="font-display text-lg font-semibold text-ink-600">{value}</p>
       </div>
     </div>
   )
diff --git a/web/src/pages/StrmPage.tsx b/web/src/pages/StrmPage.tsx
index 992fdf0..0afcbca 100644
--- a/web/src/pages/StrmPage.tsx
+++ b/web/src/pages/StrmPage.tsx
@@ -121,8 +121,8 @@ export function StrmPage() {
           <LinkIcon size={20} />
         </div>
         <div>
-          <h1 className="font-display text-3xl font-bold text-white">STRM 管理</h1>
-          <p className="text-sm text-slate-400">
+          <h1 className="font-display text-3xl font-bold text-ink-600">STRM 管理</h1>
+          <p className="text-sm text-ink-50">
             将外部 HTTP / WebDAV / Alist 直链以"虚拟文件"形式纳入媒体库
           </p>
         </div>
@@ -130,7 +130,7 @@ export function StrmPage() {
 
       {/* Import a new STRM-only entry. */}
       <section className="glass-panel space-y-4">
-        <h2 className="font-display text-lg font-semibold text-white">导入 STRM 条目</h2>
+        <h2 className="font-display text-lg font-semibold text-ink-600">导入 STRM 条目</h2>
         <form onSubmit={onImport} className="grid gap-3 md:grid-cols-4">
           <select
             required
@@ -165,14 +165,14 @@ export function StrmPage() {
             <Plus size={16} /> {importing ? '导入中…' : '导入'}
           </button>
         </form>
-        <p className="text-xs text-slate-500">
+        <p className="text-xs text-sand-500">
           导入后会创建一条 container=strm 的媒体记录,播放时会 302 重定向到该 URL。
         </p>
       </section>
 
       {/* Attach / detach STRM URL on existing media. */}
       <section className="glass-panel space-y-4">
-        <h2 className="font-display text-lg font-semibold text-white">附加 STRM URL 到已有媒体</h2>
+        <h2 className="font-display text-lg font-semibold text-ink-600">附加 STRM URL 到已有媒体</h2>
         <form onSubmit={doSearch} className="flex gap-2">
           <input
             className="input-base flex-1"
@@ -196,8 +196,8 @@ export function StrmPage() {
                 >
                   <div className="flex items-start justify-between gap-3">
                     <div className="min-w-0">
-                      <div className="truncate font-medium text-white">{m.title}</div>
-                      <div className="truncate text-xs text-slate-400">
+                      <div className="truncate font-medium text-ink-600">{m.title}</div>
+                      <div className="truncate text-xs text-ink-50">
                         {m.year > 0 && `${m.year} · `}
                         {m.container || '本地文件'}
                       </div>
@@ -240,7 +240,7 @@ export function StrmPage() {
         )}
 
         {!searching && query && results.length === 0 && (
-          <p className="text-sm text-slate-400">未找到匹配的媒体。</p>
+          <p className="text-sm text-ink-50">未找到匹配的媒体。</p>
         )}
       </section>
     </div>
diff --git a/web/src/pages/SubscriptionsPage.tsx b/web/src/pages/SubscriptionsPage.tsx
index 9fb786a..0e56375 100644
--- a/web/src/pages/SubscriptionsPage.tsx
+++ b/web/src/pages/SubscriptionsPage.tsx
@@ -40,8 +40,8 @@ export function SubscriptionsPage() {
 
   return (
     <div className="space-y-6">
-      <h1 className="font-display text-3xl font-bold text-white">RSS 订阅</h1>
-      <p className="text-sm text-slate-400">
+      <h1 className="font-display text-3xl font-bold text-ink-600">RSS 订阅</h1>
+      <p className="text-sm text-ink-50">
         定期轮询 RSS 源(每 10 分钟一次),将匹配过滤器的项目自动加入下载队列。
       </p>
 
@@ -71,13 +71,13 @@ export function SubscriptionsPage() {
         </button>
       </form>
 
-      {loading && <p className="text-slate-500">加载中…</p>}
-      {!loading && items.length === 0 && <p className="text-slate-400">暂无订阅。</p>}
+      {loading && <p className="text-sand-500">加载中…</p>}
+      {!loading && items.length === 0 && <p className="text-ink-50">暂无订阅。</p>}
 
       {items.length > 0 && (
         <div className="glass-panel">
           <table className="w-full text-left text-sm">
-            <thead className="text-xs uppercase tracking-wider text-slate-500">
+            <thead className="text-xs uppercase tracking-wider text-sand-500">
               <tr>
                 <th className="py-2">名称</th>
                 <th>RSS</th>
@@ -89,17 +89,17 @@ export function SubscriptionsPage() {
             <tbody>
               {items.map((s) => (
                 <tr key={s.id} className="border-t border-white/5">
-                  <td className="py-2 text-white">{s.name}</td>
-                  <td className="max-w-md truncate text-slate-300" title={s.feed_url}>
+                  <td className="py-2 text-ink-600">{s.name}</td>
+                  <td className="max-w-md truncate text-ink-100" title={s.feed_url}>
                     {s.feed_url}
                   </td>
-                  <td className="text-slate-300">{s.filter || '—'}</td>
-                  <td className="text-slate-500">
+                  <td className="text-ink-100">{s.filter || '—'}</td>
+                  <td className="text-sand-500">
                     {s.last_run_at ? new Date(s.last_run_at).toLocaleString() : '—'}
                   </td>
                   <td className="space-x-2 py-2 text-right">
                     <button
-                      className="rounded border border-primary-400/40 px-2 py-1 text-xs text-primary-400 hover:bg-primary-400/10"
+                      className="rounded border border-primary-400/40 px-2 py-1 text-xs text-brand-500 hover:bg-primary-400/10"
                       onClick={async () => {
                         const r = await subscriptionsAPI.runNow(s.id)
                         toast.success(`已加入 ${r.queued} 项`)
diff --git a/web/src/pages/TasksPage.tsx b/web/src/pages/TasksPage.tsx
index e9c1624..8ebf3ff 100644
--- a/web/src/pages/TasksPage.tsx
+++ b/web/src/pages/TasksPage.tsx
@@ -34,23 +34,23 @@ export function TasksPage() {
     }
   }, [])
 
-  if (!snap) return <p className="text-slate-500">加载中…</p>
+  if (!snap) return <p className="text-sand-500">加载中…</p>
 
   const torrents = snap.torrents ?? []
 
   return (
     <div className="space-y-8">
       <header className="flex items-center gap-3">
-        <Activity className="h-6 w-6 text-primary-400" />
-        <h1 className="font-display text-3xl font-bold text-white">实时任务</h1>
+        <Activity className="h-6 w-6 text-brand-500" />
+        <h1 className="font-display text-3xl font-bold text-ink-600">实时任务</h1>
       </header>
 
       <section className="glass-panel">
-        <h2 className="mb-3 font-display text-lg font-semibold text-white">转码任务</h2>
-        {snap.transcodes.length === 0 && <p className="text-slate-500">暂无运行中转码。</p>}
+        <h2 className="mb-3 font-display text-lg font-semibold text-ink-600">转码任务</h2>
+        {snap.transcodes.length === 0 && <p className="text-sand-500">暂无运行中转码。</p>}
         {snap.transcodes.length > 0 && (
           <table className="w-full text-left text-sm">
-            <thead className="text-xs uppercase tracking-wider text-slate-500">
+            <thead className="text-xs uppercase tracking-wider text-sand-500">
               <tr>
                 <th className="py-2">媒体 ID</th>
                 <th>编码器</th>
@@ -61,9 +61,9 @@ export function TasksPage() {
             <tbody>
               {snap.transcodes.map((t) => (
                 <tr key={t.media_id} className="border-t border-white/5">
-                  <td className="py-2 font-mono text-xs text-white">{t.media_id}</td>
-                  <td className="text-slate-300">{t.encoder || 'libx264'}</td>
-                  <td className="text-slate-300">{new Date(t.started_at).toLocaleTimeString()}</td>
+                  <td className="py-2 font-mono text-xs text-ink-600">{t.media_id}</td>
+                  <td className="text-ink-100">{t.encoder || 'libx264'}</td>
+                  <td className="text-ink-100">{new Date(t.started_at).toLocaleTimeString()}</td>
                   <td>
                     {t.playlist_ok ? (
                       <span className="rounded border border-emerald-400/40 px-1.5 py-0.5 text-xs text-emerald-400">
@@ -83,11 +83,11 @@ export function TasksPage() {
       </section>
 
       <section className="glass-panel">
-        <h2 className="mb-3 font-display text-lg font-semibold text-white">下载任务</h2>
-        {torrents.length === 0 && <p className="text-slate-500">暂无运行中下载。</p>}
+        <h2 className="mb-3 font-display text-lg font-semibold text-ink-600">下载任务</h2>
+        {torrents.length === 0 && <p className="text-sand-500">暂无运行中下载。</p>}
         {torrents.length > 0 && (
           <table className="w-full text-left text-sm">
-            <thead className="text-xs uppercase tracking-wider text-slate-500">
+            <thead className="text-xs uppercase tracking-wider text-sand-500">
               <tr>
                 <th className="py-2">名称</th>
                 <th>状态</th>
@@ -98,11 +98,11 @@ export function TasksPage() {
             <tbody>
               {torrents.map((t) => (
                 <tr key={t.hash} className="border-t border-white/5 align-top">
-                  <td className="max-w-md truncate py-2 text-white" title={t.name}>
+                  <td className="max-w-md truncate py-2 text-ink-600" title={t.name}>
                     {t.name}
                   </td>
-                  <td className="text-slate-300">{t.state}</td>
-                  <td className="text-slate-300">
+                  <td className="text-ink-100">{t.state}</td>
+                  <td className="text-ink-100">
                     <div className="flex items-center gap-2">
                       <div className="h-1 w-24 overflow-hidden rounded bg-white/10">
                         <div
@@ -113,7 +113,7 @@ export function TasksPage() {
                       {(t.progress * 100).toFixed(1)}%
                     </div>
                   </td>
-                  <td className="text-slate-300">{fmtBytes(t.size)}</td>
+                  <td className="text-ink-100">{fmtBytes(t.size)}</td>
                 </tr>
               ))}
             </tbody>
diff --git a/web/src/pages/ToolsPage.tsx b/web/src/pages/ToolsPage.tsx
index f719d24..cf280d2 100644
--- a/web/src/pages/ToolsPage.tsx
+++ b/web/src/pages/ToolsPage.tsx
@@ -24,8 +24,8 @@ export function ToolsPage() {
           <Wrench size={20} />
         </div>
         <div>
-          <h1 className="font-display text-3xl font-bold text-white">运维工具</h1>
-          <p className="text-sm text-slate-400">整理媒体文件 · 测试通知渠道</p>
+          <h1 className="font-display text-3xl font-bold text-ink-600">运维工具</h1>
+          <p className="text-sm text-ink-50">整理媒体文件 · 测试通知渠道</p>
         </div>
       </div>
 
@@ -118,22 +118,22 @@ function OrganizePanel() {
   return (
     <section className="glass-panel space-y-5">
       <div className="flex items-center gap-2">
-        <FolderCog size={18} className="text-primary-400" />
-        <h2 className="font-display text-lg font-semibold text-white">整理 &amp; 重命名</h2>
+        <FolderCog size={18} className="text-brand-500" />
+        <h2 className="font-display text-lg font-semibold text-ink-600">整理 &amp; 重命名</h2>
       </div>
-      <p className="text-xs text-slate-500">
+      <p className="text-xs text-sand-500">
         将媒体文件按 <code className="rounded bg-white/5 px-1">媒体库/年份/标题 (年份)/标题.ext</code>{' '}
         的规范布局移动并重命名,确保已先完成刮削。
       </p>
 
       {!loadingSettings && (
         <div className="flex items-center gap-2 text-xs">
-          <Info size={14} className={smartClassify ? 'text-green-400' : 'text-slate-500'} />
-          <span className={smartClassify ? 'text-green-400' : 'text-slate-500'}>
+          <Info size={14} className={smartClassify ? 'text-green-400' : 'text-sand-500'} />
+          <span className={smartClassify ? 'text-green-400' : 'text-sand-500'}>
             智能分类：{smartClassify ? '已启用' : '未启用'}
           </span>
           {smartClassify && (
-            <span className="text-slate-500">（将根据元数据自动分类到子目录）</span>
+            <span className="text-sand-500">（将根据元数据自动分类到子目录）</span>
           )}
         </div>
       )}
@@ -181,8 +181,8 @@ function OrganizePanel() {
                 className="flex items-center justify-between gap-3 rounded-lg border border-white/5 bg-white/5 px-3 py-2"
               >
                 <div className="min-w-0">
-                  <div className="truncate text-sm text-white">{m.title}</div>
-                  <div className="truncate text-xs text-slate-400">{m.path}</div>
+                  <div className="truncate text-sm text-ink-600">{m.title}</div>
+                  <div className="truncate text-xs text-ink-50">{m.path}</div>
                 </div>
                 <button
                   onClick={() => onOrganizeOne(m)}
@@ -202,7 +202,7 @@ function OrganizePanel() {
         )}
 
         {!searching && query && results.length === 0 && (
-          <p className="mt-3 text-sm text-slate-400">未找到匹配的媒体。</p>
+          <p className="mt-3 text-sm text-ink-50">未找到匹配的媒体。</p>
         )}
       </div>
     </section>
@@ -235,9 +235,9 @@ function NotifyPanel() {
     <section className="glass-panel space-y-4">
       <div className="flex items-center gap-2">
         <Bell size={18} className="text-amber-300" />
-        <h2 className="font-display text-lg font-semibold text-white">通知渠道测试</h2>
+        <h2 className="font-display text-lg font-semibold text-ink-600">通知渠道测试</h2>
       </div>
-      <p className="text-xs text-slate-500">
+      <p className="text-xs text-sand-500">
         会向所有已配置的通知渠道(Telegram / Bark / Webhook 等)发送一条测试消息。
       </p>
       <form onSubmit={onSend} className="space-y-3">
@@ -270,7 +270,7 @@ function NotifyPanel() {
 function Field({ label, children }: { label: string; children: React.ReactNode }) {
   return (
     <label className="block">
-      <span className="mb-1 block text-sm text-slate-300">{label}</span>
+      <span className="mb-1 block text-sm text-ink-100">{label}</span>
       {children}
     </label>
   )
diff --git a/web/src/pages/WatchHistoryPage.tsx b/web/src/pages/WatchHistoryPage.tsx
index 45848d2..428f507 100644
--- a/web/src/pages/WatchHistoryPage.tsx
+++ b/web/src/pages/WatchHistoryPage.tsx
@@ -29,13 +29,13 @@ export function WatchHistoryPage() {
   return (
     <div className="space-y-6">
       <header className="flex items-center gap-3">
-        <Clock className="h-6 w-6 text-primary-400" />
-        <h1 className="font-display text-3xl font-bold text-white">观看历史</h1>
+        <Clock className="h-6 w-6 text-brand-500" />
+        <h1 className="font-display text-3xl font-bold text-ink-600">观看历史</h1>
       </header>
 
-      {loading && <p className="text-slate-500">加载中…</p>}
+      {loading && <p className="text-sand-500">加载中…</p>}
       {!loading && items.length === 0 && (
-        <p className="text-slate-400">暂无观看记录。</p>
+        <p className="text-ink-50">暂无观看记录。</p>
       )}
 
       <div className="space-y-3">
@@ -62,11 +62,11 @@ export function WatchHistoryPage() {
               <div className="flex-1 space-y-1">
                 <Link
                   to={`/media/${m.id}`}
-                  className="font-medium text-white transition hover:text-primary-400"
+                  className="font-medium text-ink-600 transition hover:text-brand-500"
                 >
                   {m.title}
                 </Link>
-                <div className="flex items-center gap-3 text-xs text-slate-400">
+                <div className="flex items-center gap-3 text-xs text-ink-50">
                   <span>{fmtDuration(h.position_ms)} / {fmtDuration(h.duration_ms)}</span>
                   <span>{new Date(h.watched_at).toLocaleString()}</span>
                   {h.completed && (
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index 65da19f..a66870b 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -1,4 +1,4 @@
-/** @type {import('tailwindcss').Config} */
+﻿/** @type {import('tailwindcss').Config} */
 export default {
   content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
   theme: {
@@ -9,73 +9,100 @@ export default {
         mono: ['"JetBrains Mono"', '"Fira Code"', 'monospace'],
       },
       colors: {
-        // ── New Warm Industrial palette ──
+        // ── Brand: Luxurious Editorial Gold ──
         brand: {
           DEFAULT: '#c9954a',
-          50:  '#fdf8f0',
-          100: '#f9edda',
-          200: '#f2d8b0',
-          300: '#e8bc7d',
-          400: '#dca45c',
+          50:  '#fdf9f4',
+          100: '#fbeedf',
+          200: '#f6dbb9',
+          300: '#efc187',
+          400: '#e5a153',
           500: '#c9954a',
-          600: '#b07a38',
-          700: '#936031',
-          800: '#794e2d',
-          900: '#654128',
-          950: '#3a2214',
+          600: '#b07f3c',
+          700: '#926630',
+          800: '#755027',
+          900: '#5e4121',
+          950: '#332110',
         },
+        // ── Sage: Muted Teal Accent ──
         sage: {
-          DEFAULT: '#7a9a8a',
-          50:  '#f3f7f4',
-          100: '#e4ece6',
-          200: '#c9d9ce',
-          300: '#a6bfad',
-          400: '#7a9a8a',
-          500: '#5e7e6e',
-          600: '#496558',
-          700: '#3c5247',
-          800: '#334339',
-          900: '#2c3831',
-          950: '#151f19',
+          DEFAULT: '#6b8275',
+          50:  '#f4f6f5',
+          100: '#e5eae7',
+          200: '#ccd7d1',
+          300: '#a3b8ad',
+          400: '#6b8275',
+          500: '#54685d',
+          600: '#425149',
+          700: '#35413a',
+          800: '#2d3531',
+          950: '#141a17',
         },
+        // ── Ink: High-Contrast Graphite / Charcoal (Elegant Light-Theme Text) ──
+        ink: {
+          DEFAULT: '#111827',
+          50:  '#6b7280', // Elegant secondary text
+          100: '#4b5563', // Main body text
+          200: '#374151', // Dark text
+          300: '#1f2937',
+          400: '#111827',
+          500: '#111827',
+          600: '#111827', // Headers
+          700: '#030712',
+          800: '#000000',
+          900: '#000000',
+        },
+        // ── Sand: High-End Swiss Slate Grays ──
+        sand: {
+          DEFAULT: '#f9fafb',
+          50:  '#ffffff', // Card base
+          100: '#f9fafb', // System body background
+          200: '#f3f4f6', // Panel base / hover background
+          300: '#e5e7eb', // Thin premium borders
+          400: '#d1d5db', // Mid-lines
+          500: '#9ca3af', // Muted placeholders
+          600: '#6b7280',
+          700: '#4b5563',
+          800: '#374151',
+          900: '#1f2937',
+        },
+        // ── Surface: Compatibility ──
         surface: {
-          DEFAULT: '#1a1a18',
-          50:  '#2e2e2a',
-          100: '#2a2a26',
-          200: '#242420',
-          300: '#1e1e1b',
-          400: '#1a1a18',
-          500: '#161614',
-          600: '#111110',
-          // Backward-compat (old 700-950 → warm charcoal)
-          700: '#242420',
-          800: '#1a1a18',
-          900: '#111110',
-          950: '#0d0d0c',
+          DEFAULT: '#ffffff',
+          50:  '#ffffff',
+          100: '#f9fafb',
+          200: '#f3f4f6',
+          300: '#e5e7eb',
+          400: '#ffffff',
+          500: '#ffffff',
+          600: '#1f2937',
+          700: '#111827',
+          800: '#030712',
+          900: '#000000',
+          950: '#000000',
         },
-        cream: {
-          DEFAULT: '#e8e4d9',
-          50:  '#faf8f4',
-          100: '#f3f0e8',
-          200: '#e8e4d9',
-          300: '#c4bfb5',
-          400: '#a09b92',
-          500: '#7d7871',
-          600: '#605c56',
-          700: '#4a4742',
-          800: '#363330',
-          900: '#242220',
-        },
-
-        // ── Backward-compat aliases (old class names → new warm colors) ──
+        // Backward compatibility colors mapped to slate-light
         primary: {
-          400: '#dca45c',  // was cyan → now brand-400
-          500: '#c9954a',  // was cyan → now brand-500
-          600: '#b07a38',  // was cyan → now brand-600
+          400: '#e5a153',
+          500: '#c9954a',
+          600: '#b07f3c',
         },
         accent: {
-          400: '#7a9a8a',  // was purple → now sage-400
-          500: '#5e7e6e',  // was purple → now sage-500
+          400: '#6b8275',
+          500: '#54685d',
+        },
+        cream: {
+          DEFAULT: '#faf9f6',
+          50:  '#ffffff',
+          100: '#faf9f6',
+          200: '#f4f3ee',
+          300: '#e8e6dc',
+          400: '#9ca3af',
+          500: '#6b7280',
+          600: '#4b5563',
+          700: '#1f2937',
+          800: '#111827',
+          900: '#000000',
         },
       },
       fontSize: {
@@ -88,26 +115,13 @@ export default {
       transitionDuration: {
         '400': '400ms',
       },
-      animation: {
-        'slide-in-left': 'slideInLeft 0.3s ease-out',
-        'fade-in': 'fadeIn 0.4s ease-out',
-        'scale-in': 'scaleIn 0.3s ease-out',
-      },
-      keyframes: {
-        slideInLeft: {
-          '0%': { opacity: '0', transform: 'translateX(-8px)' },
-          '100%': { opacity: '1', transform: 'translateX(0)' },
-        },
-        fadeIn: {
-          '0%': { opacity: '0' },
-          '100%': { opacity: '1' },
-        },
-        scaleIn: {
-          '0%': { opacity: '0', transform: 'scale(0.96)' },
-          '100%': { opacity: '1', transform: 'scale(1)' },
-        },
+      boxShadow: {
+        'card': '0 1px 3px rgba(0,0,0,0.02), 0 1px 2px rgba(0,0,0,0.01)',
+        'card-hover': '0 10px 30px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.02)',
+        'elevated': '0 20px 50px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.03)',
+        'sidebar': '1px 0 0 rgba(0,0,0,0.03)',
       },
     },
   },
   plugins: [],
-}
+}
\ No newline at end of file
