    <style>
        /* ========== 全局设计系统 ========== */
        :root {
          /* 品牌色 */
          --primary: #6366f1;
          --primary-light: #818cf8;
          --primary-dark: #4f46e5;
          --primary-50: rgba(99,102,241,0.05);
          --primary-100: rgba(99,102,241,0.1);
          --primary-200: rgba(99,102,241,0.2);
          --accent: #818cf8;
          --accent-light: #c4b5fd;
          --violet: #8b5cf6;
          --purple: #a855f7;
          /* 语义色 */
          --success: #10b981;
          --success-light: #d1fae5;
          --warning: #f59e0b;
          --warning-light: #fef3c7;
          --error: #ef4444;
          --error-light: #fee2e2;
          --info: #3b82f6;
          /* 背景与表面 */
          --bg: #f5f6fa;
          --bg-subtle: #edeef5;
          --bg-card: #ffffff;
          --bg-card-solid: #ffffff;
          --bg-input: #ffffff;
          --bg-hover: rgba(99,102,241,0.06);
          --bg-elevated: #ffffff;
          /* 毛玻璃（border保留，bg已清理为实色） */
          --glass-border: rgba(255,255,255,0.45);
          /* 边框 */
          --border: rgba(0,0,0,0.06);
          --border-light: rgba(0,0,0,0.04);
          --border-focus: var(--primary-light);
          /* 文字 */
          --text: #1a1a2e;
          --text-secondary: #6b7280;
          --text-muted: #9ca3af;
          --text-inverse: #ffffff;
          /* 渐变文字 */
          --gradient-text: linear-gradient(135deg, #6366f1, #8b5cf6, #a855f7);
          --gradient-primary: linear-gradient(135deg, #6366f1, #818cf8);
          --gradient-accent: linear-gradient(135deg, #8b5cf6, #a855f7);
          /* 圆角 */
          --radius-xs: 6px;
          --radius-sm: 10px;
          --radius-md: 14px;
          --radius-lg: 18px;
          --radius-xl: 24px;
          --radius-full: 9999px;
          /* 阴影（3层体系） */
          --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
          --shadow-sm: 0 2px 8px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.03);
          --shadow-md: 0 4px 12px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04);
          --shadow-lg: 0 12px 24px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.04);
          --shadow-xl: 0 24px 48px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.06);
          --shadow-hover: 0 8px 24px rgba(99,102,241,0.12), 0 4px 8px rgba(0,0,0,0.06);
          --shadow-inner: inset 0 2px 4px rgba(0,0,0,0.04);
          --shadow-glow: 0 0 24px rgba(99,102,241,0.2);
          --shadow-glow-strong: 0 4px 24px rgba(99,102,241,0.35);
          /* 间距 */
          --space-xs: 4px;
          --space-sm: 8px;
          --space-md: 16px;
          --space-lg: 24px;
          --space-xl: 32px;
          --space-2xl: 48px;
          /* 过渡 */
          --transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
          --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
          --transition-slow: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
          --transition-spring: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
          /* 字体 */
          --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Segoe UI', Roboto, sans-serif;
          --font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, monospace;
          /* 字号阶梯 */
          --text-xs: 11px;
          --text-sm: 12px;
          --text-base: 14px;
          --text-md: 16px;
          --text-lg: 20px;
          --text-xl: 24px;
          --text-2xl: 28px;
          --text-3xl: 36px;
          /* 字重 */
          --font-normal: 400;
          --font-medium: 500;
          --font-semibold: 600;
          --font-bold: 700;
        }
        /* ========== 动画关键帧 ========== */
        @keyframes hm-float-1 {
          0%, 100% { transform: translate(0, 0) scale(1); }
          33% { transform: translate(40px, -30px) scale(1.05); }
          66% { transform: translate(-20px, 20px) scale(0.95); }
        }
        @keyframes hm-float-2 {
          0%, 100% { transform: translate(0, 0) scale(1); }
          33% { transform: translate(-30px, 25px) scale(0.96); }
          66% { transform: translate(25px, -15px) scale(1.04); }
        }
        @keyframes hm-float-3 {
          0%, 100% { transform: translate(0, 0) scale(1); }
          50% { transform: translate(20px, -25px) scale(1.08); }
        }
        @keyframes hm-fadeInUp {
          from { opacity: 0; transform: translateY(16px); }
          to { opacity: 1; transform: translateY(0); }
        }
        @keyframes hm-shimmer {
          0% { background-position: -200% 0; }
          100% { background-position: 200% 0; }
        }
        @keyframes hm-glow-pulse {
          0%, 100% { box-shadow: 0 0 20px rgba(99,102,241,0.25); }
          50% { box-shadow: 0 0 36px rgba(99,102,241,0.45); }
        }
        /* 光晕背景球 */
        .hm-glow-bg {
          position: fixed;
          top: 0; left: 0; right: 0; bottom: 0;
          pointer-events: none;
          z-index: 0;
          overflow: hidden;
        }
        .hm-glow-orb {
          position: absolute;
          border-radius: 50%;
          filter: blur(40px);
          opacity: 0.15;
          pointer-events: none;
        }
        .hm-glow-orb-1 {
          width: 350px; height: 350px;
          background: radial-gradient(circle, rgba(99,102,241,0.12), transparent 70%);
          top: -10%; left: 20%;
          animation: hm-float-1 25s ease-in-out infinite;
        }
        .hm-glow-orb-2 {
          width: 280px; height: 280px;
          background: radial-gradient(circle, rgba(139,92,246,0.10), transparent 70%);
          top: 40%; right: -5%;
          animation: hm-float-2 30s ease-in-out infinite;
        }
        .hm-glow-orb-3 {
          width: 250px; height: 250px;
          background: radial-gradient(circle, rgba(168,85,247,0.08), transparent 70%);
          bottom: -5%; left: 40%;
          animation: hm-float-3 22s ease-in-out infinite;
        }
        /* ========== 全局基础样式 ========== */
        *, *::before, *::after {
          box-sizing: border-box;
        }
        html {
          scroll-behavior: smooth;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
          text-rendering: optimizeLegibility;
        }
        body {
          font-family: var(--font-sans);
          font-size: var(--text-base);
          line-height: 1.6;
          color: var(--text);
          background: var(--bg);
          min-height: 100vh;
          margin: 0;
          position: relative;
        }
        /* 文本选中 */
        ::selection {
          background: rgba(99,102,241,0.2);
          color: var(--primary-dark);
        }
        ::-moz-selection {
          background: rgba(99,102,241,0.2);
          color: var(--primary-dark);
        }
        /* 全局滚动条 */
        ::-webkit-scrollbar {
          width: 8px;
          height: 8px;
        }
        ::-webkit-scrollbar-track {
          background: transparent;
        }
        ::-webkit-scrollbar-thumb {
          background: rgba(0,0,0,0.12);
          border-radius: var(--radius-full);
          border: 2px solid transparent;
          background-clip: content-box;
        }
        ::-webkit-scrollbar-thumb:hover {
          background: rgba(0,0,0,0.2);
          background-clip: content-box;
        }
        ::-webkit-scrollbar-corner {
          background: transparent;
        }
        /* Firefox 滚动条 */
        * {
          scrollbar-width: thin;
          scrollbar-color: rgba(0,0,0,0.12) transparent;
        }
        /* 全局 placeholder */
        ::placeholder {
          color: var(--text-muted);
          opacity: 0.7;
        }
        /* 焦点可见性（无障碍） */
        :focus-visible {
          outline: 2px solid var(--primary);
          outline-offset: 2px;
          border-radius: var(--radius-xs);
        }
        /* 图片默认 */
        img {
          max-width: 100%;
          height: auto;
        }

        /* ========== 左侧竖向导航栏布局 ========== */
        .app-layout {
            display: flex;
            min-height: 100vh;
        }
        /* 左侧导航栏 */
        .sidebar {
            width: 160px;
            min-width: 160px;
            background: #ffffff;
            border-right: 1px solid #eef0f4;
            padding: 24px 0;
            display: flex;
            flex-direction: column;
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            z-index: 100;
            transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), min-width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            overflow: hidden;
        }
        .sidebar.collapsed {
            width: 48px;
            min-width: 48px;
        }
        .sidebar.collapsed .sidebar-logo {
            padding: 0 4px 12px;
            font-size: 0;
            justify-content: center;
        }
        .sidebar.collapsed .sidebar-logo::after {
            content: '💜';
            font-size: 20px;
        }
        .sidebar.collapsed .sidebar-logo .clear-btn {
            display: none;
        }
        .sidebar.collapsed .sidebar-item-text {
            display: none;
        }
        .sidebar.collapsed .sidebar-nav {
            padding: 0 6px;
        }
        .sidebar.collapsed .sidebar-item {
            padding: 12px 8px;
            justify-content: center;
        }
        .sidebar.collapsed .sidebar-item .nav-icon { display: flex; justify-content: center; align-items: center; width: 100%; }
        .sidebar.collapsed .sidebar-logo { display: flex; }
        .sidebar.collapsed .sidebar-collapse-btn { display: flex; }
        .sidebar-expand-btn {
            display: none; width: 36px; height: 36px;
            background: linear-gradient(135deg, #6366f1, #818cf8);
            border: none; border-radius: 10px; cursor: pointer;
            color: #fff; font-size: 16px;
            align-items: center; justify-content: center;
            margin: 8px auto; transition: all 0.2s;
            box-shadow: 0 2px 8px rgba(99,102,241,0.3);
        }
        .sidebar-expand-btn:hover { transform: scale(1.1); box-shadow: 0 4px 12px rgba(99,102,241,0.4); }
        .sidebar.collapsed .sidebar-expand-btn { display: none !important; }
        .sidebar.collapsed .sidebar-bottom {
            padding: 10px 6px;
        }
        .sidebar.collapsed .sidebar-bottom label,
        .sidebar.collapsed .sidebar-bottom input {
            display: none;
        }
        .sidebar.collapsed .sidebar-bottom > div {
            display: none !important;
        }
        .sidebar-logo {
            padding: 0 10px 16px;
            font-size: 18px;
            font-weight: 700;
            color: #1a1a2e;
            border-bottom: 1px solid #eef0f4;
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .sidebar-logo .clear-btn {
            margin-left: auto;
            font-size: 10px;
            padding: 3px 8px;
            background: #ff5722;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-weight: normal;
        }
        .sidebar-nav {
            display: flex;
            flex-direction: column;
            gap: 4px;
            padding: 0 6px;
        }
        .sidebar-collapse-btn {
            margin-left: auto;
            font-size: 12px;
            padding: 2px 8px;
            background: #f7f8fa;
            border-radius: 4px;
            cursor: pointer;
            color: #9ca3af;
            transition: all 0.2s;
        }
        .sidebar-collapse-btn:hover {
            background: rgba(99, 102, 241, 0.15);
            color: #6366f1;
        }
        .sidebar.collapsed .sidebar-collapse-btn {
            display: flex;
        }
        .sidebar.collapsed.sidebar-hover { width: 160px; min-width: 160px; overflow: visible; }
        .sidebar.collapsed.sidebar-hover .sidebar-item .nav-icon { display: flex; justify-content: center; }
        .sidebar.collapsed.sidebar-hover .sidebar-item-text { display: inline; }
        .sidebar.collapsed.sidebar-hover .sidebar-logo { display: flex; font-size: 18px; }
        .sidebar.collapsed.sidebar-hover .sidebar-bottom > div { display: revert; }
        .sidebar.collapsed.sidebar-hover .sidebar-collapse-btn { display: flex; }
        .sidebar-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 12px;
            border-radius: var(--radius-sm);
            color: var(--text-muted);
            cursor: pointer;
            transition: var(--transition);
            font-size: var(--text-base);
            font-weight: var(--font-medium);
            border: none;
            background: transparent;
            width: 100%;
            text-align: left;
            font-family: inherit;
            position: relative;
        }
        .sidebar-item:hover {
            background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(139,92,246,0.04));
            color: var(--text);
        }
        .sidebar-item.active {
            background: linear-gradient(135deg, rgba(99,102,241,0.12), rgba(139,92,246,0.08));
            color: var(--primary);
            font-weight: var(--font-semibold);
        }
        .sidebar-item.active::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 3px;
            height: 60%;
            background: var(--gradient-primary);
            border-radius: 0 var(--radius-full) var(--radius-full) 0;
        }
        .sidebar-item .nav-icon {
            font-size: 18px;
            width: 24px;
            text-align: center;
        }
        /* 侧边栏底部区域 */
        .sidebar-bottom {
            margin-top: auto;
            padding: 16px;
            border-top: 1px solid #eef0f4;
        }
        .sidebar-bottom label {
            color: #9ca3af;
            font-size: 11px;
            display: block;
            margin-bottom: 6px;
        }
        .sidebar-bottom input {
            width: 100%;
            padding: 6px 10px;
            background: #f7f8fa;
            border: 1px solid #e5e7eb;
            border-radius: 6px;
            color: #1a1a2e;
            font-size: 12px;
        }
        .sidebar-bottom input::placeholder {
            color: #6b7280;
        }
        /* "我的"Tab — 仅移动端可见 */
        .mobile-profile-tab {
            display: none;
        }
        /* 主内容区 */
        .main-content {
            flex: 1;
            margin-left: 160px;
            padding: 20px 28px;
            background: transparent;
            min-height: 100vh;
            transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .main-content.sidebar-collapsed {
            margin-left: 48px;
        }
        /* 卡片 */
        .wf-card {
          background: #ffffff !important;
          border-radius: var(--radius-lg) !important;
          box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
          border: 1px solid #eef0f4 !important;
          min-height: 280px;
          padding: var(--space-lg) !important;
          margin-bottom: var(--space-lg) !important;
          transition: var(--transition);
        }
        .wf-card:hover {
          box-shadow: var(--shadow-hover) !important;
          transform: translateY(-2px);
          border-color: rgba(99,102,241,0.2) !important;
        }
        .panel {
          background: #ffffff !important;
          border-radius: var(--radius-lg) !important;
          box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
          border: 1px solid #eef0f4 !important;
          padding: var(--space-lg) !important;
          margin-bottom: var(--space-lg) !important;
          transition: var(--transition);
        }
        .panel:hover {
          box-shadow: var(--shadow-md) !important;
          border-color: rgba(99,102,241,0.2) !important;
        }
        /* 步骤内容区大间距 */
        .wf-step-content {
          padding: var(--space-xl) var(--space-lg) !important;
        }
        /* 按钮统一动效 */
        button, .wf-btn {
          transition: var(--transition) !important;
          cursor: pointer;
          position: relative;
        }
        .wf-btn:hover {
          transform: translateY(-1px);
        }
        .wf-btn:active, button.wf-btn:active {
          transform: translateY(0) scale(0.97);
        }
        /* 主按钮悬停发光 */
        .wf-btn-primary:hover, button.wf-btn-primary:hover {
          box-shadow: 0 6px 20px rgba(99, 102, 241, 0.35) !important;
        }
        /* 输入框统一 */
        textarea, input[type="text"], input[type="password"], input[type="email"], input[type="number"], select {
          border: 1.5px solid var(--border) !important;
          border-radius: var(--radius-sm) !important;
          transition: var(--transition) !important;
          font-family: var(--font-sans);
          font-size: var(--text-base);
        }
        textarea:focus, input:focus, select:focus {
          border-color: var(--primary) !important;
          box-shadow: 0 0 0 3px var(--primary-100), var(--shadow-sm) !important;
          outline: none;
        }
        textarea:hover, input[type="text"]:hover, input[type="password"]:hover, select:hover {
          border-color: var(--text-muted) !important;
        }
        /* 标题间距 */
        .wf-card-title {
          margin-bottom: var(--space-md) !important;
          font-weight: 600;
          color: var(--text);
        }
        /* 步骤导航条 */
        .wf-step-nav {
          background: transparent !important;
          border-top: none !important;
          position: sticky !important;
          bottom: 0 !important;
          z-index: 100 !important;
        }
        /* Tab按钮美化 */
        .tab {
          border-radius: var(--radius-sm) !important;
          transition: var(--transition) !important;
          border: none !important;
        }
        .tab:hover {
          background: var(--primary-light) !important;
          color: white !important;
        }
        .tab.active {
          background: var(--primary) !important;
          color: white !important;
          box-shadow: var(--shadow-sm) !important;
        }
        
        /* h1隐藏规则已移除，生成页标题需要使用h1 */
        
        .subtitle {
            text-align: center;
            color: var(--text-secondary);
            margin-bottom: 32px;
            font-size: 14px;
        }
        
        
        .api-config {
            background: var(--bg-card);
            padding: 24px;
            border-radius: 10px;
            margin-bottom: 24px;
            border: 1px solid var(--border);
        }
        
        .config-row {
            display: flex;
            gap: 20px;
            margin-bottom: 16px;
        }
        
        .config-item {
            flex: 1;
        }
        
        .api-config label {
            display: block;
            margin-bottom: 8px;
            color: var(--text);
            font-weight: 500;
            font-size: 13px;
        }
        
        .api-config input, .api-config select {
            width: 100%;
            padding: 12px;
            border: 1px solid var(--border);
            border-radius: 6px;
            font-size: 14px;
        }
        
        /* ========== 工具箱折叠卡片样式 ========== */
        .tool-card {
            background: #ffffff;
            border: 1px solid #eef0f4;
            border-left: 2px solid rgba(99,102,241,0.15);
            border-radius: var(--radius-lg);
            margin-bottom: 12px;
            overflow: hidden;
            transition: var(--transition);
            box-shadow: 0 1px 3px rgba(0,0,0,0.04);
        }
        .tool-card[open] {
            border-left-color: rgba(99,102,241,0.35);
        }
        .tool-card-header {
            padding: 16px 24px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 15px;
            font-weight: 600;
            color: var(--text);
            transition: var(--transition);
            list-style: none;
        }
        .tool-card-header::-webkit-details-marker {
            display: none;
        }
        .tool-card-header:hover {
            background: var(--bg-hover);
        }
        .tool-card-header::before {
            content: '▶';
            font-size: 10px;
            margin-right: 10px;
            transition: transform 0.2s;
        }
        .tool-card[open] .tool-card-header::before {
            transform: rotate(90deg);
        }
        .tool-desc {
            font-size: 12px;
            color: var(--text-muted);
            font-weight: 400;
        }
        .tool-card-body {
            padding: 0 24px 24px;
        }
        .tool-card[open] .tool-card-header {
            border-bottom: 1px solid var(--border-light);
            padding-bottom: 12px;
            margin-bottom: 16px;
        }
        
        .tab:not(.active) {
            display: none !important;
        }
        
        .workflow {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 24px;
            margin-bottom: 24px;
        }
        
        .panel {
            background: var(--bg-card);
            padding: 24px;
            border-radius: 10px;
            border-top: 2px solid rgba(99,102,241,0.1);
            transition: var(--transition);
        }
        .panel:hover {
            border-top-color: rgba(99,102,241,0.28);
        }

        /* 大卡片样式 - 图片视频Tab */
        .big-card {
            background: #ffffff;
            border: 1px solid #eef0f4;
            border-radius: var(--radius-lg);
            padding: 24px;
            margin-bottom: 24px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.06);
            transition: var(--transition);
        }
        .big-card:hover {
            border-top-color: rgba(99,102,241,0.35);
        }
        .big-card-title {
            font-size: 18px;
            font-weight: 600;
            color: var(--text);
            margin-bottom: 16px;
            padding-bottom: 12px;
            border-bottom: 1px solid var(--border-light);
        }
        
        /* details/summary折叠样式 */
        details {
            margin-top: 16px;
        }
        details summary {
            cursor: pointer;
            padding: 10px 16px;
            background: var(--bg-card);
            border-radius: 8px;
            font-weight: 500;
            color: var(--text-secondary);
            user-select: none;
            list-style: none;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        details summary::-webkit-details-marker {
            display: none;
        }
        details summary::before {
            content: '▶';
            font-size: 10px;
            transition: transform 0.2s;
        }
        details[open] summary::before {
            transform: rotate(90deg);
        }
        details summary:hover {
            background: var(--bg-hover);
        }
        
        .panel h3 {
            color: var(--text);
            margin-bottom: 16px;
            font-size: 18px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .panel label {
            display: block;
            margin-bottom: 8px;
            color: var(--text-secondary);
            font-size: 13px;
        }
        
        textarea {
            width: 100%;
            padding: 12px;
            border: 1px solid var(--border);
            border-radius: 6px;
            font-size: 14px;
            line-height: 1.8;
            resize: vertical;
            font-family: inherit;
            background: var(--bg-card);
            color: var(--text);
        }
        
        textarea:focus, input:focus, select:focus {
            outline: none;
            border-color: var(--primary);
        }
        
        .btn-group {
            display: flex;
            gap: 8px;
            margin-top: 8px;
        }
        
        button {
            flex: 1;
            padding: 12px;
            border: none;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .btn-primary {
            background: #6366f1;
            color: white;
        }
        
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
        }
        
        .btn-success {
            background: #6366f1;
            color: white;
        }
        
        .btn-success:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 20px rgba(99, 102, 241, 0.4);
        }
        
        .btn-warning {
            background: #6366f1;
            color: white;
        }
        
        .btn-warning:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 20px rgba(99, 102, 241, 0.4);
        }
        
        .btn-info {
            background: #818cf8;
            color: white;
        }
        
        .btn-info:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 20px rgba(129, 140, 248, 0.4);
        }
        
        .btn-secondary {
            background: #6c757d;
            color: white;
        }
        
        .result {
            margin-top: 15px;
            padding: 15px;
            background: var(--bg-card);
            border-radius: 8px;
        }
        
        .result h3 {
            color: #333;
            margin-bottom: 10px;
        }
        
        .media-result {
            margin-top: 15px;
            text-align: center;
        }
        
        .media-result img, .media-result video {
            max-width: 100%;
            border-radius: 10px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.3);
        }
        
        .loading {
            display: none;
            text-align: center;
            padding: 15px;
            color: var(--primary-light);
        }
        
        .loading.active {
            display: block;
        }
        
        .spinner {
            border: 3px solid var(--bg-hover);
            border-top: 3px solid var(--primary);
            border-radius: 50%;
            width: 35px;
            height: 35px;
            animation: spin 1s linear infinite;
            margin: 0 auto 8px;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        .model-info {
            background: #ffffff;
            padding: 12px;
            border-radius: 8px;
            margin-bottom: 12px;
            border: 1px solid #e5e7eb;
        }
        
        .model-info h4 {
            color: #1a1a2e;
            margin-bottom: 8px;
            font-size: 13px;
        }
        
        .model-info table {
            width: 100%;
            font-size: 12px;
            border-collapse: collapse;
        }
        
        .model-info td {
            padding: 4px 0;
            color: var(--text-secondary);
        }
        
        .model-info td:first-child {
            font-weight: 600;
            color: var(--text);
            width: 110px;
        }
        
        .cost-info {
            background: #f7f8fa;
            padding: 8px;
            border-radius: 5px;
            margin-top: 8px;
            font-size: 12px;
            color: #6b7280;
        }
        
        .video-options {
            background: #ffffff;
            padding: 12px;
            border-radius: 8px;
            margin-top: 12px;
            border: 1px solid #e5e7eb;
        }
        
        .video-options h4 {
            color: var(--text);
            margin-bottom: 8px;
            font-size: 13px;
        }
        
        .video-options p {
            color: var(--text-secondary);
            font-size: 12px;
            margin-top: 8px;
        }
        
        .status-badge {
            display: inline-block;
            padding: 3px 10px;
            border-radius: 12px;
            font-size: 12px;
            margin-left: 5px;
        }
        
        .status-new {
            background: #17a2b8;
            color: white;
        }
        
        .status-stable {
            background: #28a745;
            color: white;
        }
        
        .status-beta {
            background: #ffc107;
            color: #333;
        }
        
        /* 区域重绘功能样式 */
        .inpaint-canvas-container {
            position: relative;
            display: inline-block;
            max-width: 100%;
            margin: 10px 0;
        }
        
        .inpaint-canvas {
            display: block;
            max-width: 100%;
            border: 1px solid var(--border);
            border-radius: 8px;
            cursor: crosshair;
        }
        
        .inpaint-toolbar {
            display: flex;
            gap: 8px;
            margin-bottom: 10px;
            flex-wrap: wrap;
        }
        
        .inpaint-tool-btn {
            padding: 6px 14px;
            border: 1px solid var(--border);
            border-radius: 8px;
            background: var(--input-bg);
            font-size: 13px;
            cursor: pointer;
            transition: all 0.2s;
            color: #333;
        }
        
        .inpaint-tool-btn:hover {
            border-color: #6366f1;
        }
        
        .inpaint-tool-btn.active {
            background: #6366f1;
            color: #fff;
            border-color: #6366f1;
        }
        
        .inpaint-tool-btn.danger {
            background: #ef4444;
            color: #fff;
            border-color: #ef4444;
        }
        
        .inpaint-status {
            font-size: 12px;
            color: var(--text-secondary);
            margin: 8px 0;
            padding: 8px 12px;
            background: var(--bg-hover);
            border-radius: 8px;
        }
        
        .inpaint-hint {
            font-size: 11px;
            color: var(--text-muted);
            margin-top: 8px;
            line-height: 1.5;
        }
        
        .inpaint-result-wrap {
            margin-top: 15px;
        }
        
        .inpaint-result-box {
            width: 100%;
            min-height: 180px;
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 12px;
            background: var(--bg-card);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .inpaint-result-box img {
            max-width: 100%;
            max-height: 350px;
            border-radius: 8px;
            cursor: pointer;
        }
        
        /* 全景场景功能样式 */
        .panorama-panel {
            background: #ffffff;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 15px;
            border: 1px solid #e5e7eb;
        }
        
        .panorama-controls {
            display: flex;
            gap: 12px;
            margin-bottom: 12px;
            flex-wrap: wrap;
        }
        
        .panorama-controls .config-item {
            flex: 1;
            min-width: 150px;
        }
        
        .panorama-viewer-container {
            position: relative;
            width: 100%;
            height: 500px;
            background: #f0f1f5;
            border-radius: 8px;
            overflow: hidden;
            margin-bottom: 12px;
        }
        
        #panoramaCanvas {
            width: 100%;
            height: 100%;
            cursor: grab;
            position: absolute;
            top: 0;
            left: 0;
        }
        
        #panoramaCanvas:active {
            cursor: grabbing;
        }
        
        /* PSV容器内部元素确保正确显示 */
        #psvContainer .psv-container {
            width: 100% !important;
            height: 100% !important;
        }
        
        #psvContainer .psv-canvas-container {
            width: 100% !important;
            height: 100% !important;
        }
        
        #psvContainer canvas {
            display: block !important;
        }
        
        .panorama-overlay {
            position: absolute;
            top: 10px;
            left: 10px;
            right: 10px;
            display: flex;
            justify-content: space-between;
            pointer-events: none;
        }
        
        .panorama-badge {
            background: rgba(0,0,0,0.7);
            color: white;
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 12px;
        }
        
        .panorama-captures {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            margin-top: 15px;
        }
        
        .panorama-capture-item {
            position: relative;
            width: 120px;
            height: 90px;
            border-radius: 8px;
            overflow: hidden;
            border: 2px solid var(--border);
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .panorama-capture-item:hover {
            border-color: #6366f1;
            transform: scale(1.05);
        }
        
        .panorama-capture-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .panorama-capture-item .delete-btn {
            position: absolute;
            top: 2px;
            right: 2px;
            width: 20px;
            height: 20px;
            background: rgba(244,67,54,0.9);
            color: white;
            border: none;
            border-radius: 50%;
            font-size: 12px;
            cursor: pointer;
            opacity: 0;
            transition: opacity 0.3s;
        }
        
        .panorama-capture-item:hover .delete-btn {
            opacity: 1;
        }
        
        .panorama-actions {
            display: flex;
            gap: 10px;
            margin-top: 15px;
        }
        
        .panorama-placeholder {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #6b7280;
            z-index: 10;
            background: #f0f1f5;
        }
        
        .panorama-placeholder-icon {
            font-size: 64px;
            margin-bottom: 15px;
        }
        
        .panorama-loading {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-size: 18px;
        }
        
        /* 查看器拖拽高亮效果 */
        .drag-over-highlight {
            outline: 3px dashed #2196F3 !important;
            outline-offset: -3px;
            background: rgba(33, 150, 243, 0.1) !important;
        }
        /* 密码登录界面样式 - 半透明弹窗 */
        .login-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 99999;
        }
        
        .login-box {
            background: #ffffff;
            padding: 40px;
            border-radius: 20px;
            border: 1px solid #e5e7eb;
            box-shadow: 0 8px 24px rgba(0,0,0,0.4);
            width: 100%;
            max-width: 400px;
            text-align: center;
        }
        
        .login-box h2 {
            color: transparent;
            background: linear-gradient(135deg, #818cf8, #6366f1, #818cf8);
            -webkit-background-clip: text;
            background-clip: text;
            margin-bottom: 10px;
            font-size: 24px;
        }
        
        .login-box p {
            color: #9ca3af;
            margin-bottom: 30px;
            font-size: 14px;
        }
        
        .login-input {
            width: 100%;
            padding: 15px;
            background: #f7f8fa;
            border: 2px solid #e5e7eb;
            border-radius: 10px;
            font-size: 16px;
            margin-bottom: 20px;
            box-sizing: border-box;
            text-align: center;
            color: #1a1a2e;
            transition: all 0.3s;
        }
        
        .login-input:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(99,102,241,0.2);
        }
        
        .login-input::placeholder {
            color: #6b7280;
        }
        
        .login-btn {
            width: 100%;
            padding: 15px;
            background: #6366f1;
            color: white;
            border: none;
            border-radius: 10px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .login-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(99,102,241,0.3);
        }
        
        .login-error {
            color: #ff6b6b;
            font-size: 13px;
            margin-top: 15px;
            display: none;
            background: rgba(255,107,107,0.1);
            padding: 10px;
            border-radius: 8px;
        }
        
        /* 管理员面板样式 */
        .admin-panel { display: none; }
        
        .close-admin-btn { display: none; }

        /* ==================== 步骤导航条（AI视频流） ==================== */
        .wf-step-nav {
            background: transparent;
            padding: 12px 30px;
            border-top: none;
            position: sticky;
            bottom: 0;
            z-index: 100;
        }
        .wf-step-nav-container {
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }
        .wf-step-nav-track {
            display: flex;
            align-items: center;
            position: relative;
        }
        .wf-step-line {
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            height: 4px;
            background: var(--bg-hover);
            transform: translateY(-50%);
            z-index: 0;
            border-radius: 2px;
        }
        .wf-step-line-progress {
            position: absolute;
            top: 50%;
            left: 0;
            height: 4px;
            background: #6366f1;
            transform: translateY(-50%);
            z-index: 1;
            border-radius: 2px;
            transition: width 0.5s ease;
        }
        .wf-step-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            position: relative;
            z-index: 2;
            cursor: pointer;
            transition: all 0.3s ease;
            min-width: 90px;
        }
        .wf-step-item:not(.disabled):hover .wf-step-circle {
            transform: scale(1.1);
            box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
        }
        .wf-step-circle {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            font-weight: 600;
            transition: all 0.3s ease;
            position: relative;
        }
        .wf-step-item.completed .wf-step-circle {
            background: #6366f1;
            color: #fff;
            box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
        }
        .wf-step-item.completed .wf-step-circle::after {
            content: '✓';
            font-size: 18px;
        }
        .wf-step-item.completed .wf-step-circle span {
            display: none;
        }
        .wf-step-item.completed .wf-step-label {
            color: #6366f1;
        }
        .wf-step-item.active .wf-step-circle {
            background: #6366f1;
            color: #fff;
            box-shadow: 0 4px 20px rgba(99, 102, 241, 0.5);
            transform: scale(1.15);
        }
        .wf-step-item.active .wf-step-label {
            color: #6366f1;
            font-weight: 600;
        }
        .wf-step-item.disabled {
            opacity: 0.4;
        }
        .wf-step-item.disabled .wf-step-circle {
            background: transparent;
            border: 2px solid #d1d5db;
            color: #9ca3af;
        }
        .wf-step-label {
            font-size: 12px;
            color: var(--text-muted);
            transition: all 0.3s ease;
            white-space: nowrap;
        }
        /* ==================== 步骤内导航按钮 ==================== */
        .wf-step-nav-buttons {
            display: flex;
            justify-content: space-between;
            margin-top: 24px;
            padding-top: 16px;
            border-top: 1px solid var(--border-light);
        }
        /* ==================== AI视频流通用样式 ==================== */
        .wf-card {
            background: var(--bg-card);
            border: 1px solid var(--border-light);
            border-top: 2px solid rgba(99,102,241,0.15);
            border-radius: 16px;
            padding: 20px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
            margin-bottom: 20px;
            transition: var(--transition);
        }
        .wf-card:hover {
            border-top-color: rgba(99,102,241,0.35);
        }
        .wf-card-title {
            font-size: 16px;
            font-weight: 600;
            color: var(--text);
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .wf-card-title::before {
            content: '';
            width: 4px;
            height: 18px;
            background: linear-gradient(180deg, #6366f1, #818cf8);
            border-radius: 2px;
        }
        .wf-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 10px 20px;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
            background: #ffffff;
            color: #374151;
            box-shadow: 0 1px 2px rgba(0,0,0,0.04);
        }
        .wf-btn:hover {
            background: #f9fafb;
            border-color: #d1d5db;
        }
        .wf-btn-primary {
            background: linear-gradient(135deg, #6366f1, #8b5cf6);
            color: #fff;
            border: none;
            font-weight: 600;
            box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25);
        }
        .wf-btn-primary:hover {
            background: linear-gradient(135deg, #4f46e5, #7c3aed);
            box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
        }
        .wf-btn-success {
            background: linear-gradient(135deg, #10b981, #059669);
            color: #fff;
            border: none;
            font-weight: 600;
            box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25);
        }
        .wf-btn-success:hover {
            background: linear-gradient(135deg, #059669, #047857);
            box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
        }
        .wf-btn-warning {
            background: linear-gradient(135deg, #f59e0b, #d97706);
            color: #fff;
            border: none;
            font-weight: 600;
            box-shadow: 0 2px 8px rgba(245, 158, 11, 0.25);
        }
        .wf-btn-warning:hover {
            background: linear-gradient(135deg, #d97706, #b45309);
            box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35);
        }
        .wf-btn-secondary {
            background: #ffffff;
            color: #4b5563;
            border: 1px solid #e5e7eb;
            box-shadow: none;
        }
        .wf-btn-secondary:hover {
            background: #f3f0ff;
            border-color: #c4b5fd;
            color: #6366f1;
        }
        .wf-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none !important;
        }
        .wf-input {
            width: 100%;
            padding: 10px 14px;
            border: 2px solid var(--border);
            border-radius: 8px;
            font-size: 14px;
            transition: all 0.3s ease;
            background: var(--bg-card);
            color: var(--text);
        }
        .wf-input:focus {
            outline: none;
            border-color: var(--primary);
            background: var(--bg-card);
            box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.2);
        }
        .wf-textarea {
            width: 100%;
            min-height: 150px;
            padding: 14px;
            border: 2px solid var(--border);
            border-radius: 10px;
            font-size: 14px;
            background: var(--bg-card);
            color: var(--text);
            line-height: 1.7;
            resize: vertical;
            transition: all 0.3s ease;
            background: linear-gradient(180deg, #fafbff 0%, #fff 100%);
        }
        .wf-textarea:focus {
            outline: none;
            border-color: #6366f1;
            box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
        }
        /* ==================== 步骤1: 剧本输入 ==================== */
        .wf-script-input-area {
            margin-bottom: 20px;
        }
        .wf-script-textarea {
            width: 100%;
            min-height: 200px;
            padding: 16px;
            border: 2px solid var(--border);
            border-radius: 12px;
            font-size: 14px;
            line-height: 1.8;
            resize: vertical;
            transition: all 0.3s ease;
            background: #e8e8f4;
            color: #1a1a2e;
        }
        .wf-script-textarea:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 4px rgba(99,102,241,0.15);
        }
        .wf-script-textarea::placeholder {
            color: #6a6a8a;
        }
        .wf-preview-section {
            margin-top: 24px;
        }
        .wf-preview-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 16px;
            margin-top: 16px;
        }
        .wf-preview-card {
            background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
            border: 1px solid var(--border);
            border-top: 2px solid rgba(99,102,241,0.1);
            border-radius: 12px;
            padding: 16px;
            transition: var(--transition);
        }
        .wf-preview-card:hover {
            border-top-color: rgba(99,102,241,0.3);
        }
        .wf-preview-card-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px;
            padding-bottom: 10px;
            border-bottom: 1px solid var(--border-light);
        }
        .wf-preview-card-icon {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
        }
        .wf-preview-card-icon.characters {
            background: #6366f1;
        }
        .wf-preview-card-icon.scenes {
            background: #6366f1;
        }
        .wf-preview-card-icon.summary {
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
        }
        .wf-preview-card-title {
            font-weight: 600;
            color: var(--text);
            font-size: 14px;
        }
        .wf-preview-card-content {
            color: var(--text-secondary);
            font-size: 13px;
            line-height: 1.6;
        }
        .wf-preview-tag {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 4px 10px;
            background: #ffffff;
            border: 1px solid var(--border);
            border-radius: 16px;
            font-size: 12px;
            color: var(--text-secondary);
            margin: 3px;
        }
        /* ==================== 步骤2-3: 左右分栏布局 ==================== */
        .wf-two-column {
            display: grid;
            grid-template-columns: 380px 1fr;
            gap: 20px;
        }
        .wf-left-panel {
            background: var(--bg-hover);
            border-radius: 12px;
            padding: 16px;
            border: 1px solid var(--border);
            min-height: 280px;
            overflow-y: auto;
        }
        .wf-panel-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 12px;
        }
        .wf-panel-title {
            font-weight: 600;
            color: #1f2937;
            font-size: 14px;
        }
        .wf-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .wf-list-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px;
            background: #fff;
            border: 2px solid transparent;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .wf-list-item:hover {
            border-color: #e0e4ec;
            transform: translateX(4px);
        }
        .wf-list-item.active {
            border-color: #6366f1;
            background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
        }
        .wf-list-icon {
            width: 36px;
            height: 36px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            flex-shrink: 0;
        }
        .wf-list-icon.char {
            background: #6366f1;
            color: #fff;
        }
        .wf-list-icon.scene {
            background: #6366f1;
            color: #fff;
        }
        .wf-list-info {
            flex: 1;
            min-width: 0;
        }
        .wf-list-name {
            font-weight: 600;
            color: #1f2937;
            font-size: 13px;
        }
        .wf-list-sub {
            font-size: 11px;
            color: #9ca3af;
        }
        .wf-icon-btn {
            width: 26px;
            height: 26px;
            border: none;
            border-radius: 6px;
            background: transparent;
            color: #9ca3af;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
        }
        .wf-icon-btn:hover {
            background: #f3f4f6;
            color: #6b7280;
        }
        .wf-icon-btn.delete:hover {
            background: #fee2e2;
            color: #ef4444;
        }
        .wf-upload-zone {
            border: 2px dashed #d1d5db;
            border-radius: 10px;
            padding: 30px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            background: var(--bg-hover);
        }
        .wf-upload-zone:hover {
            border-color: #6366f1;
            background: rgba(102, 126, 234, 0.05);
        }
        .wf-upload-zone.dragover {
            border-color: #6366f1;
            background: rgba(102, 126, 234, 0.1);
        }
        .wf-image-preview {
            position: relative;
            border-radius: 10px;
            overflow: hidden;
            background: #f3f4f6;
        }
        .wf-image-preview img {
            width: 100%;
            display: block;
        }
        .wf-image-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
        }
        .wf-image-grid-item {
            aspect-ratio: 1;
            background: #f3f4f6;
            border-radius: 6px;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #9ca3af;
            font-size: 11px;
        }
        .wf-image-grid-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        /* ==================== 步骤4: 分镜拆解表格 ==================== */
        .wf-table-container {
            overflow-x: auto;
            border-radius: 10px;
            border: 1px solid var(--border);
        }
        .wf-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 12px;
        }
        .wf-table th {
            background: #6366f1;
            color: #fff;
            padding: 12px 10px;
            text-align: left;
            font-weight: 600;
            white-space: nowrap;
        }
        .wf-table td {
            padding: 10px;
            border-bottom: 1px solid var(--border-light);
            background: #ffffff;
            vertical-align: top;
        }
        .wf-table tr:hover td {
            background: rgba(99,102,241,0.12);
        }
        .wf-table input,
        .wf-table textarea {
            width: 100%;
            padding: 6px;
            border: 1px solid var(--border);
            border-radius: 4px;
            font-size: 11px;
            background: var(--bg-hover);
        }
        .wf-table input:focus,
        .wf-table textarea:focus {
            outline: none;
            border-color: var(--primary);
            background: rgba(99,102,241,0.1);
        }
        .wf-lock-btn {
            width: 28px;
            height: 28px;
            border: none;
            border-radius: 6px;
            background: #f3f4f6;
            color: #9ca3af;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
        }
        .wf-lock-btn:hover {
            background: #e5e7eb;
        }
        .wf-lock-btn.locked {
            background: #fef3c7;
            color: #f59e0b;
        }
        /* ==================== 步骤5: 分镜缩略图 ==================== */
        .wf-thumbnail-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
            max-height: 450px;
            overflow-y: auto;
        }
        .wf-thumbnail-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px;
            background: #fff;
            border: 2px solid transparent;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .wf-thumbnail-item:hover {
            border-color: #e0e4ec;
        }
        .wf-thumbnail-item.active {
            border-color: #f59e0b;
            background: linear-gradient(135deg, rgba(245, 158, 11, 0.05) 0%, rgba(217, 119, 6, 0.05) 100%);
        }
        .wf-thumbnail-num {
            width: 28px;
            height: 28px;
            border-radius: 6px;
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            font-size: 12px;
            flex-shrink: 0;
        }
        .wf-thumbnail-preview {
            width: 70px;
            height: 40px;
            background: #f3f4f6;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #9ca3af;
            font-size: 10px;
            overflow: hidden;
        }
        .wf-thumbnail-preview img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .wf-thumbnail-info {
            flex: 1;
            min-width: 0;
        }
        .wf-thumbnail-scene {
            font-size: 12px;
            color: #1f2937;
            font-weight: 500;
        }
        .wf-thumbnail-status {
            font-size: 10px;
            color: #9ca3af;
        }
        .wf-progress-bar {
            height: 6px;
            background: #e5e7eb;
            border-radius: 3px;
            overflow: hidden;
            margin: 10px 0;
        }
        .wf-progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #6366f1, #818cf8);
            border-radius: 3px;
            transition: width 0.3s ease;
        }
        .wf-preview-large {
            background: #f3f4f6;
            border-radius: 10px;
            min-height: 250px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #9ca3af;
            overflow: hidden;
        }
        .wf-preview-large img {
            width: 100%;
            height: auto;
        }
        /* ==================== 步骤6: 视频生成 ==================== */
        .wf-video-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .wf-video-item {
            display: flex;
            gap: 12px;
            padding: 12px;
            background: #fff;
            border: 1px solid var(--border);
            border-radius: 10px;
            transition: all 0.3s ease;
        }
        .wf-video-item:hover {
            border-color: #6366f1;
            box-shadow: 0 4px 20px rgba(102, 126, 234, 0.1);
        }
        .wf-drag-handle {
            position: absolute;
            top: 8px;
            right: 8px;
            cursor: grab;
            font-size: 20px;
            color: #9ca3af;
            padding: 2px 8px;
            border-radius: 4px;
            user-select: none;
            z-index: 5;
            line-height: 1;
        }
        .wf-drag-handle:hover {
            background: rgba(0,0,0,0.06);
            color: #6366f1;
        }
        .wf-drag-handle:active {
            cursor: grabbing;
        }
        .wf-dragging {
            opacity: 0.4;
            border-color: #6366f1 !important;
            border-style: dashed !important;
        }
        .wf-drag-over {
            border-color: #22c55e !important;
            border-width: 2px !important;
            box-shadow: 0 0 12px rgba(34,197,94,0.25) !important;
        }
        .wf-compose-preview {
            display: flex;
            align-items:center;
            gap: 6px;
            overflow-x: auto;
            padding: 10px 4px;
        }
        .wf-preview-clip {
            flex-shrink: 0;
            text-align: center;
            cursor: grab;
            padding: 6px;
            border-radius: 8px;
            border: 2px solid transparent;
            transition: all 0.2s;
            width: 100px;
        }
        .wf-preview-clip:hover {
            background: rgba(99,102,241,0.06);
        }
        .wf-preview-clip.wf-preview-dragging {
            opacity: 0.3;
        }
        .wf-preview-clip.wf-preview-drop-target {
            border-color: #22c55e;
            background: rgba(34,197,94,0.08);
        }
        .wf-preview-thumb {
            width: 80px;
            height: 50px;
            border-radius: 4px;
            overflow: hidden;
            margin: 0 auto 4px;
            background: #f3f4f6;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
        }
        .wf-preview-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .wf-preview-name {
            font-size: 10px;
            color: var(--text-secondary);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .wf-preview-dur {
            font-size: 10px;
            color: var(--text-muted);
        }
        .wf-preview-transition {
            flex-shrink: 0;
            font-size: 14px;
            color: #9ca3af;
            padding: 0 2px;
        }
        .wf-video-thumb {
            width: 120px;
            height: 68px;
            background: #1f2937;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            overflow: hidden;
            position: relative;
        }
        .wf-video-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .wf-video-thumb-placeholder {
            color: rgba(255, 255, 255, 0.5);
            font-size: 24px;
        }
        .wf-video-info {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .wf-video-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .wf-video-title {
            font-weight: 600;
            color: #1f2937;
            font-size: 13px;
        }
        .wf-video-duration {
            font-size: 11px;
            color: #6b7280;
            background: #f3f4f6;
            padding: 2px 6px;
            border-radius: 3px;
        }
        .wf-video-desc {
            font-size: 12px;
            color: #6b7280;
        }
        /* ==================== 信息提示框 ==================== */
        .wf-info-box {
            background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
            border: 1px solid rgba(102, 126, 234, 0.2);
            border-radius: 10px;
            padding: 14px;
            margin-bottom: 16px;
        }
        .wf-info-box-title {
            font-weight: 600;
            color: #6366f1;
            margin-bottom: 6px;
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 13px;
        }
        .wf-info-box-content {
            font-size: 13px;
            color: #6b7280;
            line-height: 1.6;
        }
        /* ==================== 底部按钮栏 ==================== */
        .wf-footer-bar {
            padding: 16px 0;
            background: transparent;
            border-top: none;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 20px;
            border-radius: 0;
        }
        .wf-footer-left,
        .wf-footer-right {
            display: flex;
            gap: 10px;
        }
        /* ==================== Toast提示 ==================== */
        .wf-toast {
            position: fixed;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%) translateY(100px);
            background: #1f2937;
            color: #fff;
            padding: 12px 20px;
            border-radius: 8px;
            font-size: 13px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
            transition: transform 0.3s ease;
            z-index: 1000;
        }
        .wf-toast.show {
            transform: translateX(-50%) translateY(0);
        }
        .wf-toast.success {
            background: #6366f1;
        }
        .wf-toast.error {
            background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
        }
        /* ==================== Loading状态 ==================== */
        .wf-loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(255, 255, 255, 0.9);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 12px;
            z-index: 1000;
        }
        .wf-loading-spinner {
            width: 36px;
            height: 36px;
            border: 3px solid #e8ecf4;
            border-top-color: #6366f1;
            border-radius: 50%;
            animation: wf-spin 0.8s linear infinite;
        }
        @keyframes wf-spin {
            to {
                transform: rotate(360deg);
            }
        }
        .wf-loading-text {
            color: #6366f1;
            font-size: 13px;
            font-weight: 500;
        }
        /* ==================== 四宫格 ==================== */
        .wf-four-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
        }
        .wf-four-grid-item {
            background: #f3f4f6;
            border-radius: 8px;
            overflow: hidden;
        }
        .wf-four-grid-item .label {
            padding: 6px;
            text-align: center;
            font-size: 11px;
            color: #6b7280;
            background: #fff;
        }
        .wf-four-grid-item img,
        .wf-four-grid-item .placeholder {
            width: 100%;
            aspect-ratio: 1;
            object-fit: cover;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #9ca3af;
            font-size: 10px;
            background: #f3f4f6;
        }
        @media (max-width: 1024px) {
            .wf-two-column {
                grid-template-columns: 1fr;
            }
            .wf-four-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        /* ==================== AI视频流工作流样式 ==================== */
        .wf-step-nav {
            background: transparent;
            padding: 12px 30px;
            border-top: none;
            position: sticky;
            bottom: 0;
            z-index: 100;
        }
        .wf-step-nav-container {
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }
        .wf-step-nav-track {
            display: flex;
            align-items: center;
            position: relative;
        }
        .wf-step-line {
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            height: 4px;
            background: var(--bg-hover);
            transform: translateY(-50%);
            z-index: 0;
            border-radius: 2px;
        }
        .wf-step-line-progress {
            position: absolute;
            top: 50%;
            left: 0;
            height: 4px;
            background: #6366f1;
            transform: translateY(-50%);
            z-index: 1;
            border-radius: 2px;
            transition: width 0.5s ease;
        }
        .wf-step-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            position: relative;
            z-index: 2;
            cursor: pointer;
            transition: all 0.3s ease;
            min-width: 90px;
        }
        .wf-step-item:not(.disabled):hover .wf-step-circle {
            transform: scale(1.1);
            box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
        }
        .wf-step-circle {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            font-weight: 600;
            transition: all 0.3s ease;
            position: relative;
        }
        .wf-step-item.completed .wf-step-circle {
            background: #6366f1;
            color: #fff;
            box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
        }
        .wf-step-item.completed .wf-step-circle::after {
            content: '✓';
            font-size: 18px;
        }
        .wf-step-item.completed .wf-step-circle span {
            display: none;
        }
        .wf-step-item.completed .wf-step-label {
            color: #6366f1;
        }
        .wf-step-item.active .wf-step-circle {
            background: #6366f1;
            color: #fff;
            box-shadow: 0 4px 20px rgba(99, 102, 241, 0.5);
            transform: scale(1.15);
        }
        .wf-step-item.active .wf-step-label {
            color: #6366f1;
            font-weight: 600;
        }
        .wf-step-item.disabled {
            opacity: 0.4;
        }
        .wf-step-item.disabled .wf-step-circle {
            background: transparent;
            border: 2px solid #d1d5db;
            color: #9ca3af;
        }
        .wf-step-label {
            font-size: 12px;
            color: var(--text-muted);
            transition: all 0.3s ease;
            white-space: nowrap;
        }
        /* 通用卡片 */
        .wf-card {
            background: #fff;
            border: 1px solid var(--border);
            border-top: 2px solid rgba(99,102,241,0.12);
            border-radius: 12px;
            padding: 16px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
            margin-bottom: 16px;
            transition: var(--transition);
        }
        .wf-card:hover {
            border-top-color: rgba(99,102,241,0.3);
        }
        .wf-card-title {
            font-size: 15px;
            font-weight: 600;
            color: #1f2937;
            margin-bottom: 14px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .wf-card-title::before {
            content: '';
            width: 4px;
            height: 16px;
            background: linear-gradient(180deg, #6366f1, #818cf8);
            border-radius: 2px;
        }
        /* 按钮 */
        .wf-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 10px 18px;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
            background: #ffffff;
            color: #374151;
            box-shadow: 0 1px 2px rgba(0,0,0,0.04);
        }
        .wf-btn-primary {
            background: linear-gradient(135deg, #6366f1, #8b5cf6);
            color: #fff;
            border: none;
            font-weight: 600;
            box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25);
        }
        .wf-btn-primary:hover {
            background: linear-gradient(135deg, #4f46e5, #7c3aed);
            box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
        }
        .wf-btn-success {
            background: linear-gradient(135deg, #10b981, #059669);
            color: #fff;
            border: none;
            font-weight: 600;
            box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25);
        }
        .wf-btn-success:hover {
            background: linear-gradient(135deg, #059669, #047857);
            box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
        }
        .wf-btn-warning {
            background: linear-gradient(135deg, #f59e0b, #d97706);
            color: #fff;
            border: none;
            font-weight: 600;
            box-shadow: 0 2px 8px rgba(245, 158, 11, 0.25);
        }
        .wf-btn-warning:hover {
            background: linear-gradient(135deg, #d97706, #b45309);
            box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35);
        }
        .wf-btn-secondary {
            background: #ffffff;
            color: #4b5563;
            border: 1px solid #e5e7eb;
            box-shadow: none;
        }
        .wf-btn-secondary:hover {
            background: #f3f0ff;
            border-color: #c4b5fd;
            color: #6366f1;
        }
        .wf-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none !important;
        }
        /* 输入框 */
        .wf-input {
            width: 100%;
            padding: 10px 14px;
            border: 2px solid #e8ecf4;
            border-radius: 8px;
            font-size: 13px;
            transition: all 0.3s ease;
            background: var(--bg-hover);
        }
        .wf-input:focus {
            outline: none;
            border-color: #6366f1;
            background: #fff;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }
        /* 文本框 */
        .wf-textarea {
            width: 100%;
            min-height: 120px;
            padding: 12px;
            border: 2px solid #e8ecf4;
            border-radius: 8px;
            font-size: 13px;
            line-height: 1.6;
            resize: vertical;
            transition: all 0.3s ease;
            background: linear-gradient(180deg, #fafbff 0%, #fff 100%);
        }
        .wf-textarea:focus {
            outline: none;
            border-color: #6366f1;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }
        /* 步骤内容区 */
        .wf-step-content {
            display: none;
            animation: wfFadeIn 0.3s ease;
        }
        .wf-step-content.active {
            display: block;
        }
        @keyframes wfFadeIn {
            from { opacity: 0; transform: translateY(8px); }
            to { opacity: 1; transform: translateY(0); }
        }
        /* 剧本输入区 */
        .wf-script-input-area {
            margin-bottom: 16px;
        }
        .wf-script-textarea {
            width: 100%;
            min-height: 160px;
            padding: 14px;
            border: 2px solid var(--border);
            border-radius: 10px;
            font-size: 13px;
            line-height: 1.7;
            resize: vertical;
            transition: all 0.3s ease;
            background: #e8e8f4;
            color: #1a1a2e;
        }
        .wf-script-textarea:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(99,102,241,0.15);
        }
        /* 预览卡片 */
        .wf-preview-section {
            margin-top: 20px;
        }
        .wf-preview-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            gap: 14px;
            margin-top: 14px;
        }
        .wf-preview-card {
            background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
            border: 1px solid var(--border);
            border-top: 2px solid rgba(99,102,241,0.1);
            border-radius: 10px;
            padding: 14px;
            transition: var(--transition);
        }
        .wf-preview-card:hover {
            border-top-color: rgba(99,102,241,0.3);
        }
        .wf-preview-card-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px;
            padding-bottom: 10px;
            border-bottom: 1px solid var(--border-light);
        }
        .wf-preview-card-icon {
            width: 30px;
            height: 30px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
        }
        .wf-preview-card-icon.characters {
            background: #6366f1;
        }
        .wf-preview-card-icon.scenes {
            background: #6366f1;
        }
        .wf-preview-card-icon.summary {
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
        }
        .wf-preview-card-title {
            font-weight: 600;
            color: #1f2937;
            font-size: 13px;
        }
        .wf-preview-card-content {
            color: #6b7280;
            font-size: 12px;
            line-height: 1.6;
        }
        .wf-preview-tag {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 4px 10px;
            background: #fff;
            border: 1px solid var(--border);
            border-radius: 14px;
            font-size: 11px;
            color: #4b5563;
            margin: 3px;
        }
        /* 左右分栏 */
        .wf-two-column {
            display: grid;
            grid-template-columns: 380px 1fr;
            gap: 16px;
        }
        .wf-left-panel {
            background: var(--bg-hover);
            border-radius: 12px;
            padding: 14px;
            border: 1px solid var(--border);
            min-height: 280px;
            overflow-y: auto;
        }
        .wf-right-panel {
            display: flex;
            flex-direction: column;
            gap: 14px;
        }
        .wf-panel-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 12px;
        }
        .wf-panel-title {
            font-weight: 600;
            color: #1f2937;
            font-size: 13px;
        }
        /* 列表项 */
        .wf-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .wf-list-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px;
            background: #fff;
            border: 2px solid transparent;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .wf-list-item:hover {
            border-color: #e0e4ec;
            transform: translateX(4px);
        }
        .wf-list-item.active {
            border-color: #6366f1;
            background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
        }
        .wf-list-icon {
            width: 34px;
            height: 34px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            flex-shrink: 0;
        }
        .wf-list-icon.char {
            background: #6366f1;
            color: #fff;
        }
        .wf-list-icon.scene {
            background: #6366f1;
            color: #fff;
        }
        .wf-list-info {
            flex: 1;
            min-width: 0;
        }
        .wf-list-name {
            font-weight: 600;
            color: #1f2937;
            font-size: 12px;
        }
        .wf-list-sub {
            font-size: 10px;
            color: #9ca3af;
        }
        .wf-icon-btn {
            width: 24px;
            height: 24px;
            border: none;
            border-radius: 5px;
            background: transparent;
            color: #9ca3af;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
            font-size: 12px;
        }
        .wf-icon-btn:hover {
            background: #f3f4f6;
            color: #6b7280;
        }
        .wf-icon-btn.delete:hover {
            background: #fee2e2;
            color: #ef4444;
        }
        /* 表单项 */
        .wf-form-group {
            margin-bottom: 14px;
        }
        .wf-form-label {
            display: block;
            font-size: 12px;
            font-weight: 500;
            color: #374151;
            margin-bottom: 6px;
        }
        /* 上传区 */
        .wf-upload-zone {
            border: 2px dashed #d1d5db;
            border-radius: 10px;
            padding: 24px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            background: var(--bg-hover);
        }
        .wf-upload-zone:hover {
            border-color: #6366f1;
            background: rgba(102, 126, 234, 0.05);
        }
        .wf-upload-zone.dragover {
            border-color: #6366f1;
            background: rgba(102, 126, 234, 0.1);
        }
        .wf-upload-icon {
            font-size: 36px;
            margin-bottom: 8px;
        }
        .wf-upload-text {
            color: #6b7280;
            font-size: 12px;
        }
        .wf-upload-text strong {
            color: #6366f1;
        }
        /* 图片预览 */
        .wf-image-preview {
            position: relative;
            border-radius: 10px;
            overflow: hidden;
            background: #f3f4f6;
        }
        .wf-image-preview img {
            width: 100%;
            display: block;
        }
        .wf-image-preview-placeholder {
            padding: 40px;
            text-align: center;
            color: #9ca3af;
        }
        .wf-image-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 6px;
        }
        .wf-image-grid-item {
            aspect-ratio: 1;
            background: #f3f4f6;
            border-radius: 6px;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #9ca3af;
            font-size: 10px;
        }
        .wf-image-grid-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        /* 四宫格 */
        .wf-four-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 8px;
        }
        .wf-four-grid-item {
            background: #f3f4f6;
            border-radius: 8px;
            overflow: hidden;
        }
        .wf-four-grid-item .label {
            padding: 6px;
            text-align: center;
            font-size: 11px;
            color: #6b7280;
            background: #fff;
        }
        .wf-four-grid-item img,
        .wf-four-grid-item .placeholder {
            width: 100%;
            aspect-ratio: 1;
            object-fit: cover;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #9ca3af;
            font-size: 10px;
            background: #f3f4f6;
        }
        /* 信息框 */
        .wf-info-box {
            background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%);
            border: 1px solid rgba(102, 126, 234, 0.15);
            border-radius: 10px;
            padding: 14px;
            margin-bottom: 14px;
        }
        .wf-info-box-title {
            font-weight: 600;
            color: #6366f1;
            margin-bottom: 6px;
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 13px;
        }
        .wf-info-box-content {
            font-size: 12px;
            color: #6b7280;
            line-height: 1.6;
        }
        /* 表格 */
        .wf-table-container {
            overflow-x: auto;
            border-radius: 10px;
            border: 1px solid var(--border);
        }
        .wf-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 11px;
        }
        .wf-table th {
            background: #6366f1;
            color: #fff;
            padding: 10px 8px;
            text-align: left;
            font-weight: 600;
            white-space: nowrap;
        }
        .wf-table td {
            padding: 8px;
            border-bottom: 1px solid var(--border-light);
            background: #ffffff;
            vertical-align: top;
        }
        .wf-table tr:hover td {
            background: rgba(99,102,241,0.12);
        }
        .wf-table input,
        .wf-table textarea {
            width: 100%;
            padding: 5px;
            border: 1px solid var(--border);
            border-radius: 4px;
            font-size: 10px;
            background: var(--bg-hover);
        }
        .wf-table input:focus,
        .wf-table textarea:focus {
            outline: none;
            border-color: var(--primary);
            background: rgba(99,102,241,0.1);
        }
        /* 缩略图列表 */
        .wf-thumbnail-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
            max-height: 400px;
            overflow-y: auto;
        }
        .wf-thumbnail-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px;
            background: #fff;
            border: 2px solid transparent;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .wf-thumbnail-item:hover {
            border-color: #e0e4ec;
        }
        .wf-thumbnail-item.active {
            border-color: #f59e0b;
            background: linear-gradient(135deg, rgba(245, 158, 11, 0.05) 0%, rgba(217, 119, 6, 0.05) 100%);
        }
        .wf-thumbnail-num {
            width: 26px;
            height: 26px;
            border-radius: 6px;
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            font-size: 11px;
            flex-shrink: 0;
        }
        .wf-thumbnail-preview {
            width: 60px;
            height: 34px;
            background: #f3f4f6;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #9ca3af;
            font-size: 9px;
            overflow: hidden;
        }
        .wf-thumbnail-preview img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .wf-thumbnail-info {
            flex: 1;
            min-width: 0;
        }
        .wf-thumbnail-scene {
            font-size: 11px;
            color: #1f2937;
            font-weight: 500;
        }
        .wf-thumbnail-status {
            font-size: 9px;
            color: #9ca3af;
        }
        /* 进度条 */
        .wf-progress-bar {
            height: 5px;
            background: #e5e7eb;
            border-radius: 3px;
            overflow: hidden;
            margin: 8px 0;
        }
        .wf-progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #6366f1, #818cf8);
            border-radius: 3px;
            transition: width 0.3s ease;
        }
        /* 大图预览 */
        .wf-preview-large {
            background: #f3f4f6;
            border-radius: 10px;
            min-height: 200px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #9ca3af;
            overflow: hidden;
        }
        .wf-preview-large img {
            width: 100%;
            height: auto;
        }
        /* 视频列表 */
        .wf-video-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .wf-video-item {
            display: flex;
            gap: 12px;
            padding: 12px;
            background: #fff;
            border: 1px solid var(--border);
            border-radius: 10px;
            transition: all 0.3s ease;
        }
        .wf-video-item:hover {
            border-color: #6366f1;
            box-shadow: 0 4px 16px rgba(102, 126, 234, 0.1);
        }
        .wf-video-thumb {
            width: 100px;
            height: 56px;
            background: #1f2937;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            overflow: hidden;
            position: relative;
        }
        .wf-video-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .wf-video-thumb-placeholder {
            color: rgba(255, 255, 255, 0.5);
            font-size: 20px;
        }
        .wf-video-info {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .wf-video-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .wf-video-title {
            font-weight: 600;
            color: #1f2937;
            font-size: 12px;
        }
        .wf-video-duration {
            font-size: 10px;
            color: #6b7280;
            background: #f3f4f6;
            padding: 2px 6px;
            border-radius: 3px;
        }
        .wf-video-desc {
            font-size: 11px;
            color: #6b7280;
        }
        /* 底部按钮栏 */
        .wf-footer-bar {
            padding: 14px 0;
            background: transparent;
            border-top: none;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 16px;
            border-radius: 0;
        }
        .wf-footer-left,
        .wf-footer-right {
            display: flex;
            gap: 10px;
        }
        /* Toast */
        .wf-toast {
            position: fixed;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%) translateY(100px);
            background: #1f2937;
            color: #fff;
            padding: 12px 20px;
            border-radius: 8px;
            font-size: 13px;
            box-shadow: 0 10px 36px rgba(0, 0, 0, 0.2);
            transition: transform 0.3s ease;
            z-index: 1000;
        }
        .wf-toast.show {
            transform: translateX(-50%) translateY(0);
        }
        .wf-toast.success {
            background: #6366f1;
        }
        .wf-toast.error {
            background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
        }
        /* Loading */
        .wf-loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(255, 255, 255, 0.9);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 12px;
            z-index: 1000;
        }
        .wf-loading-spinner {
            width: 36px;
            height: 36px;
            border: 3px solid #e8ecf4;
            border-top-color: #6366f1;
            border-radius: 50%;
            animation: wfSpin 0.8s linear infinite;
        }
        @keyframes wfSpin {
            to { transform: rotate(360deg); }
        }
        .wf-loading-text {
            color: #6366f1;
            font-size: 13px;
            font-weight: 500;
        }
        /* ==================== 基因库样式 ==================== */
        .wf-gene-btn {
            background: #6366f1;
            color: #fff;
            box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
            padding: 6px 12px;
            font-size: 12px;
        }
        .wf-gene-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 6px 20px rgba(99, 102, 241, 0.5);
        }
        .wf-gene-add-btn {
            background: #6366f1;
            color: #fff;
            box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
            width: 100%;
            margin-top: 10px;
        }
        .wf-gene-add-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(99, 102, 241, 0.5);
        }
        .wf-gene-modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6);
            z-index: 9999;
            justify-content: center;
            align-items: center;
        }
        .wf-gene-modal-overlay.show {
            display: flex;
        }
        .wf-gene-modal {
            background: #fff;
            border-radius: 16px;
            width: 90%;
            max-width: 1400px;
            max-height: 85vh;
            display: flex;
            flex-direction: column;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            overflow: hidden;
        }
        .wf-gene-modal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 20px 24px;
            background: #6366f1;
            color: #fff;
        }
        .wf-gene-modal-title {
            font-size: 18px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .wf-gene-modal-close {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            border: none;
            background: rgba(255, 255, 255, 0.2);
            color: #fff;
            font-size: 18px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }
        .wf-gene-modal-close:hover {
            background: rgba(255, 255, 255, 0.3);
        }
        .wf-gene-modal-body {
            padding: 24px;
            overflow-y: auto;
            flex: 1;
        }
        .wf-gene-empty {
            text-align: center;
            padding: 60px 20px;
            color: #9ca3af;
        }
        .wf-gene-empty-icon {
            font-size: 64px;
            margin-bottom: 16px;
        }
        .wf-gene-empty-text {
            font-size: 16px;
            margin-bottom: 8px;
        }
        .wf-gene-empty-sub {
            font-size: 13px;
        }
        .wf-gene-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 16px;
        }
        /* ==================== 基因库卡片图片缩略图（可预览） ==================== */
        .wf-gene-card {
            background: var(--bg-hover);
            border: 2px solid #e8ecf4;
            border-radius: 12px;
            padding: 12px;
            transition: all 0.3s ease;
            max-width: 280px;
        }
        .wf-gene-card:hover {
            border-color: #6366f1;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
        }
        .wf-gene-card-preview {
            width: 100%;
            height: 120px;
            background: #fff;
            border-radius: 8px;
            overflow: hidden;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid var(--border);
        }
        .wf-gene-card-preview img {
            max-width: 100%;
            max-height: 120px;
            object-fit: contain;
            cursor: pointer;
            transition: transform 0.2s;
        }
        .wf-gene-card-preview img:hover {
            transform: scale(1.05);
        }
        .wf-gene-card-preview-placeholder {
            font-size: 36px;
            color: #d1d5db;
        }
        .wf-gene-card-name {
            font-size: 13px;
            font-weight: 600;
            color: #1f2937;
            margin-bottom: 4px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .wf-gene-card-date {
            font-size: 10px;
            color: #9ca3af;
            margin-bottom: 8px;
        }
        .wf-gene-card-actions {
            display: flex;
            gap: 6px;
        }
        .wf-gene-card-btn {
            flex: 1;
            padding: 6px 10px;
            border: none;
            border-radius: 6px;
            font-size: 11px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 3px;
        }
        .wf-gene-card-import {
            background: #6366f1;
            color: #fff;
        }
        .wf-gene-card-import:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
        }
        .wf-gene-card-delete {
            background: #fee2e2;
            color: #dc2626;
        }
        .wf-gene-card-delete:hover {
            background: #fecaca;
        }
        .wf-gene-threeview-strip {
            display: flex;
            gap: 3px;
            margin-top: 6px;
        }
        .wf-gene-threeview-strip img {
            flex: 1;
            height: 40px;
            object-fit: cover;
            border-radius: 4px;
            border: 1px solid var(--border);
        }
        .wf-confirm-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6);
            z-index: 10001;
            justify-content: center;
            align-items: center;
        }
        .wf-confirm-modal.show {
            display: flex;
        }
        .wf-confirm-box {
            background: #fff;
            border-radius: 16px;
            padding: 28px;
            max-width: 400px;
            width: 90%;
            text-align: center;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
        }
        .wf-confirm-icon {
            font-size: 48px;
            margin-bottom: 16px;
        }
        .wf-confirm-title {
            font-size: 18px;
            font-weight: 600;
            color: #1f2937;
            margin-bottom: 8px;
        }
        .wf-confirm-text {
            font-size: 14px;
            color: #6b7280;
            margin-bottom: 24px;
        }
        .wf-confirm-actions {
            display: flex;
            gap: 12px;
            justify-content: center;
        }
        .wf-confirm-btn {
            padding: 10px 24px;
            border: none;
            border-radius: 8px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .wf-confirm-cancel {
            background: #f3f4f6;
            color: #4b5563;
        }
        .wf-confirm-cancel:hover {
            background: #e5e7eb;
        }
        .wf-confirm-ok {
            background: #6366f1;
            color: #fff;
        }
        .wf-confirm-ok:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
        }
        /* ==================== 基因库Tab样式 ==================== */
        .wf-gene-tabs {
            display: flex;
            gap: 4px;
            padding: 4px;
            background: #f3f4f6;
            border-radius: 10px;
            margin-bottom: 20px;
        }
        .wf-gene-tab {
            flex: 1;
            padding: 10px 20px;
            border: none;
            background: transparent;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            color: #6b7280;
        }
        .wf-gene-tab.active {
            background: #fff;
            color: #6366f1;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
        .wf-gene-tab:hover:not(.active) {
            color: #374151;
        }
        .wf-gene-tab-icon {
            margin-right: 6px;
        }
        /* ==================== 基因库场景卡片 ==================== */
        .wf-gene-card.scene-card .wf-gene-card-preview {
            height: 120px;
        }
        .wf-gene-card.scene-card .wf-gene-card-preview-placeholder {
            font-size: 32px;
        }
        .wf-gene-fourview-strip {
            display: flex;
            gap: 3px;
            margin-top: 6px;
        }
        .wf-gene-fourview-strip img {
            flex: 1;
            height: 40px;
            object-fit: cover;
            border-radius: 4px;
            border: 1px solid var(--border);
        }
        /* ==================== 手动上传区域样式 ==================== */
        .wf-gene-upload-section {
            margin-bottom: 16px;
        }
        .wf-gene-upload-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 16px;
            background: #6366f1;
            color: #fff;
            border: none;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .wf-gene-upload-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
        }
        .wf-gene-upload-form {
            background: var(--bg-hover);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 16px;
            margin-top: 12px;
        }
        .wf-gene-form-title {
            font-size: 14px;
            font-weight: 600;
            color: #1f2937;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .wf-gene-form-close {
            width: 24px;
            height: 24px;
            border: none;
            background: #f3f4f6;
            border-radius: 6px;
            font-size: 14px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #6b7280;
        }
        .wf-gene-form-close:hover {
            background: #e5e7eb;
            color: #374151;
        }
        .wf-gene-form-row {
            margin-bottom: 12px;
        }
        .wf-gene-form-label {
            display: block;
            font-size: 12px;
            font-weight: 500;
            color: #4b5563;
            margin-bottom: 6px;
        }
        .wf-gene-form-input {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #d1d5db;
            border-radius: 6px;
            font-size: 13px;
            transition: border-color 0.2s;
        }
        .wf-gene-form-input:focus {
            outline: none;
            border-color: #6366f1;
        }
        .wf-gene-upload-zone {
            border: 2px dashed #d1d5db;
            border-radius: 8px;
            padding: 16px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            background: #fff;
        }
        .wf-gene-upload-zone:hover {
            border-color: #6366f1;
            background: rgba(102, 126, 234, 0.03);
        }
        .wf-gene-upload-zone.dragover {
            border-color: #6366f1;
            background: rgba(102, 126, 234, 0.08);
        }
        .wf-gene-upload-icon {
            font-size: 28px;
            margin-bottom: 8px;
        }
        .wf-gene-upload-text {
            font-size: 12px;
            color: #6b7280;
        }
        .wf-gene-upload-text strong {
            color: #6366f1;
        }
        .wf-gene-upload-hint {
            font-size: 11px;
            color: #9ca3af;
            margin-top: 4px;
        }
        .wf-gene-upload-preview {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 12px;
        }
        .wf-gene-upload-preview-item {
            position: relative;
            width: 60px;
            height: 60px;
            border-radius: 6px;
            overflow: hidden;
            border: 1px solid var(--border);
        }
        .wf-gene-upload-preview-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .wf-gene-upload-preview-item .wf-gene-preview-delete {
            position: absolute;
            top: 2px;
            right: 2px;
            width: 18px;
            height: 18px;
            border: none;
            background: rgba(0, 0, 0, 0.6);
            color: #fff;
            border-radius: 50%;
            font-size: 12px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
        }
        .wf-gene-upload-preview-item .wf-gene-preview-delete:hover {
            background: rgba(220, 38, 38, 0.8);
        }
        .wf-gene-upload-preview-item.main-image .wf-gene-preview-badge {
            position: absolute;
            bottom: 2px;
            left: 2px;
            background: #6366f1;
            color: #fff;
            font-size: 8px;
            padding: 1px 4px;
            border-radius: 3px;
        }
        .wf-gene-form-actions {
            display: flex;
            gap: 8px;
            margin-top: 16px;
        }
        .wf-gene-form-save {
            flex: 1;
            padding: 10px 16px;
            background: #6366f1;
            color: #fff;
            border: none;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .wf-gene-form-save:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
        }
        .wf-gene-form-save:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }
        .wf-gene-form-cancel {
            padding: 10px 16px;
            background: #f3f4f6;
            color: #4b5563;
            border: none;
            border-radius: 8px;
            font-size: 13px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .wf-gene-form-cancel:hover {
            background: #e5e7eb;
        }
        /* ==================== 步骤5基因库参考图功能 ==================== */
        .wf-gene-ref-section {
            background: var(--bg-hover);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 16px;
            margin-bottom: 16px;
        }
        .wf-gene-ref-title {
            font-size: 13px;
            font-weight: 600;
            color: #1f2937;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .wf-gene-ref-list {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 12px;
        }
        .wf-gene-ref-item {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 6px 10px;
            background: #fff;
            border: 1px solid var(--border);
            border-radius: 6px;
            font-size: 12px;
        }
        .wf-gene-ref-item img {
            width: 24px;
            height: 24px;
            border-radius: 4px;
            object-fit: cover;
        }
        .wf-gene-ref-badge {
            background: #6366f1;
            color: #fff;
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 10px;
        }
        .wf-gene-ref-badge.warning {
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
        }
        /* ==================== 步骤6分镜表功能 ==================== */
        .wf-storyboard-table-preview {
            background: #fff;
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 20px;
            margin-top: 16px;
        }
        .wf-storyboard-table-preview img {
            width: 100%;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
        .wf-storyboard-table-actions {
            display: flex;
            gap: 10px;
            margin-top: 12px;
            justify-content: center;
        }
        /* ==================== 手风琴折叠 ==================== */
        .wf-step-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 16px 24px;
            background: var(--bg-card);
            border: 1px solid var(--border-light);
            border-radius: var(--radius-lg);
            margin-bottom: 8px;
            cursor: pointer;
            transition: var(--transition);
            user-select: none;
        }
        .wf-step-header:hover {
            background: var(--bg-hover);
            box-shadow: var(--shadow-sm);
        }
        .wf-step-header.active {
            background: rgba(99,102,241,0.05);
            border-color: #6366f1;
            border-left: 3px solid #6366f1;
            box-shadow: var(--shadow-sm);
        }
        .wf-step-header .step-title {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 15px;
            font-weight: 600;
            color: var(--text);
        }
        .wf-step-header .step-number {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: #d1d5db;
            color: #6b7280;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            font-weight: 700;
            transition: var(--transition);
        }
        .wf-step-header.active .step-number {
            background: #6366f1;
            color: white;
        }
        .wf-step-header .step-arrow {
            font-size: 12px;
            color: var(--text-muted);
            transition: transform 0.3s ease;
        }
        .wf-step-header.active .step-arrow {
            transform: rotate(180deg);
            color: var(--primary);
        }
        /* 手风琴内容区 — 默认隐藏，使用display切换 */
        .wf-step-content {
            display: none;
        }
        .wf-step-content.active {
            display: block;
        }
        
        /* 旧手风琴已删除，此规则已移除 */
        /* 顶栏样式（保留备用） */
        .top-bar {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 8px;
        }
        .top-bar-label {
            font-size: 12px;
            color: var(--text-secondary);
            white-space: nowrap;
        }
        .top-bar input[type="password"] {
            flex: 0 1 280px;
            padding: 6px 10px;
            font-size: 12px;
        }
        /* 隐藏的api-config */
        .api-config.collapsed {
            display: none !important;
        }
        /* ========== 工具箱图标卡片布局 ========== */
        .tool-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
            width: 140px;
            min-width: 140px;
        }
        .tool-icon-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            padding: 16px 12px;
            background: var(--bg-card);
            border: 1px solid var(--border-light);
            border-radius: var(--radius-md);
            cursor: pointer;
            transition: var(--transition);
        }
        .tool-icon-card:hover {
            border-color: var(--primary-light);
            background: rgba(99,102,241,0.05);
        }
        .tool-icon-card.active {
            border-color: var(--primary);
            background: rgba(99,102,241,0.08);
            box-shadow: 0 0 0 2px rgba(99,102,241,0.15);
        }
        .tool-icon {
            font-size: 28px;
        }
        .tool-name {
            font-size: 12px;
            color: var(--text-secondary);
            font-weight: 500;
        }
        .tool-icon-card.active .tool-name {
            color: var(--primary);
            font-weight: 600;
        }
        .tool-panel {
            flex:1;
            display:flex;
        }
        .tool-panel-content {
            background: var(--bg-card);
            border-radius: var(--radius-lg);
            padding: 24px 48px;
            border: 1px solid var(--border-light);
            width:100%;
        }
        /* ========== 图片预览遮罩 ========== */
        .img-preview-overlay {
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.85);
            z-index: 100000;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }
        .img-preview-overlay img {
            max-width: 90vw;
            max-height: 90vh;
            border-radius: 8px;
            box-shadow: 0 0 40px rgba(0,0,0,0.5);
        }
        /* ========== 图片操作按钮组 ========== */
        .img-actions {
            display: flex;
            gap: 8px;
            margin-top: 8px;
            flex-wrap: wrap;
        }
        .img-action-btn {
            padding: 4px 12px;
            background: rgba(99,102,241,0.15);
            border: 1px solid rgba(99,102,241,0.3);
            border-radius: 6px;
            color: var(--text-secondary);
            font-size: 12px;
            cursor: pointer;
            transition: all 0.2s;
        }
        .img-action-btn:hover {
            background: rgba(99,102,241,0.3);
            color: var(--text);
        }
    
        /* ========== 背景层 - 深色主题 ========== */
        .app-bg-layer {
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            z-index: -2;
            background: #f7f8fa;
        }
        .app-bg-image {
            display: none;
        }
        /* 登录后深色背景 */
        body.app-logged-in .app-bg-image {
            display: none;
        }
        body.app-logged-in .app-bg-layer {
            background: #f7f8fa;
        }
