diff --git a/front/src/UserProfile.js b/front/src/UserProfile.js
index fb44b43..074d68c 100644
--- a/front/src/UserProfile.js
+++ b/front/src/UserProfile.js
@@ -1,5 +1,13 @@
 import React, { useState, useEffect } from "react";
 import AccountCircleIcon from "@mui/icons-material/AccountCircle";
+import PersonIcon from "@mui/icons-material/Person";
+import EmailIcon from "@mui/icons-material/Email";
+import SchoolIcon from "@mui/icons-material/School";
+import CloudUploadIcon from "@mui/icons-material/CloudUpload";
+import CloudDownloadIcon from "@mui/icons-material/CloudDownload";
+import AutoAwesomeIcon from "@mui/icons-material/AutoAwesome";
+import FavoriteIcon from "@mui/icons-material/Favorite";
+import EmptyIcon from "@mui/icons-material/Inbox";
 import Button from '@mui/material/Button';
 import TextField from '@mui/material/TextField';
 import MenuItem from '@mui/material/MenuItem';
@@ -9,7 +17,7 @@
 import DialogActions from '@mui/material/DialogActions';
 import { useNavigate } from "react-router-dom";
 import { API_BASE_URL } from "./config";
-import "./App.css";
+import "./UserProfile.css";
 
 export default function UserProfile() {
   const navigate = useNavigate();
@@ -386,442 +394,352 @@
       console.error('账号迁移失败', err);
       setMigrationStatus('迁移失败，请检查网络');
     }
