feat: 剧本评分SaaS化精修、画布视觉升级、电商克隆预览响应式修复

【剧本评分页面 SaaS 商业化精修】
- 上传区增加玻璃拟态渐变边框，hover 时高亮为品牌绿
- 已上传文件显示文件名+文件大小，重新上传按钮优化
- 上传按钮文案从"+ 上传剧本"改为"选择剧本"，增加图标
- 评测按钮增加 LoadingOutlined/ThunderboltOutlined 图标动画
- 评测等待态增加分步加载提示（结构识别/冲突评估/商业潜力）
- 六维评分柱状图增加 hover/focus 交互：悬停维度高亮，其余维度 dim，底部显示当前维度详细说明
- 评分卡片、报告面板、历史记录项增加渐变背景与阴影层次
- 新增 script-tokens-v5 设计 Token 变量体系
- 响应式断点适配 1180px/900px/680px，移动端左右面板上下堆叠

【画布页面视觉升级】
- 画布背景增加网点纹理 + 径向渐变，增强空间感
- 项目栏/缩放控件增加玻璃拟态毛玻璃效果
- 节点卡片增加渐变背景、内阴影、边框高亮
- 选中节点增加品牌绿外圈光环 + 投影
- 连线 connector 增加 hover 品牌绿高亮
- 节点连线/选区框/缩放手柄统一品牌绿主题色
- 所有编辑器/菜单面板统一玻璃拟态风格
- 移动端 560px 项目栏改为 4 列网格布局，按钮显示中文标签（编辑/最近/导出/提交）

【电商克隆预览响应式修复】
- 短视口（高度≤760px）下预览面板内 header/空状态/底部输入改为静态流式布局
- 平板（≤860px）下预览面板取消绝对定位，改为 grid 流式布局
- 手机（≤620px）缩小间距与最小高度

【其他】
- 个人中心登录注册表单移除 form-kicker 标签
- 品牌色（auth-page__brand）调整为强调绿色

src/features/profile/ProfilePage.tsx