/* ========== 深色面板 ========== */
        .glass-panel {
            background: transparent;
            border: none;
            padding: var(--space-lg);
            margin-bottom: var(--space-lg);
        }
        
        /* ========== AI一键Agent占位页 ========== */
        .agent-placeholder {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 60vh;
            text-align: center;
        }
        .agent-placeholder-icon {
            font-size: 80px;
            margin-bottom: 24px;
        }
        .agent-placeholder-title {
            font-size: 32px;
            font-weight: 800;
            background: linear-gradient(135deg, #6366f1, #8b5cf6, #a855f7);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 12px;
            animation: hm-fadeInUp 0.6s ease-out;
        }
        .agent-placeholder-desc {
            font-size: 16px;
            color: var(--text-secondary);
            max-width: 400px;
        }
/* 音色库样式 */
.wf-voice-cat-btn {
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid rgba(99, 102, 241, 0.2);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 11px;
    transition: all 0.2s;
}
.wf-voice-cat-btn.active {
    background: rgba(99, 102, 241, 0.2);
    color: #818cf8;
    border-color: rgba(99, 102, 241, 0.5);
}
.wf-voice-cat-btn:hover {
    background: rgba(99, 102, 241, 0.1);
}

/* === 新3页面工作区（毛玻璃升级版） === */
.wf-page { display:none; height:100%; overflow:hidden; padding:0; flex-direction:column; }
.wf-page.active { display:flex; animation:hm-fadeInUp 0.4s ease-out; }
.wf-page-content-wrap { flex:1; overflow-y:auto; padding:20px 16px 16px; min-height:0; }
.wf-top-nav { display:flex; align-items:center; justify-content:space-between; padding:12px 0; margin-bottom:20px; border:none; background:transparent; box-shadow:none; position:relative; }
.wf-nav-steps { display:flex; align-items:center; gap:6px; }
.wf-nav-step { font-size:14px; color:var(--text-muted); cursor:pointer; padding:6px 14px; border-radius:var(--radius-md); transition:all 0.25s; }
.wf-nav-step:hover { background:var(--primary-50); color:var(--primary); }
.wf-nav-step.active { color:var(--primary); font-weight:700; background:linear-gradient(135deg, rgba(99,102,241,0.12), rgba(139,92,246,0.08)); box-shadow:0 0 0 1px rgba(99,102,241,0.15) inset; }
.wf-nav-arrow { color:var(--text-muted); font-size:14px; }
.wf-script-formatted { line-height:1.8; font-size:14px; color:var(--text); }
.wf-script-formatted .scene-title { font-weight:700; font-size:15px; margin:16px 0 8px; padding:6px 0; border-bottom:1px solid var(--border-light); color:var(--text); }
.wf-script-formatted .char-name { font-weight:600; color:var(--primary); }
.wf-script-formatted .stage-direction { background:var(--bg-subtle); padding:8px 12px; border-radius:var(--radius-md); margin:6px 0; font-size:13px; color:var(--text-secondary); border:1px solid var(--border-light); }
.wf-asset-card { background:#ffffff; border-radius:var(--radius-lg); border:1px solid #eef0f4; overflow:hidden; cursor:pointer; transition:all 0.3s; box-shadow:0 1px 3px rgba(0,0,0,0.04); position:relative; width:100%; height:100%; box-sizing:border-box; display:flex; flex-direction:column; }
.wf-asset-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-hover); border-color:rgba(99,102,241,0.2); }
.wf-asset-card .card-img { flex:1; min-height:0; background:var(--bg-subtle); display:flex; align-items:center; justify-content:center; color:var(--text-muted); font-size:13px; overflow:hidden; }
.wf-asset-card .card-body { padding:12px 14px; }
.wf-asset-card .card-title { font-size:14px; font-weight:600; color:var(--text); }
.wf-asset-card .card-tag { display:inline-block; padding:2px 8px; border-radius:var(--radius-sm); font-size:11px; background:var(--bg-subtle); color:var(--text-secondary); margin-top:4px; border:1px solid var(--border-light); }
.wf-asset-card .card-edit { position:absolute; top:8px; right:8px; width:28px; height:28px; border-radius:50%; background:rgba(30,30,46,0.9); display:flex; align-items:center; justify-content:center; font-size:13px; cursor:pointer; opacity:0; transition:opacity 0.2s; z-index:2; }
.wf-asset-card:hover .card-edit { opacity:1; }
.card-delete { position:absolute; top:8px; right:42px; width:28px; height:28px; border-radius:50%; background:rgba(220,53,69,0.9); display:flex; align-items:center; justify-content:center; font-size:13px; cursor:pointer; opacity:0; transition:opacity 0.2s; z-index:2; }
.wf-asset-card:hover .card-delete { opacity:1; }
.wf-episode-sidebar { width:180px; min-width:180px; border-right:1px solid var(--border-light); background:#ffffff; padding:12px 0; overflow-y:auto; }
.wf-episode-item { padding:10px 16px; cursor:pointer; font-size:13px; color:var(--text); border-left:3px solid transparent; transition:all 0.2s; }
.wf-episode-item:hover { background:var(--primary-50); }
.wf-episode-item.active { border-left-color:var(--primary); background:linear-gradient(90deg, rgba(99,102,241,0.08), transparent); color:var(--primary); font-weight:600; }
/* 长篇剧本步骤1：左右布局 */
.wf-longscript-ep-item { padding:10px 12px; cursor:pointer; font-size:13px; color:var(--text); border-left:3px solid transparent; transition:all 0.2s; border-radius:0 6px 6px 0; margin-bottom:4px; }
.wf-longscript-ep-item:hover { background:var(--primary-50); }
.wf-longscript-ep-item.active { border-left-color:var(--primary); background:rgba(99,102,241,0.08); color:var(--primary); font-weight:600; }
.wf-longscript-ep-title { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* 不确定进度条动画（分集拆解overview阶段） */
@keyframes wf-progress-indeterminate {
  0% { width:10%; margin-left:0; }
  50% { width:40%; margin-left:30%; }
  100% { width:10%; margin-left:90%; }
}
.wf-extract-card { display:flex; flex-direction:column; padding:16px; background:#ffffff; border:1px solid var(--border); border-radius:var(--radius-lg); cursor:pointer; transition:all 0.3s; width:100%; height:100%; box-sizing:border-box; }
.wf-extract-card:hover { border-color:rgba(99,102,241,0.3); box-shadow:var(--shadow-hover), 0 0 16px rgba(99,102,241,0.1); transform:translateY(-3px); }
.wf-extract-card .avatar { width:100%; height:auto; aspect-ratio:1; border-radius:var(--radius-md); background:var(--bg-subtle); display:flex; align-items:center; justify-content:center; font-size:36px; margin-bottom:12px; overflow:hidden; flex-shrink:0; border:1px solid var(--border-light); }
.wf-extract-card .avatar img { width:100%; height:100%; object-fit:cover; }
.wf-extract-card .card-name { font-size:18px; font-weight:600; color:var(--text); margin-bottom:8px; }
.wf-extract-card .card-desc { flex:1; min-height:0; display:flex; align-items:stretch; }
.wf-add-card { background:#ffffff; border-radius:var(--radius-lg); border:2px dashed var(--border); cursor:pointer; transition:all 0.3s; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:220px; }
.wf-add-card:hover { border-color:var(--primary); background:var(--primary-50); box-shadow:0 0 16px rgba(99,102,241,0.08); }
.wf-add-card-icon { font-size:28px; color:var(--primary); margin-bottom:6px; }
.wf-add-card-text { font-size:13px; color:var(--text-secondary); font-weight:500; }
.wf-asset-tab { padding:8px 20px; border-radius:var(--radius-full); font-size:14px; font-weight:600; cursor:pointer; border:1px solid transparent; transition:all 0.25s; }
.wf-asset-tab.active { background:linear-gradient(135deg, #4f56e8, #6366f1); color:#fff; border-color:transparent; box-shadow:0 2px 12px rgba(79,86,232,0.4); }
.wf-asset-tab:not(.active) { background:var(--bg-subtle); color:var(--text-secondary); border:1px solid var(--border-light); }
.wf-page-bottom { display:flex; justify-content:space-between; align-items:center; padding:14px 20px; flex-shrink:0; border-radius:var(--radius-lg); border:1px solid var(--border-light); background:rgba(255,255,255,0.95); backdrop-filter:blur(12px); box-shadow:0 -4px 20px rgba(0,0,0,0.08); z-index:50; margin:8px 0 0; }
@keyframes wfPulseProgress { 0%{width:30%;opacity:0.6} 50%{width:80%;opacity:1} 100%{width:30%;opacity:0.6} }

/* ========== 生成页新UI（方案4：卡片化Tab） ========== */
.hm-gen-tab-bar{display:flex;gap:0;padding:5px;background:#ffffff;border-radius:14px;border:3px solid #c0c5d8;box-shadow:0 2px 12px rgba(0,0,0,0.06);margin-bottom:32px;width:fit-content}
.hm-gen-tab{padding:14px 36px;border-radius:10px;border:none;font-size:15px;font-weight:600;cursor:pointer;transition:all .25s;display:flex;align-items:center;gap:8px;background:transparent;color:#64748b;position:relative}
.hm-gen-tab.on{background:#6366f1;color:#ffffff;box-shadow:0 2px 8px rgba(99,102,241,0.3)}
.hm-gen-tab.off{background:transparent;color:#64748b}
.hm-gen-tab.off:hover{background:#f1f3fb;color:#6366f1}
.hm-gen-card{width:100%;border:2px solid #c0c5d8;border-radius:14px;background:#ffffff;box-shadow:0 2px 12px rgba(0,0,0,0.04)}
.hm-gen-card:hover{box-shadow:var(--shadow-hover);border-color:rgba(99,102,241,0.2)}
.hm-ref-bar{padding:12px 28px 0;display:flex;align-items:center;gap:10px}
.hm-ref-label{font-size:13px;color:var(--text-secondary);flex-shrink:0;white-space:nowrap}
.hm-ref-scroll{display:flex;gap:8px;overflow-x:auto;flex:1;padding:2px 0}
.hm-ref-scroll::-webkit-scrollbar{height:4px}
.hm-ref-scroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.hm-ref-thumb{width:80px;height:80px;border-radius:var(--radius-md);border:1.5px solid var(--border);overflow:hidden;position:relative;flex-shrink:0;cursor:default;transition:border-color 0.2s}
.hm-ref-thumb:hover{border-color:rgba(99,102,241,0.3)}
.hm-ref-thumb img{width:100%;height:100%;object-fit:cover}
.hm-ref-thumb .x{position:absolute;top:-6px;right:-6px;width:18px;height:18px;background:#ef4444;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;font-size:11px;font-weight:700;line-height:1;border:2px solid #fff;z-index:2}
.hm-ref-thumb .x:hover{background:#dc2626}
.hm-ref-add{width:80px;height:80px;border:1.5px dashed var(--border);border-radius:var(--radius-md);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;color:var(--text-muted);flex-shrink:0;gap:2px;background:var(--bg-subtle);transition:all .25s}
.hm-ref-add:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-50)}
.hm-ref-add svg{width:36px;height:36px}
.hm-ref-add span{font-size:13px}
.hm-ref-count{font-size:11px;color:var(--text-muted);flex-shrink:0}
.hm-chip{padding:7px 16px;border-radius:var(--radius-md);font-size:13px;font-weight:500;color:var(--text-secondary);background:var(--bg-subtle);border:1px solid var(--border-light);cursor:pointer;transition:all .2s;-webkit-appearance:none;appearance:none;outline:none}
.hm-chip:hover{background:var(--primary-50);color:var(--primary);border-color:rgba(99,102,241,0.15)}
.hm-chip.on,.hm-chip:focus{background:var(--primary-50);color:var(--primary);border-color:rgba(99,102,241,0.3);box-shadow:0 0 0 2px rgba(99,102,241,0.15) inset}
.hm-gen-foot{display:flex;align-items:center;padding:12px 28px 24px;gap:8px;flex-wrap:wrap}
.hm-credits-hint{font-size:11px;color:var(--primary);background:var(--primary-50);padding:2px 8px;border-radius:var(--radius-sm);white-space:nowrap;border:1px solid rgba(99,102,241,0.1)}
.hm-gen-btn{padding:9px 28px;background:linear-gradient(135deg, var(--primary), var(--primary-light));color:#fff;border:none;border-radius:var(--radius-md);font-size:15px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px;box-shadow:0 2px 12px rgba(99,102,241,0.3);transition:all .25s}
.hm-gen-btn:hover{box-shadow:0 4px 20px rgba(99,102,241,0.45);transform:translateY(-1px)}
.hm-ref-strength{padding:4px 28px 0;display:flex;align-items:center;gap:8px}
.hm-ref-strength label{font-size:12px;color:var(--text-secondary);white-space:nowrap}
.hm-ref-strength input[type=range]{flex:1;max-width:120px}
.hm-ref-strength .val{font-size:12px;color:var(--text);font-weight:600;min-width:30px}
.hm-ref-empty{width:80px;height:80px;border:1.5px dashed var(--primary);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--primary);flex-shrink:0;background:var(--primary-50);transition:all .25s}
.hm-ref-empty:hover{background:rgba(99,102,241,0.12);box-shadow:0 0 12px rgba(99,102,241,0.1)}
.hm-ref-empty svg{width:40px;height:40px}

        .wf-extract-card, .wf-asset-card { aspect-ratio: 2/3; }
        

        /* === 顶部栏 === */
        .app-top-bar {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            padding: 10px 28px;
            gap: 12px;
            position: sticky;
            top: 0;
            z-index: 50;
            background: #f5f6fa;
        }
        .app-top-bar::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 5%;
            right: 5%;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(99,102,241,0.2), rgba(139,92,246,0.15), transparent);
        }
        .credit-pill {
            display: inline-flex;
            align-items: center;
            padding: 6px 6px 6px 14px;
            background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(139,92,246,0.05));
            border-radius: 24px;
            font-size: 13px;
            font-weight: 600;
            color: var(--text);
            cursor: pointer;
            position: relative;
            transition: all 0.25s;
            border: 1px solid var(--border);
            gap: 0;
            user-select: none;
            box-shadow: var(--shadow-sm);
        }
        .credit-pill:hover {
            background: linear-gradient(135deg, rgba(99,102,241,0.14), rgba(139,92,246,0.09));
            border-color: var(--primary-light);
            box-shadow: var(--shadow-md);
        }
        .credit-pill-count {
            font-weight: 700;
            font-size: 14px;
            letter-spacing: -0.01em;
        }
        .credit-pill-divider {
            width: 1px;
            height: 16px;
            background: var(--border);
            margin: 0 10px;
        }
        .credit-pill-label {
            color: #4f56e8;
            font-size: 13px;
            font-weight: 600;
            padding-right: 8px;
            transition: color 0.2s;
        }
        .credit-pill:hover .credit-pill-label {
            color: #4338ca;
        }
        /* 下拉面板 */
        .credits-dropdown {
            display: none;
            position: absolute;
            top: calc(100% + 8px);
            right: 0;
            width: 320px;
            background: var(--bg-card-solid);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-lg);
            border: 1px solid var(--border);
            z-index: 1000;
            overflow: hidden;
            animation: hm-fadeInUp 0.25s ease-out;
        }
        .credits-dropdown.show { display: block; }
        .credits-dropdown-header {
            padding: 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid var(--border-light);
        }
        .credits-dropdown-balance {
            font-size: 28px;
            font-weight: 700;
            color: var(--text);
        }
        .credits-dropdown-balance span {
            font-size: 13px;
            font-weight: 400;
            color: var(--text-muted);
            margin-left: 4px;
        }
        .credits-dropdown-header .mini-recharge-btn {
            padding: 8px 14px;
            background: linear-gradient(135deg, #4f56e8, #6366f1);
            color: #fff !important;
            border: none;
            border-radius: var(--radius-md);
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.25s;
            white-space: nowrap;
            box-shadow: 0 2px 12px rgba(79,86,232,0.4);
        }
        .credits-dropdown-header .mini-recharge-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 16px rgba(79,86,232,0.5);
            background: linear-gradient(135deg, #4338ca, #4f56e8);
        }
        .credits-dropdown-logs {
            padding: 12px 20px 16px;
            max-height: 260px;
            overflow-y: auto;
        }
        .credits-dropdown-logs-title {
            font-size: 13px;
            font-weight: 600;
            color: var(--text-secondary);
            margin-bottom: 10px;
        }
        .credits-log-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 8px 0;
            border-bottom: 1px solid var(--border-light);
            font-size: 12px;
        }
        .credits-log-item:last-child { border-bottom: none; }
        .credits-log-time {
            color: var(--text-muted);
            flex-shrink: 0;
        }
        .credits-log-desc {
            color: var(--text);
            flex: 1;
            margin-left: 12px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .credits-log-amount {
            font-weight: 600;
            flex-shrink: 0;
            margin-left: 8px;
        }
        .credits-log-amount.plus { color: #10b981; }
        .credits-log-amount.minus { color: #ef4444; }
        .credits-dropdown-empty {
            padding: 24px 20px;
            text-align: center;
            color: var(--text-muted);
            font-size: 13px;
        }
        .credits-dropdown-footer {
            padding: 10px 20px;
            border-top: 1px solid var(--border-light);
            text-align: center;
        }
        .credits-dropdown-footer a {
            font-size: 12px;
            color: var(--primary);
            cursor: pointer;
            text-decoration: none;
            transition: color 0.2s;
        }
        .credits-dropdown-footer a:hover {
            color: var(--primary-light);
            text-decoration: underline;
        }

        /* === 用户头像弹出卡片 — 毛玻璃 === */
        .user-avatar-wrapper {
            position: relative;
            margin-bottom: 8px;
            display: flex;
            justify-content: center;
        }
        .user-avatar-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: var(--bg-subtle);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: var(--text-secondary);
            transition: all 0.25s;
            border: 2px solid var(--border);
        }
        .user-avatar-icon:hover {
            background: rgba(99,102,241,0.1);
            color: var(--primary);
            border-color: rgba(99,102,241,0.4);
            transform: scale(1.05);
            box-shadow: 0 0 12px rgba(99,102,241,0.2);
        }
        .user-popup-card {
            display: none;
            position: fixed;
            width: 220px;
            background: #ffffff;
            border-radius: var(--radius-lg);
            box-shadow: 0 8px 24px rgba(0,0,0,0.12);
            border: 1px solid #eef0f4;
            z-index: 99999;
            overflow: hidden;
            padding: 8px 0;
            animation: hm-fadeInUp 0.25s ease-out;
        }
        .user-popup-card.show { display: block; }
        .user-popup-header {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 16px;
        }
        .user-popup-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: var(--bg-subtle);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .user-popup-info {
            flex: 1;
            min-width: 0;
        }
        .user-popup-name {
            font-size: 14px;
            font-weight: 600;
            color: var(--text);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .user-popup-uid {
            font-size: 11px;
            color: var(--text-muted);
            margin-top: 2px;
        }
        .user-popup-divider {
            height: 1px;
            background: var(--border-light);
            margin: 4px 0;
        }
        .user-popup-storage {
            padding: 8px 14px 10px;
        }
        .user-popup-storage-header {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            margin-bottom: 6px;
        }
        .user-popup-storage-label {
            font-size: 11px;
            color: var(--text-muted);
        }
        .user-popup-storage-value {
            font-size: 11px;
            color: var(--primary);
            font-weight: 500;
        }
        .user-popup-storage-bar-bg {
            height: 6px;
            background: var(--bg-subtle);
            border-radius: 3px;
            overflow: hidden;
        }
        .user-popup-storage-bar {
            height: 100%;
            background: var(--gradient-primary);
            border-radius: 3px;
            width: 0;
            transition: width 0.4s ease;
        }
        .user-popup-storage-bar.warn {
            background: linear-gradient(90deg, #f59e0b, #ef4444);
        }
        .user-popup-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 9px 16px;
            font-size: 13px;
            color: var(--text-secondary);
            cursor: pointer;
            transition: background 0.2s;
        }
        .user-popup-item:hover {
            background: var(--bg-hover);
        }
        .user-popup-item span:first-child {
            font-size: 15px;
            width: 20px;
            text-align: center;
        }
        .user-popup-logout {
            color: #ef4444;
        }
        .user-popup-logout:hover {
            background: rgba(239,68,68,0.08);
        }

        /* ========== 暗色模式 ========== */
        [data-theme="dark"] {
          --bg: #0a0b14;
          --bg-subtle: #12131f;
          --bg-card: rgba(22,23,38,0.85);
          --bg-input: #1a1b2e;
          --bg-hover: rgba(99,102,241,0.08);
          --bg-elevated: rgba(30,31,50,0.9);
          --border: rgba(255,255,255,0.06);
          --border-light: rgba(255,255,255,0.04);
          --border-focus: var(--primary-light);
          --text: #e8e8ed;
          --text-secondary: #a1a1b5;
          --text-muted: #6b6b80;
          --text-inverse: #0a0b14;
          --glass-bg: rgba(22,23,38,0.75);
          --glass-border: rgba(255,255,255,0.08);
          --shadow-xs: 0 1px 2px rgba(0,0,0,0.3);
          --shadow-sm: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
          --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.5), 0 2px 4px -2px rgba(0,0,0,0.4);
          --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.5), 0 4px 6px -4px rgba(0,0,0,0.4);
          --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.6), 0 8px 10px -6px rgba(0,0,0,0.5);
          --shadow-hover: 0 8px 20px -4px rgba(0,0,0,0.6), 0 4px 8px -2px rgba(0,0,0,0.4);
          --shadow-glow: 0 0 24px rgba(99,102,241,0.3);
          --shadow-glow-strong: 0 4px 28px rgba(99,102,241,0.45);
        }
        [data-theme="dark"] body,
        [data-theme="dark"] {
          background: var(--bg);
        }
        /* 暗色模式光晕更亮 */
        [data-theme="dark"] .hm-glow-orb-1 {
          background: radial-gradient(circle, rgba(99,102,241,0.28), transparent 70%);
          opacity: 0.6;
        }
        [data-theme="dark"] .hm-glow-orb-2 {
          background: radial-gradient(circle, rgba(139,92,246,0.22), transparent 70%);
          opacity: 0.55;
        }
        [data-theme="dark"] .hm-glow-orb-3 {
          background: radial-gradient(circle, rgba(168,85,247,0.18), transparent 70%);
          opacity: 0.5;
        }
        [data-theme="dark"] .sidebar {
          background: #0f101c;
          border-color: rgba(255,255,255,0.06);
          box-shadow: none;
        }
        [data-theme="dark"] .sidebar-logo {
          color: var(--text);
          border-color: rgba(255,255,255,0.06);
        }
        [data-theme="dark"] .sidebar-bottom {
          border-color: rgba(255,255,255,0.06);
        }
        [data-theme="dark"] .sidebar-bottom input {
          background: var(--bg-input);
          border-color: var(--border);
          color: var(--text);
        }
        [data-theme="dark"] ::-webkit-scrollbar-thumb {
          background: rgba(255,255,255,0.12);
          background-clip: content-box;
        }
        [data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
          background: rgba(255,255,255,0.2);
          background-clip: content-box;
        }
        [data-theme="dark"] * {
          scrollbar-color: rgba(255,255,255,0.12) transparent;
        }
        [data-theme="dark"] ::selection {
          background: rgba(99,102,241,0.35);
          color: #fff;
        }
        [data-theme="dark"] .wf-card,
        [data-theme="dark"] .panel {
          background: var(--bg-card) !important;
          border: 1px solid rgba(255,255,255,0.06) !important;
          box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
        }
        [data-theme="dark"] .wf-card:hover,
        [data-theme="dark"] .panel:hover {
          border-color: rgba(129,140,248,0.2) !important;
        }
        [data-theme="dark"] .app-top-bar {
          background: #0f101c;
          border-color: rgba(255,255,255,0.06);
        }
        [data-theme="dark"] .tool-card {
          background: var(--bg-card);
          border: 1px solid rgba(255,255,255,0.06);
          border-left: 3px solid rgba(129,140,248,0.2);
        }
        [data-theme="dark"] .tool-card[open] {
          border-left-color: rgba(129,140,248,0.45);
        }
        [data-theme="dark"] .wf-preview-card {
          background: var(--bg-card);
          border: 1px solid rgba(255,255,255,0.06);
          box-shadow: 0 1px 3px rgba(0,0,0,0.3);
        }
        [data-theme="dark"] .wf-preview-card:hover {
          border-color: rgba(129,140,248,0.2);
        }
        [data-theme="dark"] .big-card {
          background: var(--bg-card);
          border: 1px solid rgba(255,255,255,0.06);
          box-shadow: 0 1px 3px rgba(0,0,0,0.3);
        }
        [data-theme="dark"] .big-card:hover {
          border-color: rgba(129,140,248,0.2);
        }
        [data-theme="dark"] .credit-pill {
          background: linear-gradient(135deg, rgba(99,102,241,0.15), rgba(139,92,246,0.1));
          border-color: var(--glass-border);
        }
        [data-theme="dark"] .credit-pill:hover {
          background: linear-gradient(135deg, rgba(99,102,241,0.22), rgba(139,92,246,0.15));
          border-color: rgba(129,140,248,0.3);
        }
        [data-theme="dark"] .wf-list-item {
          background: var(--bg-input);
          border-color: transparent;
        }
        [data-theme="dark"] .wf-list-item:hover {
          border-color: var(--border);
          background: var(--bg-hover);
        }
        [data-theme="dark"] .wf-upload-zone {
          background: var(--bg-input);
          border-color: var(--border);
        }
        [data-theme="dark"] .wf-upload-zone:hover {
          border-color: var(--primary);
          background: var(--primary-50);
        }
        [data-theme="dark"] .wf-form-label {
          color: var(--text-secondary);
        }
        [data-theme="dark"] .wf-preview-card-title,
        [data-theme="dark"] .wf-panel-title,
        [data-theme="dark"] .wf-list-name {
          color: var(--text);
        }
        [data-theme="dark"] .wf-preview-card-content,
        [data-theme="dark"] .wf-list-sub {
          color: var(--text-muted);
        }
        [data-theme="dark"] .wf-preview-tag {
          background: var(--bg-input);
          border-color: var(--border);
          color: var(--text-secondary);
        }
        [data-theme="dark"] .wf-icon-btn {
          color: var(--text-muted);
        }
        [data-theme="dark"] .wf-icon-btn:hover {
          background: var(--bg-hover);
          color: var(--text-secondary);
        }
        [data-theme="dark"] .wf-image-preview {
          background: var(--bg-input);
        }
        [data-theme="dark"] .wf-image-grid-item {
          background: var(--bg-input);
        }
        [data-theme="dark"] .wf-info-box {
          background: var(--bg-input);
          border-color: var(--border);
        }
        [data-theme="dark"] .wf-table th {
          background: var(--bg-subtle) !important;
          color: var(--text-secondary);
        }
        [data-theme="dark"] .wf-table td {
          border-color: var(--border);
        }
        [data-theme="dark"] .wf-table tr:hover td {
          background: var(--bg-hover);
        }
        [data-theme="dark"] .wf-toast {
          background: var(--bg-elevated);
          border-color: var(--border);
          box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        }
        [data-theme="dark"] .wf-loading-overlay {
          background: rgba(10,11,20,0.85);
        }
        [data-theme="dark"] .wf-gene-modal-content,
        [data-theme="dark"] .wf-confirm-box {
          background: var(--bg-elevated);
          border: 1px solid var(--border);
          box-shadow: 0 16px 48px rgba(0,0,0,0.4);
        }
        [data-theme="dark"] .credits-dropdown {
          box-shadow: 0 8px 32px rgba(0,0,0,0.4);
        }
        [data-theme="dark"] .user-popup-card {
          background: var(--bg-elevated);
          border-color: var(--border);
          box-shadow: 0 8px 24px rgba(0,0,0,0.3);
        }
        [data-theme="dark"] .user-popup-item:hover {
          background: var(--bg-hover);
        }
        [data-theme="dark"] .user-popup-logout:hover {
          background: rgba(239,68,68,0.15);
        }
        [data-theme="dark"] .wf-left-panel {
          background: var(--bg-subtle);
          border-color: var(--border);
        }
        [data-theme="dark"] .wf-step-nav {
          background: var(--bg-card) !important;
          border-color: var(--border) !important;
          box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
        }
        [data-theme="dark"] .img-preview-overlay {
          background: rgba(0,0,0,0.9);
        }
        [data-theme="dark"] .glass-panel {
          background: var(--bg-elevated);
          border-color: var(--border);
        }
        [data-theme="dark"] .wf-gene-card {
          background: var(--bg-input);
          border-color: var(--border);
        }
        [data-theme="dark"] .wf-gene-upload-zone {
          background: var(--bg-input);
          border-color: var(--border);
        }
        /* 暗色模式侧边栏导航渐变 */
        [data-theme="dark"] .sidebar-item:hover {
          background: linear-gradient(135deg, rgba(99,102,241,0.1), rgba(139,92,246,0.06));
        }
        [data-theme="dark"] .sidebar-item.active {
          background: linear-gradient(135deg, rgba(99,102,241,0.15), rgba(139,92,246,0.1));
        }
        /* 暗色模式：工作区页面 */
        [data-theme="dark"] .wf-top-nav {
          background: #0f101c;
          border-color: rgba(255,255,255,0.06);
          box-shadow: 0 1px 3px rgba(0,0,0,0.3);
        }
        [data-theme="dark"] .wf-nav-step.active {
          background: linear-gradient(135deg, rgba(99,102,241,0.15), rgba(139,92,246,0.1));
        }
        [data-theme="dark"] .wf-asset-card {
          background: var(--bg-card);
          border-color: rgba(255,255,255,0.06);
        }
        [data-theme="dark"] .wf-asset-card:hover {
          border-color: rgba(129,140,248,0.2);
        }
        [data-theme="dark"] .wf-episode-sidebar {
          background: #0f101c;
          border-color: rgba(255,255,255,0.06);
        }
        [data-theme="dark"] .wf-episode-item.active {
          background: linear-gradient(90deg, rgba(99,102,241,0.1), transparent);
        }
        [data-theme="dark"] .wf-extract-card,
        [data-theme="dark"] .wf-add-card {
          background: var(--bg-card);
          border-color: rgba(255,255,255,0.06);
        }
        [data-theme="dark"] .wf-extract-card:hover,
        [data-theme="dark"] .wf-add-card:hover {
          border-color: rgba(129,140,248,0.2);
        }
        [data-theme="dark"] .wf-asset-tab.active {
          background: linear-gradient(135deg, #4f56e8, #6366f1);
        }
        [data-theme="dark"] .wf-page-bottom {
          background: rgba(15,16,28,0.95);
          border-color: rgba(255,255,255,0.08);
          box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
        }
        /* 暗色模式：生成页Tab卡片 */
        [data-theme="dark"] .hm-gen-tab-bar {
          background: #1e1f35;
          border-color: rgba(255,255,255,0.15);
        }
        [data-theme="dark"] .hm-gen-tab {
          color: #9ca3af;
        }
        [data-theme="dark"] .hm-gen-tab.on {
          background: #6366f1;
          color: #ffffff;
        }
        [data-theme="dark"] .hm-gen-tab.off:hover {
          background: rgba(99,102,241,0.15);
          color: var(--primary-light);
        }
        [data-theme="dark"] .hm-gen-card {
          background: var(--bg-card);
          border-color: rgba(255,255,255,0.05);
          border-top-color: rgba(129,140,248,0.15);
        }
        [data-theme="dark"] .hm-gen-card:hover {
          border-top-color: rgba(129,140,248,0.35);
        }
        [data-theme="dark"] .hm-chip {
          background: var(--bg-input);
          border-color: var(--border);
          color: var(--text-secondary);
        }
        [data-theme="dark"] .hm-chip:hover {
          background: rgba(99,102,241,0.1);
          border-color: rgba(99,102,241,0.3);
          color: var(--text);
        }
        [data-theme="dark"] .hm-chip.active {
          background: rgba(99,102,241,0.15);
          border-color: rgba(99,102,241,0.4);
          color: #c7d2fe;
        }
        [data-theme="dark"] .hm-gen-btn {
          background: linear-gradient(135deg, #6366f1, #8b5cf6);
          box-shadow: 0 2px 12px rgba(99,102,241,0.3);
        }
        [data-theme="dark"] .hm-gen-btn:hover {
          box-shadow: 0 4px 20px rgba(99,102,241,0.45);
        }
        [data-theme="dark"] .hm-ref-add,
        [data-theme="dark"] .hm-ref-empty {
          background: var(--bg-input);
          border-color: var(--border);
          color: var(--text-muted);
        }
        [data-theme="dark"] .hm-ref-add:hover {
          border-color: rgba(99,102,241,0.3);
          color: var(--text-secondary);
        }
        /* 暗色模式：积分下拉内部 */
        [data-theme="dark"] .credits-dropdown-balance {
          color: var(--text);
        }
        [data-theme="dark"] .credits-dropdown-logs-title {
          color: var(--text-secondary);
        }
        [data-theme="dark"] .credits-log-desc {
          color: var(--text);
        }
        [data-theme="dark"] .credits-log-time {
          color: var(--text-muted);
        }
        /* 暗色模式：用户弹窗内部 */
        [data-theme="dark"] .user-popup-name {
          color: var(--text);
        }
        [data-theme="dark"] .user-popup-uid {
          color: var(--text-muted);
        }
        [data-theme="dark"] .user-popup-storage-label {
          color: var(--text-muted);
        }
        [data-theme="dark"] .user-popup-storage-bar-bg {
          background: var(--bg-input);
        }
        /* ========== 骨架屏 ========== */
        .wf-skeleton {
          background: linear-gradient(90deg, var(--bg-hover) 25%, var(--bg-subtle) 50%, var(--bg-hover) 75%);
          background-size: 200% 100%;
          animation: wfSkeletonShimmer 1.5s ease-in-out infinite;
          border-radius: var(--radius-sm);
        }
        .wf-skeleton-text {
          height: 14px;
          margin-bottom: 8px;
          width: 80%;
        }
        .wf-skeleton-text:last-child {
          width: 60%;
        }
        .wf-skeleton-title {
          height: 20px;
          width: 40%;
          margin-bottom: 12px;
        }
        .wf-skeleton-image {
          height: 200px;
          width: 100%;
        }
        .wf-skeleton-avatar {
          width: 40px;
          height: 40px;
          border-radius: var(--radius-full);
        }
        @keyframes wfSkeletonShimmer {
          0% { background-position: 200% 0; }
          100% { background-position: -200% 0; }
        }

        /* ========== 进度条升级 ========== */
        .wf-progress-bar {
          position: relative;
          overflow: hidden;
        }
        .wf-progress-fill::after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: linear-gradient(
            90deg,
            transparent 0%,
            rgba(255,255,255,0.3) 50%,
            transparent 100%
          );
          animation: wfProgressShine 2s ease-in-out infinite;
        }
        @keyframes wfProgressShine {
          0% { transform: translateX(-100%); }
          100% { transform: translateX(100%); }
        }

        /* ========== Toast 美化 ========== */
        .wf-toast {
          border-left: 4px solid var(--primary);
          box-shadow: var(--shadow-lg);
          animation: wfToastSlideIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        .wf-toast.wf-toast-success {
          border-left-color: var(--success);
        }
        .wf-toast.wf-toast-error {
          border-left-color: var(--error);
        }
        @keyframes wfToastSlideIn {
          from {
            transform: translateY(20px);
            opacity: 0;
          }
          to {
            transform: translateY(0);
            opacity: 1;
          }
        }

        /* ========== 模态框弹入动画 ========== */
        .wf-gene-modal-overlay {
          animation: wfOverlayFadeIn 0.2s ease;
        }
        .wf-gene-modal,
        .wf-confirm-box {
          animation: wfModalBounceIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        @keyframes wfOverlayFadeIn {
          from { opacity: 0; }
          to { opacity: 1; }
        }
        @keyframes wfModalBounceIn {
          from {
            transform: scale(0.9) translateY(20px);
            opacity: 0;
          }
          to {
            transform: scale(1) translateY(0);
            opacity: 1;
          }
        }

        /* ========== 列表项 hover 优化 ========== */
        .wf-list-item {
          transition: var(--transition);
        }
        .wf-list-item:hover {
          box-shadow: var(--shadow-sm);
        }
        .wf-list-item:active {
          transform: scale(0.99);
        }

        /* ========== 上传区 hover 优化 ========== */
        .wf-upload-zone {
          transition: var(--transition);
        }
        .wf-upload-zone:hover {
          transform: translateY(-1px);
          box-shadow: var(--shadow-sm);
        }

        /* ========== 图片预览 hover 缩放 ========== */
        .wf-image-grid-item {
          transition: var(--transition);
          overflow: hidden;
          border-radius: var(--radius-sm);
        }
        .wf-image-grid-item:hover {
          transform: scale(1.02);
          box-shadow: var(--shadow-md);
        }
        .wf-image-grid-item img {
          transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .wf-image-grid-item:hover img {
          transform: scale(1.05);
        }

        /* ========== 侧边栏 logo 微动效 ========== */
        .sidebar-logo {
          transition: var(--transition);
        }
        .sidebar-logo:hover {
          transform: scale(1.02);
        }

        /* ========== 顶栏美化 ========== */
        .app-top-bar {
          background: #f5f6fa;
          border-bottom: none;
          box-shadow: none;
        }

        /* ========== 积分胶囊美化 ========== */
        .credit-pill {
          transition: var(--transition);
        }
        .credit-pill:hover {
          transform: scale(1.05);
          box-shadow: var(--shadow-sm);
        }

        /* ========== 标签页美化（响应式） ========== */
        .hm-gen-tab-bar {
          padding: 4px;
          gap: 0;
        }
        .hm-gen-tab {
          padding: 10px 20px;
          font-size: 14px;
        }

        /* ========== 芯片/标签美化 ========== */
        .hm-chip {
          transition: var(--transition);
        }
        .hm-chip:hover {
          transform: translateY(-1px);
          box-shadow: var(--shadow-xs);
        }

        /* 同步状态指示器 */
        #wf-sync-indicator {
            position: fixed;
            bottom: 16px;
            right: 16px;
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 12px;
            z-index: 99999;
            transition: opacity 0.3s;
            background: #ffffff;
            border: 1px solid rgba(0,0,0,0.08);
            box-shadow: var(--shadow-sm);
            color: #6366f1;
        }
        [data-theme="dark"] #wf-sync-indicator {
            background: #1e1f2e;
            border-color: rgba(255,255,255,0.1);
        }
        /* 暗色模式按钮适配 */
        [data-theme="dark"] .wf-btn {
            background: #1a1b2e;
            color: #d1d5db;
            border-color: rgba(255,255,255,0.1);
        }
        [data-theme="dark"] .wf-btn:hover {
            background: #252640;
            border-color: rgba(255,255,255,0.15);
        }
        [data-theme="dark"] .wf-btn-primary {
            background: linear-gradient(135deg, #6366f1, #8b5cf6);
            color: #fff;
        }
        [data-theme="dark"] .wf-btn-secondary {
            background: #1a1b2e;
            color: #a1a1b5;
            border-color: rgba(255,255,255,0.08);
        }
        [data-theme="dark"] .wf-btn-secondary:hover {
            background: rgba(99,102,241,0.15);
            border-color: rgba(99,102,241,0.3);
            color: #a78bfa;
        }

        /* ================================================================
           响应式适配 — Phase 1: 侧边栏 → 底部 Tab 栏
           断点: < 768px (手机)
           桌面端 (>768px) 零影响
           ================================================================ */
        @media (max-width: 767px) {
          /* ---- 侧边栏 → 底部 Tab 栏 ---- */
          .sidebar {
            top: auto !important;
            bottom: 0 !important;
            left: 0 !important;
            right: 0 !important;
            width: 100% !important;
            min-width: 100% !important;
            height: 56px !important;
            flex-direction: row !important;
            justify-content: space-around !important;
            align-items: center !important;
            padding: 0 !important;
            border-right: none !important;
            border-top: 1px solid #eef0f4 !important;
            box-shadow: 0 -2px 8px rgba(0,0,0,0.06) !important;
            z-index: 1000 !important;
            overflow: visible !important;
            transition: none !important;
          }

          /* 隐藏 logo 区域 */
          .sidebar-logo { display: none !important; }

          /* 隐藏底部区域视觉元素（hidden input 不受影响，仍在 DOM 中） */
          .sidebar-bottom { display: none !important; }

          /* 折叠/展开按钮隐藏 */
          .sidebar-collapse-btn { display: none !important; }
          .sidebar-expand-btn { display: none !important; }

          /* 导航 → 水平排列 */
          .sidebar-nav {
            flex-direction: row !important;
            width: 100% !important;
            justify-content: space-around !important;
            align-items: center !important;
            padding: 0 !important;
            gap: 0 !important;
          }

          /* 每个 Tab 按钮 */
          .sidebar-item {
            flex: 1 !important;
            flex-direction: column !important;
            justify-content: center !important;
            align-items: center !important;
            padding: 4px 2px !important;
            gap: 2px !important;
            min-height: 48px !important;
            border-radius: 0 !important;
            font-size: 11px !important;
            width: auto !important;
            position: relative !important;
          }
          .sidebar-item .nav-icon {
            font-size: 20px !important;
            width: auto !important;
          }
          .sidebar-item-text {
            font-size: 10px !important;
            line-height: 1.2 !important;
          }

          /* "我的"Tab — 移动端显示 */
          .mobile-profile-tab {
            display: flex !important;
          }

          /* active 指示器改为底部横线 */
          .sidebar-item.active::before {
            left: 20% !important;
            top: auto !important;
            bottom: 0 !important;
            transform: none !important;
            width: 60% !important;
            height: 2px !important;
            border-radius: 2px 2px 0 0 !important;
          }

          /* ---- 主内容区适配 ---- */
          .main-content {
            margin-left: 0 !important;
            padding: 12px 12px 68px 12px !important;
          }
          .main-content.sidebar-collapsed {
            margin-left: 0 !important;
          }

          /* ---- 触摸目标放大 (Apple HIG ≥ 44px) ---- */
          .wf-btn {
            min-height: 44px !important;
            padding: 10px 16px !important;
          }

          /* ---- 暗色模式适配 ---- */
          [data-theme="dark"] .sidebar {
            border-top-color: rgba(255,255,255,0.08) !important;
            box-shadow: 0 -2px 8px rgba(0,0,0,0.3) !important;
          }

          /* ---- Phase 2: 工作流布局适配 ---- */
          /* 四宫格 → 单列 */
          .wf-four-grid {
            grid-template-columns: 1fr !important;
          }
          /* 剧集布局：纵向排列（侧边栏在上，主区在下） */
          .wf-episode-layout {
            flex-direction: column !important;
            min-height: auto !important;
          }
          /* 剧集侧边栏 → 水平滚动 */
          .wf-episode-sidebar {
            width: 100% !important;
            min-width: 100% !important;
            border-right: none !important;
            border-bottom: 1px solid var(--border-light) !important;
            max-height: 120px !important;
            overflow-x: auto !important;
            overflow-y: hidden !important;
            display: flex !important;
            flex-direction: row !important;
            padding: 8px 12px !important;
            gap: 8px !important;
          }
          .wf-episode-item {
            flex-shrink: 0 !important;
            border-left: none !important;
            border-bottom: 3px solid transparent !important;
          }
          .wf-episode-item.active {
            border-left-color: transparent !important;
            border-bottom-color: var(--primary) !important;
          }
          /* 暗色模式：剧集侧边栏 */
          [data-theme="dark"] .wf-episode-sidebar {
            border-bottom-color: rgba(255,255,255,0.08) !important;
          }

          /* ---- Phase 3: 底部导航栏移动端适配 ---- */
          /* 导航步骤：隐藏文字标签，只显示数字序号 */
          .wf-nav-label { display: none !important; }
          .wf-nav-step {
            padding: 4px 8px !important;
            font-size: 12px !important;
          }
          .wf-nav-arrow { font-size: 11px !important; }
          .wf-nav-steps { gap: 3px !important; }

          /* 底部栏：减小 padding，允许换行 */
          .wf-page-bottom {
            padding: 8px 10px !important;
            gap: 6px !important;
            flex-wrap: wrap !important;
            justify-content: center !important;
          }
          .wf-page-bottom button {
            padding: 6px 10px !important;
            font-size: 11px !important;
            flex-shrink: 1 !important;
          }

          /* 分镜表格：水平滚动 */
          .wf-table-container {
            overflow-x: auto !important;
            -webkit-overflow-scrolling: touch !important;
          }
          .wf-table {
            min-width: 700px !important;
          }

          /* 资产库操作按钮：缩小 */
          .wf-page-content-wrap button {
            font-size: 12px !important;
          }

          /* 暗色模式：导航栏 */
          [data-theme="dark"] .wf-page-bottom {
            background: rgba(30,32,38,0.95) !important;
            border-color: rgba(255,255,255,0.08) !important;
          }
        }