-  };
+  };  return (
+    <div className="user-profile-container">
+      <div className="profile-grid">
+        {/* 用户基本信息卡片 */}
+        <div className="profile-card user-info-card">
+          <div className="user-avatar-section">
+            <div className="avatar-container" onClick={handleAvatarClick}>
+              {tempUserInfo.avatar_url ? (
+                <img
+                  src={tempUserInfo.avatar_url}
+                  alt="用户头像"
+                  className="user-avatar"
+                />
+              ) : (
+                <AccountCircleIcon style={{ fontSize: 120, color: '#1a237e' }} />
+              )}
+              <div className="avatar-overlay">
+                <span>点击更换头像</span>
+              </div>
+            </div>
+            <h2 className="user-title">用户个人资料</h2>
+          </div>
 
-  return (
-    <div
-      className="container"
-      style={{
-        minHeight: '100vh',
-        background: 'linear-gradient(135deg, #f0f4ff 0%, #e0e7ff 100%)',
-        display: 'grid',
-        gridTemplateColumns: '1.1fr 1.9fr',
-        gridTemplateRows: 'auto auto',
-        gap: '12px',
-        padding: '24px 3vw',
-        boxSizing: 'border-box'
-      }}
-    >
-      {/* 左上：用户资料 */}
-      <div style={{
-        gridColumn: '1 / 2',
-        gridRow: '1 / 2',
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        background: '#fff',
-        borderRadius: 20,
-        boxShadow: '0 6px 32px #e0e7ff',
-        padding: '32px 28px',
-        minWidth: 320,
-        minHeight: 420,
-        transition: 'box-shadow 0.2s',
-      }}>
-        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', marginBottom: 18 }}>
-          <div onClick={handleAvatarClick} style={{ cursor: 'pointer', position: 'relative' }}>
-            <AccountCircleIcon style={{ fontSize: 96, color: '#1a237e', marginBottom: 12 }} />
-            {tempUserInfo.avatar_url && (
-              <img
-                src={tempUserInfo.avatar_url}
-                alt="用户头像"
-                style={{
-                  position: 'absolute',
-                  top: 0,
-                  left: 0,
-                  width: 96,
-                  height: 96,
-                  borderRadius: '50%',
-                  objectFit: 'cover',
-                  border: '2px solid #e0e7ff',
-                  boxShadow: '0 2px 8px #bfcfff'
-                }}
+          <div className="user-form">
+            <div className="form-group">
+              <label className="form-label">
+                <PersonIcon style={{ fontSize: 16, marginRight: 4 }} />
+                用户名
+              </label>
+              <input
+                className="form-input"
+                value={tempUserInfo.username}
+                onChange={(e) => handleInputChange("username", e.target.value)}
+                placeholder="请输入用户名"
               />
+            </div>
+
+            <div className="form-group">
+              <label className="form-label">
+                <EmailIcon style={{ fontSize: 16, marginRight: 4 }} />
+                邮箱
+              </label>
+              <input
+                className="form-input"
+                value={tempUserInfo.email}
+                readOnly
+                style={{ cursor: 'not-allowed' }}
+              />
+            </div>
+
+            <div className="form-group">
+              <label className="form-label">
+                <SchoolIcon style={{ fontSize: 16, marginRight: 4 }} />
+                学校
+              </label>
+              <input
+                className="form-input"
+                value={tempUserInfo.school}
+                onChange={(e) => handleInputChange("school", e.target.value)}
+                placeholder="请输入学校名称"
+              />
+            </div>
+
+            <div className="form-group">
+              <label className="form-label">账号状态</label>
+              <div className="status-indicator">
+                <input
+                  className="form-input"
+                  value={tempUserInfo.account_status === 1 || tempUserInfo.account_status === "1" ? "封禁" : "正常"}
+                  readOnly
+                />
+                <div className={`status-dot ${tempUserInfo.account_status === 1 || tempUserInfo.account_status === "1" ? 'banned' : 'active'}`}></div>
+              </div>
+            </div>
+
+            <div className="form-group">
+              <label className="form-label">性别</label>
+              <select
+                className="form-input"
+                value={tempUserInfo.gender}
+                onChange={(e) => handleInputChange("gender", e.target.value)}
+              >
+                <option value="">请选择性别</option>
+                <option value="m">男性</option>
+                <option value="f">女性</option>
+              </select>
+            </div>
+
+            {/* 邀请功能 */}
+            <div className="invite-section">
+              <label className="form-label">邀请功能</label>
+              <div className="invite-form">
+                <input
+                  className="form-input invite-input"
+                  type="email"
+                  placeholder="输入邀请邮箱"
+                  value={inviteEmail}
+                  onChange={e => setInviteEmail(e.target.value)}
+                  disabled={Number(tempUserInfo.invite_left) === 0}
+                />
+                <button
+                  className="btn btn-primary btn-small"
+                  onClick={handleInvite}
+                  disabled={Number(tempUserInfo.invite_left) === 0 || !inviteEmail}
+                >
+                  邀请
+                </button>
+              </div>
+              <div className="invite-counter">
+                剩余邀请次数：{tempUserInfo.invite_left || "0"}
+              </div>
+              {inviteStatus && (
+                <div className="invite-status">{inviteStatus}</div>
+              )}
+            </div>
+
+            <div className="btn-group">
+              <button className="btn btn-primary" onClick={handleSave}>
+                保存信息
+              </button>
+              <button className="btn btn-danger" onClick={() => setAppealOpen(true)}>
+                用户申诉
+              </button>
+              <button className="btn btn-warning" onClick={() => setMigrationOpen(true)}>
+                账号迁移
+              </button>            </div>
+          </div>
+        </div>
+
+        {/* 活跃度卡片 */}
+        <div className="profile-card activity-card">
+          <h3 className="activity-title">
+            <AutoAwesomeIcon style={{ fontSize: 24, marginRight: 8 }} />
+            活跃度统计
+          </h3>
+          
+          <div className="activity-content">
+            {/* 魔力值兑换 */}
+            <div className="magic-exchange">
+              <div className="stat-item">
+                <span className="stat-label">当前魔力值</span>
+                <span className="stat-value magic">{userStats.magic}</span>
+              </div>
+              
+              <div className="exchange-form">
+                <input
+                  className="form-input exchange-input"
+                  type="number"
+                  placeholder="输入兑换魔力值"
+                  value={exchangeMagic}
+                  onChange={e => setExchangeMagic(e.target.value)}
+                />
+                <select
+                  className="form-input exchange-input"
+                  value={exchangeType}
+                  onChange={e => setExchangeType(e.target.value)}
+                >
+                  <option value="uploaded">上传量（增加）</option>
+                  <option value="downloaded">下载量（减少）</option>
+                  <option value="vip_downloads">VIP下载次数（增加）</option>
+                </select>
+                <button
+                  className="btn btn-primary btn-small"
+                  onClick={handleExchange}
+                  disabled={
+                    !exchangeMagic ||
+                    isNaN(exchangeMagic) ||
+                    Number(exchangeMagic) <= 0 ||
+                    Number(exchangeMagic) > userStats.magic ||
+                    !Number.isInteger(exchangeResult)
+                  }
+                >
+                  兑换
+                </button>
+              </div>
+              
+              {exchangeMagic && (
+                <div className="exchange-result">
+                  可兑换：{exchangeResult} {exchangeType === 'vip_downloads' ? '次' : 'MB'}
+                  {!Number.isInteger(exchangeResult) && exchangeResult > 0 && (
+                    <span style={{ color: '#e53935', marginLeft: 8 }}>
+                      (结果必须为整数)
+                    </span>
+                  )}
+                </div>
+              )}
+            </div>
+
+            {/* 统计数据 */}
+            <div className="stats-grid">
+              <div className="stat-item">
+                <span className="stat-label">
+                  <CloudUploadIcon style={{ fontSize: 16, marginRight: 4 }} />
+                  上传量
+                </span>
+                <span className="stat-value upload">
+                  {(userStats.upload / 1000000)?.toFixed(2)} MB
+                </span>
+              </div>
+              
+              <div className="stat-item">
+                <span className="stat-label">
+                  <CloudDownloadIcon style={{ fontSize: 16, marginRight: 4 }} />
+                  下载量
+                </span>
+                <span className="stat-value download">
+                  {(userStats.download / 1000000)?.toFixed(2)} MB
+                </span>
+              </div>
+              
+              <div className="stat-item">
+                <span className="stat-label">上传/下载比</span>
+                <span className="stat-value ratio">
+                  {userStats.download === 0 ? "∞" : (userStats.upload / userStats.download).toFixed(2)}
+                </span>
+              </div>
+              
+              <div className="stat-item">
+                <span className="stat-label">VIP下载次数</span>
+                <span className="stat-value vip">{userStats.viptime}</span>
+              </div>
+            </div>
+          </div>
+        </div>        {/* 个人上传种子列表 */}
+        <div className="profile-card seeds-card">
+          <h3 className="list-title">
+            <CloudUploadIcon style={{ fontSize: 24, marginRight: 8 }} />
+            个人上传种子列表
+          </h3>
+          
+          <div className="list-container">
+            {userSeeds.length === 0 ? (
+              <div className="empty-state">
+                <EmptyIcon className="empty-icon" />
+                <span>暂无上传种子</span>
+              </div>
+            ) : (
+              <ul className="seeds-list">
+                {userSeeds.map((seed, idx) => (
+                  <li
+                    key={seed.seedid || idx}
+                    className="seed-item"
+                    onClick={e => {
+                      if (e.target.classList.contains('delete-btn')) return;
+                      navigate(`/torrent/${seed.seed_id}`);
+                    }}
+                  >
+                    <span className="seed-title">{seed.title}</span>
+                    <span className="seed-tags">{seed.tags}</span>
+                    <span className="seed-stats">人气: {seed.downloadtimes}</span>
+                    <div className="seed-actions">
+                      <button
+                        className="btn btn-danger btn-small delete-btn"
+                        onClick={async e => {
+                          e.stopPropagation();
+                          const match = document.cookie.match('(^|;)\\s*userId=([^;]+)');
+                          const userid = match ? match[2] : null;
+                          if (!userid) {
+                            alert('未获取到用户ID');
+                            return;
+                          }
+                          try {
+                            const res = await fetch(`${API_BASE_URL}/api/delete-seed`, {
+                              method: 'POST',
+                              headers: { 'Content-Type': 'application/json' },
+                              body: JSON.stringify({ seed_id: seed.seed_id, userid }),
+                            });
+                            if (res.ok) {
+                              setUserSeeds(userSeeds.filter((s, i) => (s.seed_id || i) !== (seed.seed_id || idx)));
+                            } else {
+                              alert('删除失败，请重试');
+                            }
+                          } catch (err) {
+                            alert('删除失败，请检查网络');
+                          }
+                        }}
+                      >
+                        删除
+                      </button>
+                    </div>
+                  </li>
+                ))}
+              </ul>
             )}
           </div>
-          <h2 style={{ color: '#1a237e', marginBottom: 0, fontSize: 26, letterSpacing: 1 }}>用户个人资料</h2>
         </div>
-        <div className="card" style={{
-          padding: 32,
-          width: '100%',
-          background: '#fff',
-          borderRadius: 18,
-          boxShadow: '0 2px 12px #e0e7ff',
-          flex: 1,
-          minWidth: 0
-        }}>
-          <div style={{ marginBottom: 20, display: 'flex', alignItems: 'center' }}>
-            <b style={{ width: 72, textAlign: 'left', marginRight: 0, fontSize: 16 }}>用户名：</b>
-            <TextField
-              variant="outlined"
-              size="small"
-              value={tempUserInfo.username}
-              onChange={(e) => handleInputChange("username", e.target.value)}
-              sx={{ flex: 1, minWidth: 0 }}
-            />
-          </div>
-          <div style={{ marginBottom: 20, display: 'flex', alignItems: 'center' }}>
-            <b style={{ width: 72, textAlign: 'left', marginRight: 0, fontSize: 16 }}>邮箱：</b>
-            <TextField
-              variant="outlined"
-              size="small"
-              value={tempUserInfo.email}
-              InputProps={{ readOnly: true }}
-              sx={{ flex: 1, minWidth: 0, background: '#f5f5f5' }}
-            />
-          </div>
-          {/* 邀请功能 */}
-          <div style={{ marginBottom: 20, display: 'flex', alignItems: 'center', flexWrap: 'wrap' }}>
-            <b style={{ width: 72, textAlign: 'left', marginRight: 0, fontSize: 16 }}>邀请剩余：</b>
-            <TextField
-              type="email"
-              size="small"
-              placeholder="被邀请邮箱"
-              value={inviteEmail}
-              onChange={e => setInviteEmail(e.target.value)}
-              sx={{ flex: 2, marginRight: 1, minWidth: 120 }}
-              disabled={Number(tempUserInfo.invite_left) === 0}
-            />
-            <Button
-              variant="contained"
-              color="primary"
-              onClick={handleInvite}
-              disabled={Number(tempUserInfo.invite_left) === 0 || !inviteEmail}
-              sx={{ marginRight: 1, minWidth: 80 }}
-            >邀请</Button>
-            <span style={{ color: '#888', fontSize: 15 }}>剩余：{tempUserInfo.invite_left || "0"}</span>
-          </div>
-          {inviteStatus && <div style={{ color: '#e53935', fontSize: 14, marginBottom: 8 }}>{inviteStatus}</div>}
-          <div style={{ marginBottom: 20, display: 'flex', alignItems: 'center' }}>
-            <b style={{ width: 72, textAlign: 'left', marginRight: 0, fontSize: 16 }}>学校：</b>
-            <TextField
-              variant="outlined"
-              size="small"
-              value={tempUserInfo.school}
-              onChange={(e) => handleInputChange("school", e.target.value)}
-              sx={{ flex: 1, minWidth: 0 }}
-            />
-          </div>
-          <div style={{ marginBottom: 20, display: 'flex', alignItems: 'center' }}>
-            <b style={{ width: 72, textAlign: 'left', marginRight: 0, fontSize: 16 }}>账号状态：</b>
-            <TextField
-              variant="outlined"
-              size="small"
-              value={tempUserInfo.account_status === 1 || tempUserInfo.account_status === "1" ? "封禁" : "正常"}
-              InputProps={{ readOnly: true }}
-              sx={{ flex: 1, minWidth: 0, background: '#f5f5f5' }}
-            />
-            <span style={{
-              display: 'inline-block',
-              width: 12,
-              height: 12,
-              borderRadius: '50%',
-              backgroundColor: tempUserInfo.account_status === 1 || tempUserInfo.account_status === "1" ? '#e53935' : '#43a047',
-              marginLeft: 10,
-              border: '1px solid #b2b2b2',
-            }} />
-          </div>
-          <div style={{ marginBottom: 20, display: 'flex', alignItems: 'center' }}>
-            <b style={{ width: 72, textAlign: 'left', marginRight: 0, fontSize: 16 }}>性别：</b>
-            <TextField
-              select
-              variant="outlined"
-              size="small"
-              value={tempUserInfo.gender}
-              onChange={e => handleInputChange("gender", e.target.value)}
-              sx={{ flex: 1, minWidth: 0 }}
-            >
-              <MenuItem value="m">男性</MenuItem>
-              <MenuItem value="f">女性</MenuItem>
-            </TextField>
-          </div>          <div style={{ display: 'flex', gap: 16, marginTop: 24, justifyContent: 'flex-end' }}>
-            <Button
-              variant="contained"
-              color="primary"
-              onClick={handleSave}
-              sx={{ fontSize: 16, borderRadius: 2, padding: '6px 12px' }}
-            >保存</Button>
-            <Button
-              variant="contained"
-              color="error"
-              onClick={() => setAppealOpen(true)}
-              sx={{ fontSize: 16, borderRadius: 2, padding: '6px 12px' }}
-            >用户申诉</Button>
-            <Button
-              variant="contained"
-              color="warning"
-              onClick={() => setMigrationOpen(true)}
-              sx={{ fontSize: 16, borderRadius: 2, padding: '6px 12px' }}
-            >账号迁移</Button>
-          </div>
-        </div>
-      </div>
-      {/* 左下：活跃度模块 */}
-      <div style={{
-        gridColumn: '1 / 2',
-        gridRow: '2 / 3',
-        background: '#fff',
-        borderRadius: 20,
-        boxShadow: '0 6px 32px #e0e7ff',
-        padding: '32px 28px',
-        minWidth: 320,
-        minHeight: 320,
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'center'
-      }}>
-        <h3 style={{ color: '#1a237e', fontSize: 22, marginBottom: 18, letterSpacing: 1 }}>活跃度</h3>
-        <div style={{
-          border: '1.5px dashed #b2b2b2',
-          borderRadius: 14,
-          minHeight: 80,
-          padding: 22,
-          display: 'flex',
-          flexDirection: 'column',
-          gap: 14,
-          fontSize: 18,
-          background: '#f8faff'
-        }}>
-          <div style={{ display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap' }}>
-            <span>魔力值：<b style={{ color: '#1976d2' }}>{userStats.magic}</b></span>
-            <TextField
-              type="number"
-              size="small"
-              placeholder="输入兑换魔力值"
-              value={exchangeMagic}
-              onChange={e => setExchangeMagic(e.target.value)}
-              sx={{ width: 100, marginLeft: 2, marginRight: 1 }}
-            />
-            <TextField
-              select
-              size="small"
-              value={exchangeType}
-              onChange={e => setExchangeType(e.target.value)}
-              sx={{ minWidth: 120 }}
-            >
-              <MenuItem value="uploaded">上传量（增加）</MenuItem>
-              <MenuItem value="downloaded">下载量（减少）</MenuItem>
-              <MenuItem value="vip_downloads">VIP下载次数（增加）</MenuItem>
-            </TextField>            <span style={{ marginLeft: 8, color: '#43a047' }}>
-              可兑换：<b>{exchangeResult}</b> {exchangeType === 'vip_downloads' ? '次' : 'MB'}
-              {!Number.isInteger(exchangeResult) && exchangeResult > 0 && (
-                <span style={{ color: '#e53935', fontSize: '12px', marginLeft: 8 }}>
-                  (结果必须为整数)
-                </span>
-              )}
-            </span><Button
-              variant="contained"
-              color="primary"
-              onClick={handleExchange}
-              disabled={
-                !exchangeMagic ||
-                isNaN(exchangeMagic) ||
-                Number(exchangeMagic) <= 0 ||
-                Number(exchangeMagic) > userStats.magic ||
-                !Number.isInteger(exchangeResult)
-              }
-              sx={{
-                marginLeft: 2,
-                minWidth: 80,
-                background: (!exchangeMagic || isNaN(exchangeMagic) || Number(exchangeMagic) <= 0 || Number(exchangeMagic) > userStats.magic || !Number.isInteger(exchangeResult)) ? '#ccc' : undefined
-              }}
-            >兑换</Button>
-          </div>          <div>上传量：<b style={{ color: '#43a047' }}>{(userStats.upload / 1000000)?.toFixed(2)} MB</b></div>
-          <div>下载量：<b style={{ color: '#e53935' }}>{(userStats.download / 1000000)?.toFixed(2)} MB</b></div>
-          <div>上传/下载值：<b style={{ color: '#ff9800' }}>{userStats.download === 0 ? "∞" : (userStats.upload / userStats.download).toFixed(2)}</b></div>
-          <div>VIP下载次数：<b style={{ color: '#1976d2' }}>{userStats.viptime}</b></div>
-        </div>
-      </div>
-      {/* 右上：个人上传种子列表 */}
-      <div style={{
-        gridColumn: '2 / 3',
-        gridRow: '1 / 2',
-        background: '#fff',
-        borderRadius: 20,
-        boxShadow: '0 6px 32px #e0e7ff',
-        padding: '32px 36px',
-        minHeight: 420,
-        display: 'flex',
-        flexDirection: 'column'
-      }}>
-        <h3 style={{ color: '#1a237e', fontSize: 22, marginBottom: 18, letterSpacing: 1 }}>个人上传种子列表</h3>
-        <div style={{
-          border: '1.5px dashed #b2b2b2',
-          borderRadius: 14,
-          minHeight: 80,
-          padding: 16,
-          background: '#f8faff'
-        }}>
-          {userSeeds.length === 0 ? (
-            <div style={{ color: '#b2b2b2', fontSize: 18, textAlign: 'center' }}>（暂无上传种子）</div>
-          ) : (
-            <ul style={{ listStyle: 'none', margin: 0, padding: 0 }}>
-              {userSeeds.map((seed, idx) => (
-                <li
-                  key={seed.seedid || idx}
-                  style={{
-                    display: 'flex',
-                    alignItems: 'center',
-                    padding: '12px 0',
-                    borderBottom: idx === userSeeds.length - 1 ? 'none' : '1px solid #e0e7ff',
-                    cursor: 'pointer',
-                    transition: 'background 0.15s'
-                  }}
-                  onClick={e => {
-                    if (e.target.classList.contains('delete-btn')) return;
-                    navigate(`/torrent/${seed.seed_id}`);
-                  }}
-                  onMouseOver={e => e.currentTarget.style.background = '#f3f6ff'}
-                  onMouseOut={e => e.currentTarget.style.background = ''}
-                >
-                  <span style={{ flex: 2, fontWeight: 500, color: '#1a237e', textDecoration: 'underline' }}>{seed.title}</span>
-                  <span style={{ flex: 1, color: '#5c6bc0' }}>{seed.tags}</span>
-                  <span style={{ flex: 1, color: '#ff9800', textAlign: 'right' }}>人气: {seed.downloadtimes}</span>
-                  <Button
-                    className="delete-btn"
-                    variant="contained"
-                    color="error"
-                    size="small"
-                    sx={{ marginLeft: 2, borderRadius: 1, minWidth: 60 }} onClick={async e => {
-                      e.stopPropagation();
-                      const match = document.cookie.match('(^|;)\\s*userId=([^;]+)');
-                      const userid = match ? match[2] : null;
-                      if (!userid) {
-                        alert('未获取到用户ID');
-                        return;
-                      }
-                      try {
-                        const res = await fetch(`${API_BASE_URL}/api/delete-seed`, {
-                          method: 'POST',
-                          headers: { 'Content-Type': 'application/json' },
-                          body: JSON.stringify({ seed_id: seed.seed_id, userid }),
-                        });
-                        if (res.ok) {
-                          setUserSeeds(userSeeds.filter((s, i) => (s.seed_id || i) !== (seed.seed_id || idx)));
-                        } else {
-                          alert('删除失败，请重试');
-                        }
-                      } catch (err) {
-                        alert('删除失败，请检查网络');
-                      }
+
+        {/* 个人收藏种子列表 */}
+        <div className="profile-card favorites-card">
+          <h3 className="list-title">
+            <FavoriteIcon style={{ fontSize: 24, marginRight: 8 }} />
+            个人收藏种子列表
+          </h3>
+          
+          <div className="list-container">
+            {userFavorites.length === 0 ? (
+              <div className="empty-state">
+                <FavoriteIcon className="empty-icon" />
+                <span>暂无收藏种子</span>
+              </div>
+            ) : (
+              <ul className="seeds-list">
+                {userFavorites.map((seed, idx) => (
+                  <li
+                    key={seed.seedid || idx}
+                    className="seed-item"
+                    onClick={e => {
+                      if (e.target.classList.contains('remove-favorite-btn')) return;
+                      navigate(`/torrent/${seed.seedid || seed.seed_id}`);
                     }}
-                  >删除</Button>
-                </li>
-              ))}
-            </ul>
-          )}
+                  >
+                    <span className="seed-title">{seed.seed.title}</span>
+                    <span className="seed-tags">{seed.seed.tags}</span>
+                    <span className="seed-stats">人气: {seed.seed.downloadtimes}</span>
+                    <div className="seed-actions">
+                      <button
+                        className="btn btn-warning btn-small remove-favorite-btn"
+                        onClick={e => {
+                          e.stopPropagation();
+                          handleRemoveFavorite(seed.seedid || seed.seed_id);
+                        }}
+                      >
+                        取消收藏
+                      </button>
+                    </div>
+                  </li>
+                ))}
+              </ul>
+            )}
+          </div>
         </div>
-      </div>
-      {/* 右下：个人收藏种子列表 */}
-      <div style={{
-        gridColumn: '2 / 3',
-        gridRow: '2 / 3',
-        background: '#fff',
-        borderRadius: 20,
-        boxShadow: '0 6px 32px #e0e7ff',
-        padding: '32px 36px',
-        minHeight: 320,
-        display: 'flex',
-        flexDirection: 'column'
-      }}>
-        <h3 style={{ color: '#1a237e', fontSize: 22, marginBottom: 18, letterSpacing: 1 }}>个人收藏种子列表</h3>
-        <div style={{
-          border: '1.5px dashed #b2b2b2',
-          borderRadius: 14,
-          minHeight: 80,
-          padding: 16,
-          background: '#f8faff'
-        }}>
-          {userFavorites.length === 0 ? (
-            <div style={{ color: '#b2b2b2', fontSize: 18, textAlign: 'center' }}>（暂无收藏种子）</div>
-          ) : (<ul style={{ listStyle: 'none', margin: 0, padding: 0 }}>
-            {userFavorites.map((seed, idx) => (
-              <li
-                key={seed.seedid || idx}
-                style={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  padding: '12px 0',
-                  borderBottom: idx === userFavorites.length - 1 ? 'none' : '1px solid #e0e7ff',
-                  cursor: 'pointer',
-                  transition: 'background 0.15s'
-                }} onClick={e => {
-                  if (e.target.classList.contains('remove-favorite-btn')) return;
-                  navigate(`/torrent/${seed.seedid || seed.seed_id}`);
-                }}
-                onMouseOver={e => e.currentTarget.style.background = '#f3f6ff'}
-                onMouseOut={e => e.currentTarget.style.background = ''}
-              >
-                <span style={{ flex: 2, fontWeight: 500, color: '#1a237e', textDecoration: 'underline', cursor: 'pointer' }}>{seed.seed.title}</span>
-                <span style={{ flex: 1, color: '#5c6bc0' }}>{seed.seed.tags}</span>
-                <span style={{ flex: 1, color: '#ff9800', textAlign: 'right' }}>人气: {seed.seed.downloadtimes}</span>
-                <Button
-                  className="remove-favorite-btn"
-                  variant="contained"
-                  color="warning"
-                  size="small"
-                  sx={{ marginLeft: 2, borderRadius: 1, minWidth: 80 }} onClick={e => {
-                    e.stopPropagation();
-                    handleRemoveFavorite(seed.seedid || seed.seed_id);
-                  }}
-                >取消收藏</Button>
-              </li>
-            ))}
-          </ul>
-          )}
-        </div>
-      </div>
+      </div>      
       {/* 申诉弹窗 */}
-      <Dialog open={appealOpen} onClose={() => setAppealOpen(false)}>
-        <DialogTitle>提交申诉</DialogTitle>
-        <DialogContent>
-          <div style={{ marginBottom: 16 }}>
+      <Dialog open={appealOpen} onClose={() => setAppealOpen(false)} maxWidth="sm" fullWidth>
+        <DialogTitle style={{ background: '#f8faff', color: '#1a237e', fontWeight: 600 }}>
+          提交申诉
+        </DialogTitle>
+        <DialogContent style={{ padding: '24px', background: '#ffffff' }}>
+          <div style={{ marginBottom: 20 }}>
             <TextField
               label="申诉主题"
               fullWidth
               value={appealTitle}
               onChange={e => setAppealTitle(e.target.value)}
-              size="small"
-            />
-          </div>          <div>
-            <input
-              type="file"
-              accept=".pdf"
-              onChange={e => {
-                const file = e.target.files[0];
-                if (file && file.type !== 'application/pdf') {
-                  alert('请选择PDF文件');
-                  e.target.value = '';
-                  setAppealFile(null);
-                } else {
-                  setAppealFile(file);
-                }
-              }}
-              style={{ marginTop: 8 }}
-            />
-            <div style={{ fontSize: 12, color: '#666', marginTop: 4 }}>
-              请选择PDF文件（最大100MB）
-            </div>
-          </div>
-        </DialogContent>
-        <DialogActions>
-          <Button onClick={handleAppealSubmit} variant="contained" color="primary" disabled={!appealTitle || !appealFile}>提交</Button>
-          <Button onClick={() => setAppealOpen(false)} variant="outlined">取消</Button>
-        </DialogActions>
-      </Dialog>
-      {/* 账号迁移弹窗 */}
-      <Dialog open={migrationOpen} onClose={() => setMigrationOpen(false)}>
-        <DialogTitle>账号迁移</DialogTitle>
-        <DialogContent>
-          <div style={{ marginBottom: 16 }}>
-            <TextField
-              label="待发放上传量"
-              type="number"
-              fullWidth
-              value={migrationUpload}
-              onChange={e => setMigrationUpload(e.target.value)}
-              size="small"
-              inputProps={{ min: 1 }}
-              style={{ marginBottom: 18 }}
+              variant="outlined"
+              style={{ marginBottom: 16 }}
             />
           </div>
           <div>
@@ -838,21 +756,135 @@
                   setAppealFile(file);
                 }
               }}
-              style={{ marginTop: 8 }}
+              style={{ 
+                marginTop: 8,
+                padding: '12px',
+                border: '2px dashed #e0e7ff',
+                borderRadius: '8px',
+                width: '100%',
+                background: '#f8faff'
+              }}
             />
-            <div style={{ fontSize: 12, color: '#666', marginTop: 4 }}>
+            <div style={{ 
+              fontSize: 12, 
+              color: '#666', 
+              marginTop: 8,
+              padding: '8px 12px',
+              background: '#f0f4ff',
+              borderRadius: '6px'
+            }}>
+              请选择PDF文件（最大100MB）
+            </div>
+          </div>
+        </DialogContent>
+        <DialogActions style={{ padding: '16px 24px', background: '#f8faff' }}>
+          <Button 
+            onClick={handleAppealSubmit} 
+            variant="contained" 
+            disabled={!appealTitle || !appealFile}
+            style={{
+              background: (!appealTitle || !appealFile) ? '#ccc' : 'linear-gradient(135deg, #1a237e 0%, #3f51b5 100%)',
+              color: 'white',
+              fontWeight: 600
+            }}
+          >
+            提交申诉
+          </Button>
+          <Button 
+            onClick={() => setAppealOpen(false)} 
+            variant="outlined"
+            style={{ color: '#1a237e', borderColor: '#1a237e' }}
+          >
+            取消
+          </Button>
+        </DialogActions>
+      </Dialog>
+
+      {/* 账号迁移弹窗 */}
+      <Dialog open={migrationOpen} onClose={() => setMigrationOpen(false)} maxWidth="sm" fullWidth>
+        <DialogTitle style={{ background: '#f8faff', color: '#1a237e', fontWeight: 600 }}>
+          账号迁移
+        </DialogTitle>
+        <DialogContent style={{ padding: '24px', background: '#ffffff' }}>
+          <div style={{ marginBottom: 20 }}>
+            <TextField
+              label="待发放上传量"
+              type="number"
+              fullWidth
+              value={migrationUpload}
+              onChange={e => setMigrationUpload(e.target.value)}
+              variant="outlined"
+              inputProps={{ min: 1 }}
+              style={{ marginBottom: 16 }}
+            />
+          </div>
+          <div>
+            <input
+              type="file"
+              accept=".pdf"
+              onChange={e => {
+                const file = e.target.files[0];
+                if (file && file.type !== 'application/pdf') {
+                  alert('请选择PDF文件');
+                  e.target.value = '';
+                  setAppealFile(null);
+                } else {
+                  setAppealFile(file);
+                }
+              }}
+              style={{ 
+                marginTop: 8,
+                padding: '12px',
+                border: '2px dashed #e0e7ff',
+                borderRadius: '8px',
+                width: '100%',
+                background: '#f8faff'
+              }}
+            />
+            <div style={{ 
+              fontSize: 12, 
+              color: '#666', 
+              marginTop: 8,
+              padding: '8px 12px',
+              background: '#f0f4ff',
+              borderRadius: '6px'
+            }}>
               请选择PDF文件（最大10MB）
             </div>
           </div>
           {migrationStatus && (
-            <div style={{ color: migrationStatus.includes('成功') ? '#43a047' : '#e53935', fontSize: 14, marginTop: 8 }}>
+            <div style={{ 
+              color: migrationStatus.includes('成功') ? '#43a047' : '#e53935', 
+              fontSize: 14, 
+              marginTop: 16,
+              padding: '12px',
+              borderRadius: '8px',
+              background: migrationStatus.includes('成功') ? 'rgba(67, 160, 71, 0.1)' : 'rgba(229, 57, 53, 0.1)',
+              border: `1px solid ${migrationStatus.includes('成功') ? 'rgba(67, 160, 71, 0.3)' : 'rgba(229, 57, 53, 0.3)'}`
+            }}>
               {migrationStatus}
             </div>
           )}
         </DialogContent>
-        <DialogActions>
-          <Button onClick={handleMigrationSubmit} variant="contained" color="primary">提交迁移</Button>
-          <Button onClick={() => setMigrationOpen(false)} variant="outlined">取消</Button>
+        <DialogActions style={{ padding: '16px 24px', background: '#f8faff' }}>
+          <Button 
+            onClick={handleMigrationSubmit} 
+            variant="contained"
+            style={{
+              background: 'linear-gradient(135deg, #ff9800 0%, #ffa726 100%)',
+              color: 'white',
+              fontWeight: 600
+            }}
+          >
+            提交迁移
+          </Button>
+          <Button 
+            onClick={() => setMigrationOpen(false)} 
+            variant="outlined"
+            style={{ color: '#1a237e', borderColor: '#1a237e' }}
+          >
+            取消
+          </Button>
         </DialogActions>
       </Dialog>
     </div>