@@ -850,7 +850,6 @@ function ProfilePage({
             <span className="auth-page__logo">
               <img src={AUTH_LOGO_URL} alt="OmniAI" />
             </span>
-            <span className="auth-page__form-kicker">{mode === "login" ? "账户登录" : "新用户注册"}</span>
             <h2 className="auth-page__title">{mode === "login" ? "欢迎回来" : "创建账号"}</h2>
             <p className="auth-page__subtitle">
               {mode === "login" ? "登录后继续你的 AI 创作之旅" : "注册即可免费体验全部功能"}

src/features/script-tokens/ScriptTokensPage.tsx

@@ -1,8 +1,11 @@
 import {
+  BarChartOutlined,
   CheckCircleFilled,
   CopyOutlined,
   DownloadOutlined,
   FileTextOutlined,
+  LoadingOutlined,
+  ThunderboltOutlined,
   UploadOutlined,
 } from "@ant-design/icons";
 import { useEffect, useRef, useState, type ChangeEvent, type KeyboardEvent } from "react";
@@ -168,6 +171,12 @@ function normalizeUploadedText(raw: string, ext: string): string {
   return raw;
 }
 
+function formatFileSize(size: number): string {
+  if (size < 1024) return `${size} B`;
+  if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)} KB`;
+  return `${(size / 1024 / 1024).toFixed(1)} MB`;
+}
+
 const SCORE_DIMENSIONS: ScoreDimension[] = [
   { key: "hook", label: "钩子设计", maxScore: 20, hint: "开篇吸引力·悬念设置·黄金三秒", detail: "开篇即抛出高概念钩子，悬念设置紧凑有力。" },
   { key: "character", label: "角色塑造", maxScore: 15, hint: "人物立体度·动机合理性·弧光设计", detail: "主角动机有铺垫，配角功能性较强，人物弧光尚可进一步深化。" },
@@ -346,9 +355,10 @@ function ScriptTokensPage() {
   const compactTitle = uploadedFile?.name?.replace(/\.[^.]+$/, "") ?? "剧本评测";
   const scriptMinutes = Math.max(8, Math.round(script.length / 460));
   const reportDate = new Date().toLocaleDateString("zh-CN", { month: "2-digit", day: "2-digit" });
+  const statusClass = loading ? "is-loading" : result ? "is-complete" : hasContent ? "is-ready" : "is-idle";
 
   return (
-    <section className="script-eval-v5 page-motion">
+    <section className={`script-eval-v5 page-motion ${statusClass}`}>
       <div className="script-eval-v5-page">
         {/* Left Panel */}
         <aside className="script-eval-v5-left">
@@ -364,7 +374,10 @@ function ScriptTokensPage() {
               {uploadedFile ? (
                 <div className="script-eval-v5-upload-done is-show">
                   <CheckCircleFilled />
-                  <span className="script-eval-v5-uf-name">{uploadedFile.name}</span>
+                  <span className="script-eval-v5-uf-meta">
+                    <span className="script-eval-v5-uf-name">{uploadedFile.name}</span>
+                    <span className="script-eval-v5-uf-size">{formatFileSize(uploadedFile.size)}</span>
+                  </span>
                   <span className="script-eval-v5-uf-re" onClick={(e) => { e.stopPropagation(); handleReset(); }}>
                     重新上传
                   </span>
@@ -374,7 +387,7 @@ function ScriptTokensPage() {
                   <div className="script-eval-v5-upload-icon"><UploadOutlined /></div>
                   <div className="script-eval-v5-upload-text">拖拽或点击上传</div>
                   <button type="button" className="script-eval-v5-upload-btn" onClick={(e) => { e.stopPropagation(); fileInputRef.current?.click(); }}>
-                    + 上传剧本
+                    <UploadOutlined /> 选择剧本
                   </button>
                   <div className="script-eval-v5-upload-hint">{TEXT_FILE_HINT}</div>
                 </>
@@ -445,10 +458,12 @@ function ScriptTokensPage() {
               disabled={loading || !hasContent}
               onClick={() => void handleEvaluate()}
             >
-              {loading ? "◆ 评测中..." : "◆ 开始评测"}
+              {loading ? <LoadingOutlined /> : <ThunderboltOutlined />}
+              <span>{loading ? "评测中..." : "开始评测"}</span>
             </button>
             <button type="button" className="script-eval-v5-export-btn" disabled={!result} onClick={handleExportMarkdown}>
-              导出评测报告
+              <DownloadOutlined />
+              <span>导出评测报告</span>
             </button>
           </div>
         </aside>
@@ -482,6 +497,11 @@ function ScriptTokensPage() {
                     <div className="page-loading-spinner" />
                     <strong>AI 正在分析剧本...</strong>
                     <p>正在调用模型进行六维评分，预计需要 15-30 秒</p>
+                    <div className="script-eval-v5-loading-steps" aria-hidden="true">
+                      <span>结构识别</span>
+                      <span>冲突评估</span>
+                      <span>商业潜力</span>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -568,13 +588,23 @@ function ScriptTokensPage() {
                         <span>0%</span>
                       </div>
                       <div className="script-eval-report__chart-grid">
-                        {SCORE_DIMENSIONS.map((dim) => {
+                        {SCORE_DIMENSIONS.map((dim, dimIndex) => {
                           const score = result.dimensionScores[dim.key] ?? 0;
                           const pct = Math.max(0, Math.min(1, score / dim.maxScore));
                           const lossPct = 1 - pct;
                           const isPerfect = score === dim.maxScore;
+                          const isActive = activeDim === null || activeDim === dimIndex;
                           return (
-                            <button key={dim.key} type="button" className="script-eval-report__bar-col">
+                            <button
+                              key={dim.key}
+                              type="button"
+                              className={`script-eval-report__bar-col${isActive ? "" : " is-dimmed"}`}
+                              onMouseEnter={() => setActiveDim(dimIndex)}
+                              onFocus={() => setActiveDim(dimIndex)}
+                              onMouseLeave={() => setActiveDim(null)}
+                              onBlur={() => setActiveDim(null)}
+                              aria-label={`${dim.label} ${score}/${dim.maxScore}，${dim.hint}`}
+                            >
                               <div className="script-eval-report__bar-score">
                                 <b>{score}</b><small>/{dim.maxScore}</small>{isPerfect ? <em>*</em> : null}
                               </div>
@@ -589,6 +619,14 @@ function ScriptTokensPage() {
                         })}
                       </div>
                     </div>
+                    <div className="script-eval-report__chart-note">
+                      <BarChartOutlined />
+                      <span>
+                        {activeDim === null
+                          ? "悬停维度可查看当前分项表现，优先从低分项制定改稿计划。"
+                          : `${SCORE_DIMENSIONS[activeDim].label}：${SCORE_DIMENSIONS[activeDim].detail}`}
+                      </span>
+                    </div>
                   </section>
 
                   <div className="script-eval-report__findings">