/* ====== 响应式布局 ====== */ /* v18.103 fix #2 · 2026-07-16 22:25 · mobile-menu-btn 高度 ≥ 44px (Apple HIG) */ .mobile-menu-btn{display:none;background:none;border:none;font-size:1.25rem;cursor:pointer;color:var(--text);padding:0.625rem 0.75rem;min-height:44px;min-width:44px;align-items:center;justify-content:center;} .mobile-menu-btn:hover{color:var(--orange);} .sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:999;} .sidebar-backdrop.open{display:block;} @media (max-width: 900px) { .sidebar{position:fixed!important;left:0;top:0;bottom:0;width:280px!important;z-index:1000;transform:translateX(-100%);transition:transform 0.25s ease;box-shadow:4px 0 20px rgba(0,0,0,0.15);} .sidebar.open{transform:translateX(0);} .sidebar-resizer{display:none!important;} .mobile-menu-btn{display:block;} .nav-btn{padding:0.375rem 0.625rem;font-size:0.75rem;} .sidebar-header h3{font-size:0.8125rem;} .sidebar-header p{font-size:0.6875rem;} } @media (max-width: 600px) { .nav-btn{padding:0.25rem 0.5rem;font-size:0.75rem;} .topbar{padding:0.5rem 0.75rem;gap:0.5rem;} .logo{font-size:0.875rem;} .token-badge{font-size:0.75rem;padding:0.125rem 0.5rem;} .sidebar{width:260px!important;} .sidebar-section .section-title{font-size:0.75rem;} .sidebar-header{padding:0.75rem;} } /* === ElevenLabs DESIGN.md 主题 (2026-06-27 重构) === 编辑杂志风:暖深色 + 渐变光晕 + Waldenburg 衬线 display + Inter body */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Cormorant+Garamond:wght@300;400;500&display=swap'); :root { /* 编辑色系 (ink + warm dark + atmospheric pastels) */ --ink: #292524; --ink-deep: #0d1117; --ink-active: #0d1117; --body: #4e4e4e; --body-strong: #292524; --muted: #777169; --muted-soft: #a8a29e; /* Canvas (暖深色,营电影质感) */ --canvas: #0d1117; --canvas-soft: #1c1917; --canvas-deep: #050403; --surface-card: #1c1917; --surface-strong: #292524; --surface-elevated: #1c1917; /* Hairlines */ --hairline: #292524; --hairline-soft: #1c1917; --hairline-strong: #44403c; /* 统一主色 — 暖沙/香槟 (warm sand) */ --accent: #e8c4a0; --accent-rgb: 232,196,160; --accent-dim: rgba(232,196,160,0.12); --accent-hover: #f0d4b0; /* 向后兼容: 所有 grad-* 指向同一主色 */ --grad-mint: var(--accent); --grad-peach: var(--accent); --grad-lavender: var(--accent); --grad-sky: var(--accent); --grad-rose: var(--accent); /* 语义色 */ --error: #dc2626; --success: #16a34a; --warning: #f59e0b; /* 向后兼容别名 (避免另改 200+ 个 var(--orange-*)) */ --orange:#e8c4a0; /* v4 patch: 补上主色别名的明确定义(之前未定义,fallback 不生效)*/ --yellow-50:#1c1917;--yellow-100:#292524;--yellow-200:#44403c; --yellow-300:#78716c;--yellow-400:#a8a29e;--yellow-500:#d6d3d1;--yellow-600:#e7e5e4; --gray-50:#1c1917;--gray-100:#292524;--gray-200:#44403c;--gray-300:#78716c; --gray-400:#a8a29e;--gray-500:#d6d3d1;--gray-600:#e7e5e4;--gray-700:#f5f5f5;--gray-800:#fafafa;--gray-900:#ffffff; --green:#16a34a;--red:#dc2626;--blue:#a8c8e8;--purple:#c8b8e0;--blue-50:#1c1917;--blue-100:#292524; --radius:10px;--radius-lg:16px; --orange-50:#161b22;--orange-100:#292524;--orange-200:#44403c;--orange-300:#78716c;--orange-400:rgba(232,196,160,0.5);--orange-500:#e8c4a0;--orange-600:#f0d4b0;--orange-700:#f8e0c4; --canvas-bg:#0d1117;--canvas-surface:#1c1917;--canvas-border:#292524; } /* === Focus states (WCAG 2.4.7) === */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } :focus:not(:focus-visible) { outline: none; } *{margin:0;padding:0;box-sizing:border-box;} /* v23.8 part 3 · GEN3 UI upgrade · 字体梯度 (24/20/16/14/12 px, 字重 600/600/600/400/400) */ :root{ --font-system:-apple-system,BlinkMacSystemFont,'Inter','Segoe UI','Noto Sans SC','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif; --t-h1:24px;--t-h2:20px;--t-h3:16px;--t-body:14px;--t-caption:12px; } body{ font-family:var(--font-system); background:var(--canvas); background-image: radial-gradient(at 50% 0%, rgba(232,196,160,0.04) 0%, transparent 60%); color:#e7e5e4; font-size:var(--t-body); line-height:1.5; height:100vh; overflow:hidden; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; font-feature-settings:'tnum','ss01'; letter-spacing:0.005em; } /* 衬线 display 字体包 */ .display-serif{font-family:'Inter',sans-serif;font-weight:600;letter-spacing:-0.02em;} h1, h2, h3 {font-family:'Inter',sans-serif;font-weight:600;letter-spacing:-0.01em;color:#fafaf9;} /* v23.8 part 3 · 统一字体梯度 (全站 h1=24, h2=20, h3=16, body=14, caption=12) */ h1 {font-size:var(--t-h1);line-height:1.3;} h2 {font-size:var(--t-h2);line-height:1.35;} h3 {font-size:var(--t-h3);line-height:1.4;} .caption,.small{font-size:var(--t-caption);line-height:1.4;} /* v23.8 part 3 · GEN3 · 动效 token (200ms ease entrance + 200ms hover + 600ms spin) */ :root{ --motion-hover:200ms ease; --motion-enter:200ms ease-out; --motion-spin:600ms linear infinite; } @keyframes cardEnter{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}} @keyframes softPulse{0%,100%{opacity:1}50%{opacity:0.5}} @keyframes loaderSpin{to{transform:rotate(360deg)}} .card-enter{opacity:0;animation:cardEnter var(--motion-enter) forwards;} .stagger-1{animation-delay:40ms}.stagger-2{animation-delay:80ms}.stagger-3{animation-delay:120ms}.stagger-4{animation-delay:160ms}.stagger-5{animation-delay:200ms}.stagger-6{animation-delay:240ms} .soft-pulse{animation:softPulse 1.4s ease-in-out infinite;} .loader-spin{animation:loaderSpin var(--motion-spin);border:2px solid var(--hairline-strong);border-top-color:var(--accent);border-radius:50%;display:inline-block;width:16px;height:16px;} .hidden{display:none!important;} /* [推荐] v18.6 老板要求:AI 短剧工作台 logo 栏加大(保留 tabs/buttons 小) */ /* Header (深色 elevated · 高度加大 + 品牌区突出) */ .header{height:48px;background:rgba(28,25,23,0.85);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--hairline);display:flex;align-items:center;justify-content:space-between;padding:0 1.25rem;flex-shrink:0;z-index:200;position:relative;} .header-left{display:flex;align-items:center;gap:1rem;} .logo{font-family:'Inter',sans-serif;font-size:1.0625rem;font-weight:700;letter-spacing:-0.01em;color:#fafaf9;display:flex;align-items:center;gap:0.5rem;} .logo::before{content:'';width:6px;height:6px;border-radius:50%;background:linear-gradient(135deg,var(--grad-mint),var(--grad-peach));box-shadow:0 0 6px rgba(232,196,160,0.4);} .nav{display:flex;gap:1px;padding:2px;background:rgba(255,255,255,0.05);border-radius:6px;border:1px solid rgba(255,255,255,0.08);} .nav-btn{padding:0.1875rem 0.5rem;border:none;background:transparent;border-radius:4px;font-size:0.75rem;font-weight:500;color:#a8a29e;cursor:pointer;transition:all 0.2s;letter-spacing:0.01em;line-height:1.2;} .nav-btn:hover{color:#fafaf9;background:rgba(255,255,255,0.06);} .nav-btn.active{background:rgba(232,196,160,0.12);color:#fafaf9;box-shadow:0 1px 4px rgba(0,0,0,0.3);font-weight:600;border:1px solid rgba(232,196,160,0.2);} /* [推荐] 2026-06-28 返回上一页按钮 */ .back-btn{display:inline-flex;align-items:center;gap:4px;padding:0.1875rem 0.5rem;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.12);color:#e7e5e4;border-radius:5px;font-size:0.75rem;font-weight:500;cursor:pointer;transition:all 0.15s;margin-right:6px;font-family:inherit;line-height:1.2;} .back-btn:hover{background:rgba(232,196,160,0.1);border-color:var(--grad-peach);color:var(--grad-peach);} .back-btn .arrow{font-size:0.75rem;transition:transform 0.15s;} .back-btn:hover .arrow{transform:translateX(-2px);} .header-right{display:flex;align-items:center;gap:0.5rem;} .token-badge{display:flex;align-items:center;gap:0.25rem;padding:0.1875rem 0.5rem;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:5px;font-size:0.75rem;color:#fafaf9;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.2;} .avatar{width:22px;height:22px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;font-size:0.625rem;font-weight:600;color:var(--ink-deep);cursor:pointer;border:1px solid rgba(255,255,255,0.1);} /* 按钮变体(v18.3 紧凑化) */ .ghost-btn{padding:0.1875rem 0.5rem;border:1px solid rgba(232,196,160,0.3);background:transparent;border-radius:5px;font-size:0.75rem;font-weight:500;color:var(--grad-peach);cursor:pointer;transition:all 0.2s;line-height:1.2;} .ghost-btn:hover{background:rgba(232,196,160,0.1);border-color:var(--grad-peach);} .ghost-btn:active{transform:translateY(1px);} /* 通用文字颜色重置(黑色文本专防· 解决 6-27 重构遗留问题) */ .text-body{color:#e7e5e4;} .text-muted{color:#a8a29e;} .text-subtle{color:#777169;} /* Layout: sidebar + canvas */ .layout{display:flex;height:calc(100vh - 48px);position:relative;align-items:stretch;} /* v23.10 · 只隐藏 v236 编辑器散落元素, 不隐藏 nav/header/sidebar */ body:not(.editor-mode) .editor-body, body:not(.editor-mode) .v236-editor-shell, body:not(.editor-mode) #v236EditorShell, body:not(.editor-mode) .editor-preview, body:not(.editor-mode) .editor-timeline, body:not(.editor-mode) .editor-assets, body:not(.editor-mode) .editor-clips, body:not(.editor-mode) .editor-toolbar, body:not(.editor-mode) .timeline-toolbar, body:not(.editor-mode) #editorView, body:not(.editor-mode) .editor-main, body:not(.editor-mode) .editor-topbar, body:not(.editor-mode) .editor-saved-section { display: none !important; } /* 注意: #sidebar 不在这里隐藏 - workspace 也用 sidebar, 只隐藏 editorView */ /* Left Sidebar (深色 + 镶边 · v18.5d 修复高度撑出) */ // GEN4+6 VIPER v18 fix (修正 GEN4+5) · #app 横向 flex 只在 editor 模式下生效 // 真根因: GEN4+5 无条件 #app{display:flex;flex-direction:row} 让 welcomeView / projectsView / teamView / adminView // 这些「全屏 view」(本身是 100vh 块级流)被拉成 1440px 横向 flex 子项, // 导致 sidebar / 4 个 nav tab 都被推到 viewport (900px) 以下,VIPER 报「sidebar 在 y=1740-2588」。 // 修法: 只有 editor 视图激活时,#app 才走横向 flex row 布局; // 其他 view (welcome/projects/team/admin/dashboard/import) 走 normal block flow。 // - 默认 #app{display:block;} (normal flow · 让 100vh 全屏 view 自适应) // - body.editor-mode #app{display:flex;flex-direction:column;align-items:stretch;} (只有剪辑页需要 sidebar + canvas 横向并排) // - body.editor-mode #app>*{flex-shrink:0;} (防 sidebar 收缩) // - body.editor-mode #app>#editorView{flex:1;min-width:0;} (editor 占满剩余宽度) // - openEditor() 进入时 document.body.classList.add('editor-mode'); // - closeEditor() / showView(other) 时 document.body.classList.remove('editor-mode'); // - :has() 备援方案(防 SPA history 跳转漏改 body class): body.editor-mode #app{display:flex;flex-direction:column;align-items:stretch;} body.editor-mode #app>*{flex-shrink:0;} body.editor-mode #app>#editorView{flex:1;min-width:0;} /* :has() 备援 · 当 editorView 显示且非 hidden 时,自动 flex;防 SPA 跳转漏改 body class */ body:has(> #app > #editorView:not(.hidden)){--editor-mode-css:1;} @supports (selector(:has(*))) { body:has(> #app > #editorView:not(.hidden)) #app{display:flex;flex-direction:column;align-items:stretch;} body:has(> #app > #editorView:not(.hidden)) #app>*{flex-shrink:0;} body:has(> #app > #editorView:not(.hidden)) #app>#editorView{flex:1;min-width:0;} } .sidebar{width:200px;background:var(--canvas-soft);border-right:1px solid var(--hairline);display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto;min-height:0;height:calc(100vh - 48px);max-height:calc(100vh - 48px);position:relative;-webkit-overflow-scrolling:touch;} /* GEN4 VIPER v13 BUG #6: workspace already owns the viewport height. A second 100vh sidebar made scrolled children paint outside the parent's hit-test box, so the sidebar/episode controls intercepted real pointer clicks. */ .workspace-view{overflow:hidden!important;} .workspace-body>.layout{min-height:0!important;overflow:hidden;} .workspace-body>.layout>.sidebar{height:100%!important;max-height:100%!important;overflow-y:auto;isolation:isolate;} .material-libraries-top{position:relative;z-index:1500;isolation:isolate;} .material-libraries-top>.materials-tabs{position:relative;z-index:1501;pointer-events:auto;isolation:isolate;} .material-libraries-top .material-tab{position:relative;z-index:1502;pointer-events:auto;touch-action:manipulation;cursor:pointer;} .sidebar-resizer{position:absolute;top:0;bottom:0;width:4px;cursor:col-resize;z-index:20;background:transparent;transition:background 0.15s;} .sidebar-resizer:hover,.sidebar-resizer.active{background:var(--grad-peach);opacity:0.5;} .sidebar-header{padding:0.625rem 0.75rem 0.5rem;border-bottom:1px solid var(--hairline);} .sidebar-header h3{font-family:'Inter',sans-serif;font-size:0.9375rem;font-weight:600;letter-spacing:-0.01em;color:#fafaf9;margin-bottom:0.125rem;} .sidebar-header p{font-size:0.6875rem;color:#a8a29e;margin-top:0.125rem;line-height:1.5;} .sidebar-section{border-bottom:1px solid var(--hairline-soft);} .section-title{display:flex;align-items:center;justify-content:space-between;padding:0.4375rem 0.75rem;cursor:pointer;font-size:0.75rem;font-weight:600;color:#a8a29e;text-transform:uppercase;letter-spacing:0.06em;transition:color 0.15s;line-height:1.2;} .section-title:hover{color:#fafaf9;} .section-title .arrow{font-size:0.625rem;color:#a8a29e;transition:transform 0.2s;} .section-title.open .arrow{transform:rotate(90deg);} /* [推荐] v18.5f 老板要求:剧集列表可滚(去掉 max-height 让 sidebar 整体可滚) */ .section-body{display:none;padding:0.25rem 0.5rem 0.75rem;} .section-body.open{display:block;} /* 剧本面板 */ .script-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:70vw;max-width:900px;height:80vh;background:var(--surface-elevated);border:1px solid var(--hairline-strong);box-shadow:0 30px 80px rgba(0,0,0,0.7);border-radius:16px;z-index:10000;display:flex;flex-direction:column;animation:fadeInScale 0.2s ease;color:var(--text);} @keyframes fadeInScale{from{opacity:0;transform:translate(-50%,-50%) scale(0.95)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}} .script-panel-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;border-bottom:1px solid var(--hairline);flex-shrink:0;} .script-panel-header h3{font-size:1rem;font-weight:600;color:var(--text);} .script-panel-tabs{display:flex;gap:0;border-bottom:1px solid var(--hairline);flex-shrink:0;background:var(--canvas-soft);} .script-tab{padding:0.625rem 1.25rem;font-size:0.8125rem;font-weight:500;cursor:pointer;border:none;background:none;color:var(--text-3);border-bottom:2px solid transparent;transition:all 0.15s;} .script-tab:hover{color:var(--text);} .script-tab.active{color:var(--orange);border-bottom-color:var(--orange);background:var(--surface-elevated);} .script-panel-body{flex:1;overflow-y:auto;padding:1.25rem;} .script-panel-body .md-content{font-size:0.8125rem;line-height:1.8;color:var(--text);} .md-content h1{font-size:1.25rem;font-weight:700;color:var(--text);margin:1.5rem 0 0.75rem;border-bottom:2px solid var(--hairline);padding-bottom:0.375rem;} .md-content h2{font-size:1.0625rem;font-weight:600;color:var(--text);margin:1.25rem 0 0.5rem;} .md-content h3{font-size:0.9375rem;font-weight:600;color:var(--text);margin:1rem 0 0.375rem;} .md-content h4{font-size:0.875rem;font-weight:600;color:var(--text-2);margin:0.75rem 0 0.25rem;} .md-content p{margin:0.375rem 0;} .md-content table{width:100%;border-collapse:collapse;margin:0.5rem 0;font-size:0.75rem;} .md-content th,.md-content td{border:1px solid var(--hairline-strong);padding:0.375rem 0.5rem;text-align:left;} .md-content th{background:var(--canvas-soft);font-weight:600;} .md-content code{background:var(--canvas-soft);padding:1px 4px;border-radius:3px;font-size:0.75rem;} .md-content pre{background:var(--gray-900);color:#e8eaf0;padding:0.75rem;border-radius:6px;overflow-x:auto;margin:0.5rem 0;font-size:0.75rem;line-height:1.5;} .md-content pre code{background:none;color:inherit;padding:0;} .md-content blockquote{border-left:3px solid var(--orange);padding:0.25rem 0.75rem;margin:0.5rem 0;color:var(--text-3);font-size:0.75rem;} .md-content hr{border:none;border-top:1px solid var(--hairline);margin:1rem 0;} .md-content ul,.md-content ol{padding-left:1.25rem;margin:0.375rem 0;} .md-content li{margin:0.125rem 0;} /* ⭐ v23.10 outline-structure · 大纲 4 节样式 (无 emoji / 无 SVG / 4 档 token 颜色) */ .outline-structured{display:grid;gap:14px;padding:18px 4px;} .outline-section{border:1px solid var(--hairline);border-left-width:3px;background:var(--surface-elevated);border-radius:10px;padding:16px 18px;} .outline-section h4{margin:0 0 10px;font-size:0.9375rem;letter-spacing:.02em;font-weight:600;} .outline-section p{margin:6px 0;color:var(--text-2);line-height:1.7;font-size:0.8125rem;} .outline-empty{color:var(--text-3);font-style:normal;font-size:0.8125rem;} .outline-level-1{border-left-color:var(--orange-600);} .outline-level-1 h4{color:var(--orange-600);} .outline-level-2{border-left-color:var(--yellow-500);} .outline-level-2 h4{color:var(--yellow-700);} .outline-level-3{border-left-color:var(--text-2);} .outline-level-3 h4{color:var(--text);} .outline-level-4{border-left-color:var(--text-3);} .outline-level-4 h4{color:var(--text-3);} .outline-arc-list{display:grid;gap:10px;margin-top:8px;} .outline-arc-row{padding:12px 14px;border:1px solid var(--hairline);border-radius:8px;background:var(--canvas-soft);} .outline-arc-row h5{margin:4px 0 8px;font-size:0.9375rem;color:var(--text);} .outline-arc-row p{margin:4px 0;color:var(--text-2);line-height:1.65;font-size:0.8125rem;} .outline-arc-row b{display:inline-block;min-width:64px;color:var(--text);font-weight:600;} .outline-arc-episode{display:inline-block;font-size:0.75rem;letter-spacing:.04em;color:var(--orange-600);background:var(--yellow-50);border:1px solid var(--hairline);border-radius:4px;padding:1px 8px;margin-bottom:6px;} /* ⭐ v23.10 B145 · 分集列表 (卡片样式) */ .outline-level-0{border-left-color:var(--orange-700);} .outline-level-0 h4{color:var(--orange-700);} .outline-episode-list{display:grid;gap:10px;margin-top:6px;} .episode-card{padding:12px 14px;border:1px solid var(--hairline);border-left:3px solid var(--orange-600);border-radius:8px;background:var(--canvas-soft);transition:transform .12s ease, box-shadow .12s ease;} .episode-card:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,.08);} .episode-card-header{display:flex;align-items:baseline;gap:10px;margin-bottom:6px;flex-wrap:wrap;} .episode-card-num{display:inline-block;font-size:0.75rem;letter-spacing:.04em;color:#fff;background:var(--orange-600);border:1px solid var(--orange-700);border-radius:4px;padding:2px 8px;font-weight:600;} .episode-card-title{margin:0;font-size:0.9375rem;color:var(--text);font-weight:600;flex:1;min-width:120px;letter-spacing:.01em;} .episode-card-emotion{display:inline-block;font-size:0.75rem;letter-spacing:.04em;color:var(--text-3);border:1px solid var(--hairline);border-radius:4px;padding:1px 6px;} .episode-card p{margin:5px 0;color:var(--text-2);line-height:1.7;font-size:0.8125rem;} .episode-card p strong{display:inline-block;min-width:44px;color:var(--text);font-weight:600;letter-spacing:.02em;margin-right:4px;} .episode-card .md-content{display:none;} .outline-relationship-row{padding:10px 12px;border:1px solid var(--hairline);border-radius:8px;margin-bottom:8px;background:var(--canvas-soft);} .outline-relationship-pair{display:flex;align-items:baseline;gap:6px;font-size:0.875rem;color:var(--text);} .outline-relationship-vs{color:var(--text-3);font-size:0.8125rem;} .outline-relationship-type{display:inline-block;margin:4px 0;font-size:0.75rem;letter-spacing:.04em;color:var(--orange-600);background:var(--yellow-50);border:1px solid var(--hairline);border-radius:4px;padding:1px 8px;} .outline-relationship-row p{margin:4px 0 0;color:var(--text-2);font-size:0.8125rem;line-height:1.6;} /* ⭐ v23.10 outline-structure · 人物关系图 (节点 + 边的纯文字布局) */ .relationship-graph{display:grid;gap:12px;padding:18px 4px;} .relationship-summary{color:var(--text-3);font-size:0.75rem;letter-spacing:.04em;padding:0 4px;} .relationship-edge{display:grid;grid-template-columns:minmax(88px,1fr) minmax(160px,2fr) minmax(88px,1fr);align-items:center;gap:16px;padding:14px;background:var(--surface-elevated);border:1px solid var(--hairline);border-radius:10px;} .relationship-person{color:var(--text);font-size:0.9375rem;font-weight:650;text-align:center;padding:6px 4px;} .relationship-link{display:grid;gap:6px;text-align:center;} .relationship-type{color:var(--orange-600);font-size:0.75rem;font-weight:600;letter-spacing:.02em;} .relationship-line{height:1px;background:var(--hairline-strong);width:60%;margin:0 auto;} .relationship-desc{color:var(--text-2);font-size:0.8125rem;line-height:1.6;} .relationship-empty{padding:48px 16px;text-align:center;color:var(--text-3);} .relationship-empty-title{font-size:0.9375rem;color:var(--text-2);margin-bottom:6px;} .relationship-empty-desc{font-size:0.8125rem;color:var(--text-3);} @media (max-width:720px){.relationship-edge{grid-template-columns:1fr;}} .script-loading{display:flex;align-items:center;justify-content:center;height:200px;color:var(--text-3);font-size:0.875rem;gap:0.5rem;} .script-loading .spinner{width:16px;height:16px;border:2px solid var(--hairline-strong);border-top-color:var(--accent);border-radius:50%;animation:spin 0.6s linear infinite;} @keyframes spin{to{transform:rotate(360deg)}} .script-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:9999;overflow:hidden;} /* 人物故事弹窗 */ .story-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:600px;max-width:90vw;max-height:80vh;background:var(--surface-elevated);border:1px solid var(--hairline-strong);border-radius:16px;z-index:10001;display:flex;flex-direction:column;box-shadow:0 24px 60px rgba(0,0,0,0.7);overflow:hidden;animation:fadeInScale 0.2s ease;color:var(--text);} .story-modal-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;border-bottom:1px solid var(--hairline);flex-shrink:0;} .story-modal-header h3{font-size:1rem;font-weight:600;color:var(--text);margin:0;} .story-modal-close{cursor:pointer;color:var(--text-3);font-size:1rem;border:none;background:none;padding:4px;} .story-modal-close:hover{color:var(--red);} .story-modal-body{flex:1;overflow-y:auto;padding:1.25rem;font-size:0.8125rem;line-height:1.8;color:var(--text);} .story-modal-body h2{font-size:0.9375rem;font-weight:600;color:var(--text);margin:1.25rem 0 0.5rem;padding-bottom:0.375rem;border-bottom:1px solid var(--hairline);} .story-modal-body p{margin:0.5rem 0;} .story-modal-body em{color:var(--text-3);font-style:italic;} .story-modal-body hr{border:none;border-top:1px solid var(--hairline);margin:1rem 0;} .story-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:10000;} /* 新建项目弹窗 */ .new-project-modal{position:fixed;inset:0;z-index:10001;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.65);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);} /* Modal 表单 (暗色化) */ .new-project-form{background:var(--surface-elevated);border:1px solid var(--hairline-strong);border-radius:20px;width:560px;max-height:90vh;overflow-y:auto;box-shadow:0 30px 80px rgba(0,0,0,0.6),0 0 0 1px rgba(255,255,255,0.04);color:var(--text);} .new-project-form h3{font-family:'Inter',sans-serif;font-size:1.75rem;font-weight:600;letter-spacing:-0.01em;color:var(--text);margin:0;padding:1.5rem 1.75rem;border-bottom:1px solid var(--hairline);} .new-project-form .form-body{padding:1.5rem 1.75rem;} .new-project-form .field{margin-bottom:1.125rem;} .new-project-form .field label{display:block;font-size:0.75rem;font-weight:600;color:var(--text-2);margin-bottom:0.5rem;text-transform:uppercase;letter-spacing:0.06em;} .new-project-form .field input,.new-project-form .field textarea,.new-project-form .field select{width:100%;padding:0.625rem 0.875rem;background:var(--canvas);border:1px solid var(--hairline-strong);border-radius:10px;font-size:0.875rem;outline:none;font-family:inherit;transition:all 0.15s;color:var(--text);} .new-project-form .field input:focus,.new-project-form .field textarea:focus,.new-project-form .field select:focus{border-color:var(--grad-peach);background:var(--canvas-soft);box-shadow:0 0 0 3px rgba(232,196,160,0.08);} .new-project-form .field textarea{min-height:84px;resize:vertical;line-height:1.6;} .new-project-form .field .hint{font-size:0.75rem;color:var(--text-3);margin-top:0.375rem;line-height:1.5;} /* v18.104 fix #4 · 2026-07-16 22:25 · 创建项目 modal sticky bottom CTA（mobile 滚动到底部也能看到主按钮） */ .new-project-form .form-footer{display:flex;justify-content:flex-end;gap:0.625rem;padding:1.125rem 1.75rem;border-top:1px solid var(--hairline);position:sticky;bottom:0;background:var(--surface-elevated);z-index:2;box-shadow:0 -4px 12px rgba(0,0,0,0.25);} .new-project-form .genre-grid{display:flex;flex-wrap:wrap;gap:0.375rem;margin-top:0.25rem;} .new-project-form .genre-chip{padding:0.375rem 1rem;border:1px solid var(--hairline-strong);border-radius:20px;font-size:0.8125rem;font-weight:500;cursor:pointer;transition:all 0.15s;color:var(--text-2);background:rgba(255,255,255,0.02);} .new-project-form .genre-chip:hover{border-color:var(--grad-peach);color:var(--grad-peach);} .new-project-form .genre-chip.selected{background:rgba(232,196,160,0.12);color:var(--grad-peach);border-color:var(--grad-peach);} /* v47 · pd-group/pd-field 样式 (showProjectDetail 弹窗分组+模型选择栏) */ .pd-group{margin-bottom:0.75rem;border:1px solid var(--hairline);border-radius:10px;overflow:hidden;background:rgba(255,255,255,0.015);} .pd-group > summary{padding:0.75rem 1rem;font-size:0.8125rem;font-weight:600;color:var(--text);cursor:pointer;user-select:none;list-style:none;display:flex;align-items:center;gap:0.5rem;background:rgba(255,255,255,0.03);transition:background 0.15s;} .pd-group > summary::-webkit-details-marker{display:none;} .pd-group > summary::before{content:'▸';font-size:0.625rem;color:var(--text-3);transition:transform 0.15s;} .pd-group[open] > summary::before{transform:rotate(90deg);} .pd-group > summary:hover{background:rgba(255,255,255,0.06);} .pd-group-body{padding:0.75rem 1rem;display:flex;flex-direction:column;gap:0.75rem;} .pd-field{display:flex;flex-direction:column;gap:0.375rem;} .pd-field > label{font-size:0.6875rem;font-weight:600;color:var(--text-2);text-transform:uppercase;letter-spacing:0.06em;} .pd-field > select,.pd-field > input{width:100%;padding:0.5rem 0.75rem;background:var(--canvas);border:1px solid var(--hairline-strong);border-radius:8px;font-size:0.8125rem;outline:none;font-family:inherit;color:var(--text);transition:all 0.15s;} .pd-field > select:focus,.pd-field > input:focus{border-color:var(--grad-peach);background:var(--canvas-soft);box-shadow:0 0 0 3px rgba(232,196,160,0.08);} .pd-field .hint{font-size:0.6875rem;color:var(--text-3);line-height:1.5;} /* v23.10 GEN4+7 BUG-D · 老板 2026-07-20 报「状态栏不是置顶的, 被遮住了」· 改为 top 0 置顶 full-width bar (不是 bottom toast) */ .gen-progress{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);width:auto;min-width:300px;max-width:500px;background:linear-gradient(135deg,#1c1917,#292524);color:var(--accent);border:1px solid var(--hairline-strong);border-radius:12px;padding:0.75rem 1.5rem;font-size:0.8125rem;z-index:40000 !important;display:flex;align-items:center;justify-content:center;gap:0.5rem;box-shadow:0 4px 16px rgba(0,0,0,0.4);} .gen-progress .spinner{width:14px;height:14px;border:2px solid rgba(255,255,255,0.3);border-top-color:#fff;border-radius:50%;animation:spin 0.6s linear infinite;} /* [推荐] v18.5 老板要求:sidebar 缩略图也缩小(适应 200px 宽度) */ .sidebar-char-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0.375rem;} .sidebar-char-item{border:1px solid var(--hairline-strong);border-radius:var(--radius);overflow:hidden;cursor:grab;transition:all 0.15s;background:var(--surface-elevated);user-select:none;} .sidebar-char-item:hover{border-color:var(--purple);box-shadow:0 2px 8px rgba(168,85,247,0.15);} .sidebar-char-item:active{cursor:grabbing;opacity:0.85;} .sidebar-char-thumb{width:100%;aspect-ratio:3/4;background:var(--yellow-100);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;} .sidebar-char-thumb img{width:100%;height:100%;object-fit:cover;} .sidebar-char-thumb .placeholder{font-size:1.25rem;opacity:0.5;} .sidebar-char-info{padding:0.1875rem 0.3125rem;} .sidebar-char-name{font-size:0.75rem;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .sidebar-char-role{font-size:0.75rem;color:var(--purple);} .sidebar-scene-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0.375rem;} .sidebar-scene-item{border:1px solid var(--hairline-strong);border-radius:var(--radius);overflow:hidden;cursor:grab;transition:all 0.15s;background:var(--surface-elevated);user-select:none;} .sidebar-scene-item:hover{border-color:var(--blue);box-shadow:0 2px 8px rgba(59,130,246,0.15);} .sidebar-scene-item:active{cursor:grabbing;opacity:0.85;} .sidebar-scene-thumb{width:100%;aspect-ratio:3/4;background:#EFF6FF;display:flex;align-items:center;justify-content:center;overflow:hidden;} .sidebar-scene-thumb img{width:100%;height:100%;object-fit:cover;} .sidebar-scene-thumb .placeholder{font-size:1.25rem;opacity:0.5;} .sidebar-scene-info{padding:0.1875rem 0.3125rem;} .sidebar-scene-name{font-size:0.75rem;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .sidebar-scene-role{font-size:0.75rem;color:var(--blue);} /* Episode list items */ /* [推荐] v18.5 老板要求:sidebar 剧集列表字号+间距跟着缩小 (sidebar 200px 配合) */ .item{display:flex;align-items:center;gap:0.375rem;padding:0.4375rem 0.625rem;font-size:0.75rem;color:#e7e5e4;cursor:pointer;transition:all 0.15s;border-radius:5px;margin:1px 0.375rem;font-weight:500;line-height:1.3;} .item:hover{background:rgba(255,255,255,0.04);color:#fafaf9;} .item.active{background:rgba(232,196,160,0.08);color:#fafaf9;font-weight:600;} .item .icon{font-size:0.8125rem;width:1rem;text-align:center;opacity:0.85;flex-shrink:0;} .item .badge{margin-left:auto;font-size:0.75rem;padding:0.0625rem 0.375rem;border-radius:3px;font-weight:600;flex-shrink:0;} .badge-done{background:rgba(22,163,74,0.18);color:#4ade80;} .badge-wip{background:rgba(245,158,11,0.18);color:#fbbf24;} .badge-todo{background:rgba(255,255,255,0.08);color:#e7e5e4;border:1px solid rgba(255,255,255,0.1);} .add-btn{display:flex;align-items:center;gap:0.375rem;padding:0.3125rem 0.625rem 0.3125rem 1rem;font-size:0.75rem;color:var(--muted-soft);cursor:pointer;border-radius:5px;margin:0 0.375rem;line-height:1.3;} .add-btn:hover{color:var(--grad-peach);background:rgba(232,196,160,0.04);} /* 剧集项按钮"生成"也缩小 */ .item >button{font-size:0.75rem;padding:1px 4px !important;border-radius:3px !important;line-height:1.2;} /* ====== Free Canvas Area ====== */ .canvas-area{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--canvas);background-image:radial-gradient(circle at 50% 0%, rgba(232,196,160,0.04) 0%, transparent 50%);position:relative;} /* [推荐] v18.3 canvas-header 紧凑化(标题缩小一半) */ .canvas-header{padding:0.5rem 1rem 0.4rem;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;background:rgba(28,25,23,0.6);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--hairline);z-index:10;} .canvas-header h2{font-family:'Inter',sans-serif;font-size:0.875rem;font-weight:600;letter-spacing:-0.01em;color:var(--text);line-height:1.2;} .canvas-header p{font-size:0.75rem;color:var(--muted);margin-top:0.125rem;line-height:1.4;} .canvas-header .meta{display:flex;gap:0.5rem;font-size:0.75rem;color:var(--muted-soft);margin-top:0.1875rem;font-variant-numeric:tabular-nums;line-height:1.2;} .canvas-header .meta span{display:flex;align-items:center;gap:0.1875rem;} .canvas-toolbar{display:flex;gap:0.25rem;align-items:center;flex-shrink:0;flex-wrap:wrap;} .toolbar-btn{padding:0.1875rem 0.5rem;border:1px solid var(--hairline-strong);background:var(--surface-elevated);border-radius:4px;font-size:0.75rem;font-weight:500;cursor:pointer;transition:all 0.15s;display:flex;align-items:center;gap:0.25rem;color:var(--text-2);line-height:1.2;} .toolbar-btn:hover{border-color:var(--orange-400);color:var(--orange-600);background:var(--orange-50);} .toolbar-btn.primary{background:linear-gradient(135deg,#a855f7,#6366f1);color:#fff;border-color:transparent;} .toolbar-btn.primary:hover{opacity:0.9;} .toolbar-btn.orange{background:var(--orange-500);color:var(--ink-deep);border-color:transparent;} .toolbar-btn.orange:hover{background:var(--orange-600);} /* SVG layout recovery control lives in the persistent workspace toolbar, outside canvasArea. */ .svg-retry-btn{padding:6px 12px;background:#a40e26;color:#fff;border:1px solid rgba(255,255,255,0.22);border-radius:8px;font-size:0.75rem;font-weight:600;line-height:1.25;cursor:pointer;font-family:inherit;flex-shrink:0;} .svg-retry-btn:hover{background:#cf222e;} .svg-retry-btn:focus-visible{outline:2px solid #fff;outline-offset:2px;} /* 同步状态指示器 */ .sync-indicator{display:inline-flex;align-items:center;gap:0.375rem;padding:0.25rem 0.625rem;border:1px solid var(--hairline-strong);background:var(--surface-elevated);border-radius:6px;font-size:0.75rem;font-weight:500;color:var(--text-2);cursor:default;user-select:none;transition:all 0.2s;} .sync-indicator:hover{background:var(--canvas-soft);} .sync-dot{width:8px;height:8px;border-radius:50%;display:inline-block;background:var(--gray-300);transition:background 0.2s;} .sync-indicator.synced .sync-dot{background:var(--green);box-shadow:0 0 6px rgba(16,185,129,0.4);} .sync-indicator.syncing .sync-dot{background:var(--yellow-400);box-shadow:0 0 6px rgba(251,191,36,0.4);animation:pulse 1s ease-in-out infinite;} .sync-indicator.error .sync-dot{background:var(--red);box-shadow:0 0 6px rgba(239,68,68,0.4);} @keyframes pulse{0%,100%{opacity:1}50%{opacity:0.4}} @keyframes agent-blink{0%,100%{opacity:1}50%{opacity:0.3}} .zoom-control{display:flex;align-items:center;gap:0.25rem;padding:0.125rem;border:1px solid var(--hairline-strong);background:var(--surface-elevated);border-radius:6px;font-size:0.75rem;flex-wrap:wrap;} .zoom-btn{width:22px;height:22px;border:none;background:transparent;border-radius:4px;cursor:pointer;font-size:0.75rem;color:var(--text-2);display:flex;align-items:center;justify-content:center;} .zoom-btn:hover{background:var(--canvas-soft);color:var(--text);} .zoom-label{min-width:36px;text-align:center;font-weight:500;color:var(--text);font-size:0.75rem;user-select:none;} /* The free canvas container */ /* v18-fix88 · 2026-07-11 19:30 · 老板反馈「画布背景点阵 + 橙虚线还在」· 修：去 canvas-container background-image 点阵（保留纯色画布） · 改 .select-rect 改为半透明边（保留交互但视觉降噪） · canvas-svg-overlay 默认空,无节点时不渲染橙虚线 */ /* v23.10 canvas-iter2: canvasContainer 是唯一滚动层；全部画布节点必须位于 canvasInner。 */ .canvas-container{flex:1;position:relative;overflow:auto;overscroll-behavior:contain;background:var(--canvas-bg);cursor:default;} .canvas-inner{position:relative;top:0;left:0;width:4000px;height:3000px;min-width:100%;min-height:100%;overflow:visible;transform-origin:0 0;transition:none;background-image:radial-gradient(circle,rgba(255,255,255,0.025) 1px,transparent 1px);background-size:48px 48px;background-position:0 0;} .canvas-inner > .scene-node,.canvas-inner > .prompt-box-canvas{position:absolute;} .select-rect{position:absolute;border:1px solid rgba(232,196,160,0.5);background:rgba(232,196,160,0.04);pointer-events:none;z-index:50;border-radius:2px;} .scene-node.selected-multi{border-color:var(--orange-400);box-shadow:0 0 0 2px rgba(232,196,160,0.3);} .prompt-box-canvas.selected-multi{border-color:var(--orange-400);box-shadow:0 0 0 2px rgba(232,196,160,0.3);} /* SVG overlay for dashed connections */ .canvas-svg-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:6;overflow:visible;} /* ===== Canvas Corner Zoom Handles ===== */ .zoom-handle{position:absolute;width:18px;height:18px;z-index:100;cursor:nwse-resize;background:rgba(245,158,11,0.8);border:2px solid #fff;border-radius:3px;opacity:0;transform:translateX(-50%) scale(0.7);transform-origin:bottom center;transition:opacity 0.35s, transform 0.35s;box-shadow:0 1px 4px rgba(0,0,0,0.3);} .zoom-handle:hover{background:#F97316;transform:scale(1.2);} .canvas-container:hover .zoom-handle{opacity:1;} .zoom-handle.tl{top:-9px;left:-9px;cursor:nwse-resize;} .zoom-handle.tr{top:-9px;right:-9px;cursor:nesw-resize;} .zoom-handle.bl{bottom:-9px;left:-9px;cursor:nesw-resize;} .zoom-handle.br{bottom:-9px;right:-9px;cursor:nwse-resize;} .zoom-handle.active{background:#F97316;opacity:1;} /* Scene node on canvas */ .scene-node{position:absolute;width:280px;min-height:280px;background:var(--canvas-surface);border:2px solid var(--canvas-border);border-radius:var(--radius-lg);overflow:visible;cursor:move;z-index:5;transition:box-shadow 0.2s,border-color 0.2s;min-width:80px;} .scene-node.has-video{background:var(--canvas-surface);border:2px solid var(--canvas-border);border-radius:var(--radius-lg);overflow:visible;width:280px;} .scene-node.has-video .node-video{width:280px;aspect-ratio:16/9;} .scene-node.has-video .node-video video{border-radius:8px;} .scene-node .video-zoom{position:absolute;bottom:4px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:2px;background:rgba(0,0,0,0.65);border-radius:10px;padding:2px 6px;z-index:10;opacity:0;transform:translateX(-50%) scale(0.7);transform-origin:bottom center;transition:opacity 0.35s, transform 0.35s;} .scene-node:hover .video-zoom{opacity:1;transform:translateX(-50%) scale(1);} .scene-node.dragging .video-zoom{opacity:0 !important;pointer-events:none !important;transform:translateX(-50%) scale(0.7) !important;} .scene-node .video-zoom button{background:none;border:none;color:#fff;cursor:pointer;font-size:0.75rem;padding:0 2px;line-height:1;} .scene-node .video-zoom button:hover{color:var(--orange);} .scene-node .video-zoom span{font-size:0.75rem;color:rgba(255,255,255,0.7);min-width:1.75rem;text-align:center;} /* 8方向缩放手柄 */ .node-resize-handle{position:absolute;width:14px;height:14px;z-index:20;background:rgba(232,196,160,0.9);border:2px solid #fff;border-radius:50%;opacity:0;transition:opacity 0.2s,transform 0.15s;pointer-events:auto;box-shadow:0 1px 4px rgba(0,0,0,0.25);} .node-resize-handle:hover{transform:scale(1.3);background:var(--orange-500);} .node-resize-handle.rh-tl{top:-6px;left:-6px;cursor:nwse-resize;} .node-resize-handle.rh-tc{top:-6px;left:50%;transform:translateX(-50%);cursor:ns-resize;} .node-resize-handle.rh-tr{top:-6px;right:-6px;cursor:nesw-resize;} .node-resize-handle.rh-ml{top:50%;left:-6px;transform:translateY(-50%);cursor:ew-resize;} .node-resize-handle.rh-mr{top:50%;right:-6px;cursor:ew-resize;} .node-resize-handle.rh-bl{bottom:-6px;left:-6px;cursor:nesw-resize;} .node-resize-handle.rh-bc{bottom:-6px;left:50%;transform:translateX(-50%);cursor:ns-resize;} .node-resize-handle.rh-br{bottom:-6px;right:-6px;cursor:nwse-resize;} .asset-icon .node-resize-handle{opacity:0.8;width:12px;height:12px;} .asset-icon:hover .node-resize-handle{opacity:1;} .scene-node.has-video .node-info{display:none;} .scene-node.has-video .node-actions{display:none;} .scene-node.has-video .scene-num{position:absolute;top:6px;left:6px;background:rgba(0,0,0,0.55);color:#fff;font-size:0.5625rem;padding:2px 6px;border-radius:4px;z-index:5;backdrop-filter:blur(4px);} .scene-node.has-video .dl-btn{z-index:5;} .scene-node:hover{border-color:var(--yellow-400);box-shadow:0 4px 12px rgba(251,191,36,0.15);} .scene-node.selected{border-color:var(--yellow-500);box-shadow:0 0 0 2px var(--yellow-200),0 4px 16px rgba(251,191,36,0.2);} .scene-node.dragging{opacity:0.85;z-index:100;box-shadow:0 8px 24px rgba(0,0,0,0.15);} /* v30a · 视频节点状态色 */ .scene-node.state-pending{border-left:4px solid var(--orange-500);} .scene-node.state-generating{border-left:4px solid var(--yellow-400);animation:pulse-border 1.5s ease-in-out infinite;} .scene-node.state-generated{border-left:4px solid #10B981;} .scene-node.state-failed{border-left:4px solid #EF4444;} @keyframes pulse-border{0%,100%{box-shadow:0 0 0 0 rgba(251,191,36,0.3);}50%{box-shadow:0 0 0 6px rgba(251,191,36,0);}} /* v30a · 内联操作按钮 */ .node-inline-actions{position:absolute;top:6px;right:6px;display:flex;gap:3px;z-index:10;opacity:0;transition:opacity 0.2s;} .scene-node:hover .node-inline-actions{opacity:1;} .node-inline-actions button{display:flex;align-items:center;justify-content:center;width:24px;height:24px;background:rgba(0,0,0,0.65);border:none;border-radius:5px;color:#fff;cursor:pointer;padding:0;backdrop-filter:blur(4px);} .node-inline-actions button:hover{background:rgba(0,0,0,0.85);color:var(--orange-400);} .scene-node .dl-btn{z-index:5;} .scene-node .quick-gen-btn{background:rgba(16,185,129,0.12);border:1px solid rgba(16,185,129,0.3);color:#10B981;border-radius:4px;padding:0.25rem 0.5rem;font-size:0.625rem;cursor:pointer;font-weight:600;} .scene-node .quick-gen-btn:hover{background:rgba(16,185,129,0.2);} /* v43-fix9 · 画布视频节点浮动按钮 (生成视频/重新生成 → 打开提示词窗口) */ .floating-gen-btn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:20;display:flex;align-items:center;gap:6px;padding:7px 14px;border-radius:8px;border:1px solid rgba(232,196,160,0.5);background:rgba(13,17,23,0.78);color:var(--orange-400,#F5C2A0);font-size:0.75rem;font-weight:600;cursor:pointer;font-family:inherit;backdrop-filter:blur(6px);box-shadow:0 4px 16px rgba(0,0,0,0.35);transition:all 0.15s;white-space:nowrap;} .floating-gen-btn:hover{background:rgba(232,196,160,0.92);color:#0d1117;transform:translate(-50%,-50%) scale(1.05);} .node-preview-video-pending{aspect-ratio:16/9;background:linear-gradient(135deg,rgba(232,196,160,0.08),rgba(168,85,247,0.05));display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;border-radius:calc(var(--radius-lg) - 2px) calc(var(--radius-lg) - 2px) 0 0;cursor:pointer;} .node-preview-video-pending:hover .floating-gen-btn{background:rgba(232,196,160,0.92);color:#0d1117;transform:translate(-50%,-50%) scale(1.05);} /* v30a · 生成中进度条 */ .node-preview-generating{position:relative;} .node-preview{aspect-ratio:16/9;background:var(--canvas-soft);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;border-radius:calc(var(--radius-lg) - 2px) calc(var(--radius-lg) - 2px) 0 0;} .node-preview img{width:100%;height:100%;object-fit:cover;} /* Video in node - no border, direct display */ .node-video{position:relative;aspect-ratio:16/9;background:transparent;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:8px;} .node-video video{width:100%;height:100%;object-fit:cover;display:block;} .node-video .play-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.25);z-index:5;cursor:pointer;transition:opacity 0.2s;opacity:0;} .scene-node:hover .play-overlay{opacity:1;} .scene-node.has-video .play-overlay{display:none;} .node-video .play-overlay:hover{background:rgba(0,0,0,0.15);} .node-video .play-overlay .play-btn{width:36px;height:36px;border-radius:50%;background:rgba(251,191,36,0.9);display:flex;align-items:center;justify-content:center;font-size:1rem;color:#fff;box-shadow:0 2px 12px rgba(251,191,36,0.4);transition:transform 0.2s;} .node-video .play-overlay:hover .play-btn{transform:scale(1.1);} .node-preview .placeholder{color:var(--text-3);font-size:1.5rem;} .node-preview .scene-num{position:absolute;top:6px;left:6px;background:rgba(0,0,0,0.7);color:#fff;font-size:0.5625rem;padding:0.0625rem 0.375rem;border-radius:3px;z-index:6;} .dl-btn{position:absolute;display:flex;align-items:center;justify-content:center;width:24px;height:24px;background:rgba(0,0,0,0.5);color:#fff;border-radius:4px;cursor:pointer;font-size:0.75rem;z-index:10;opacity:0;transition:opacity 0.15s;border:none;} .dl-btn:hover{background:rgba(0,0,0,0.75);} :hover>.dl-btn{opacity:1;} .node-info{padding:0.375rem 0.5rem;background:var(--canvas-surface);} .node-info h4{font-size:0.75rem;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .node-info .desc{font-size:0.75rem;color:var(--text-3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:0.0625rem;line-height:1.4;} .node-info .chars{margin-top:0.1875rem;display:flex;gap:2px;flex-wrap:wrap;} .node-info .chars span{font-size:0.4375rem;background:var(--yellow-100);color:var(--yellow-700);padding:0 3px;border-radius:2px;} .node-actions{display:flex;gap:0.25rem;padding:0.25rem 0.375rem 0.375rem;} .node-actions button{padding:0.125rem 0.25rem;border:1px solid var(--hairline-strong);background:var(--surface-elevated);border-radius:3px;font-size:0.75rem;color:var(--text-3);cursor:pointer;transition:all 0.15s;flex:1;} .node-actions button:hover{border-color:var(--accent);color:var(--text);} .node-actions button.primary{background:var(--orange-500);color:var(--ink-deep);border-color:var(--orange-500);} .node-actions button.primary:hover{background:var(--orange-600);} .prompt-gen-btn{background:linear-gradient(135deg,#a855f7,#6366f1);color:#fff;border:none;border-radius:6px;padding:2px 6px;cursor:pointer;font-size:0.75rem;line-height:1;} .prompt-gen-btn:hover{opacity:0.85;} .prompt-box .connect-dot{width:12px;height:12px;border-radius:50%;background:var(--orange-500);border:2px solid #fff;position:absolute;left:-6px;top:50%;transform:translateY(-50%);cursor:pointer;opacity:0;transform:translateX(-50%) scale(0.7);transform-origin:bottom center;transition:opacity 0.35s, transform 0.35s;box-shadow:0 1px 4px rgba(0,0,0,0.3);z-index:10;} .prompt-box .connect-dot.show{opacity:1;animation:pulse 1s infinite;} @keyframes pulse{0%,100%{transform:translateY(-50%) scale(1)}50%{transform:translateY(-50%) scale(1.3)}} /* Detail Modal Overlay */ .detail-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:9999;display:flex;align-items:center;justify-content:center;gap:1.5rem;padding:2rem;animation:fadeIn 0.15s;} @keyframes fadeIn{from{opacity:0}to{opacity:1}} .detail-overlay .detail-video-wrap{flex-shrink:0;max-height:70vh;border-radius:12px;overflow:hidden;background:#000;box-shadow:0 8px 40px rgba(0,0,0,0.5);} .detail-overlay .detail-video-wrap video{display:block;height:70vh;object-fit:contain;} .detail-overlay .detail-video-wrap img{display:block;height:70vh;object-fit:contain;background:#111;} .detail-overlay .detail-video-wrap .no-media{height:70vh;width:30vh;display:flex;align-items:center;justify-content:center;color:var(--text-3);font-size:0.875rem;} .detail-right{width:340px;max-height:70vh;overflow-y:auto;background:var(--surface-elevated);border:1px solid var(--hairline);border-radius:12px;padding:1.25rem;flex-shrink:0;color:var(--text);} .detail-right h3{font-size:0.9375rem;font-weight:600;color:var(--text);margin:0 0 0.25rem;} .detail-right .synopsis{font-size:0.8125rem;color:var(--text-3);margin-bottom:0.75rem;line-height:1.5;} .detail-right .char-tags{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:0.75rem;} .detail-right .char-tags span{font-size:0.75rem;background:var(--orange-50);color:var(--orange-600);padding:2px 8px;border-radius:4px;} .detail-right .detail-section{margin-bottom:0.75rem;} .detail-right .detail-section label{display:block;font-size:0.75rem;font-weight:600;color:var(--text-3);margin-bottom:0.25rem;} .detail-right .detail-section textarea{width:100%;min-height:140px;padding:0.5rem;border:1px solid var(--hairline-strong);border-radius:6px;font-size:0.75rem;font-family:inherit;resize:vertical;outline:none;line-height:1.6;} .detail-right .detail-section textarea:focus{border-color:var(--orange-400);} .detail-panel-zoom{display:flex;align-items:center;gap:4px;} .detail-panel-zoom button{width:22px;height:22px;border:1px solid var(--hairline-strong);border-radius:4px;background:var(--surface-elevated);cursor:pointer;font-size:0.75rem;line-height:1;display:flex;align-items:center;justify-content:center;color:var(--text-3);} .detail-panel-zoom button:hover{border-color:var(--orange-400);color:var(--orange-500);} .detail-panel-zoom span{font-size:0.75rem;color:var(--text-3);min-width:2.25rem;text-align:center;} .detail-right .detail-actions{display:flex;gap:0.375rem;flex-wrap:wrap;margin-top:0.75rem;} .detail-right .detail-actions .btn{font-size:0.75rem;padding:0.25rem 0.5rem;} .detail-right .ref-section{margin-top:0.75rem;} .detail-right .ref-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:0.375rem;} .detail-right .ref-item{border-radius:6px;overflow:hidden;border:1px solid var(--hairline-strong);aspect-ratio:3/4;position:relative;} .detail-right .ref-item img{width:100%;height:100%;object-fit:cover;} .detail-right .ref-item .ref-name{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,0.6);color:#fff;font-size:0.75rem;padding:2px 4px;text-align:center;} .detail-close{position:absolute;top:1rem;right:1rem;width:32px;height:32px;border:none;background:rgba(255,255,255,0.15);border-radius:50%;cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.8);z-index:10;backdrop-filter:blur(4px);} .detail-close:hover{background:rgba(255,255,255,0.3);} /* ====== v18 detail-redesign (2026-06-25) 左分栏: 提示词 + 右分栏: API 参数 ====== */ .detail-v18-split{display:flex;flex-direction:column;height:calc(70vh - 60px);min-height:0;} .detail-v18-top{display:flex;flex:1;min-height:0;border-bottom:1px solid var(--hairline);} .detail-v18-left{flex:1;display:flex;flex-direction:column;min-width:0;border-right:1px solid var(--hairline);background:var(--surface-elevated);} .detail-v18-right{width:200px;flex-shrink:0;display:flex;flex-direction:column;min-height:0;background:var(--canvas-soft);overflow-y:auto;} .detail-v18-prompt-area{flex:1;display:flex;flex-direction:column;min-height:0;padding:10px 12px;} .detail-v18-prompt-area .dp-label{font-size:0.75rem;font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:6px;display:flex;justify-content:space-between;align-items:center;} .detail-v18-prompt-area textarea{flex:1;width:100%;min-height:120px;padding:8px 10px;border:1px solid var(--hairline-strong);border-radius:5px;font-family:ui-monospace,monospace;font-variant-numeric:tabular-nums;font-size:0.75rem;line-height:1.55;resize:none;color:var(--text);background:var(--surface-elevated);} .detail-v18-prompt-area textarea:focus{outline:none;border-color:var(--orange-400);box-shadow:0 0 0 2px rgba(232,196,160,0.15);} .detail-v18-prompt-footer{display:flex;gap:6px;align-items:center;margin-top:6px;} .detail-v18-prompt-footer .char-count{font-size:0.75rem;color:var(--text-3);margin-left:auto;} .detail-v18-prompt-footer button{padding:4px 8px;border:1px solid var(--hairline-strong);background:var(--surface-elevated);border-radius:4px;font-size:0.75rem;cursor:pointer;color:var(--text);} .detail-v18-prompt-footer button.magic{background:linear-gradient(135deg,#a855f7,#6366f1);color:#fff;border:none;} .detail-v18-prompt-footer button:hover{background:var(--canvas-soft);} .detail-v18-prompt-footer button.magic:hover{filter:brightness(1.1);} .detail-v18-params-area{flex:1;overflow-y:auto;padding:8px 10px;} .detail-v18-params-area .dp-label{font-size:0.75rem;font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:0.05em;margin:6px 0 4px;} .detail-v18-params-area .dp-label:first-child{margin-top:0;} .dp-row-v18{display:flex;align-items:center;gap:4px;margin-bottom:5px;font-size:0.75rem;} .dp-row-v18 label{flex:1;color:var(--text-2);font-size:0.75rem;} .dp-row-v18 select,.dp-row-v18 input{flex:1.4;padding:3px 5px;border:1px solid var(--hairline-strong);border-radius:3px;font-size:0.75rem;background:var(--surface-elevated);font-family:inherit;color:var(--text);} .dp-row-v18 select:focus,.dp-row-v18 input:focus{outline:none;border-color:var(--orange-400);} .dp-row-v18-toggle{justify-content:space-between;} /* v18-fix46 · 右侧 API 参数透明面板 (项目锁定 + 透出上传值) */ .dp-api-table{width:100%;border-collapse:collapse;margin:4px 0 8px;font-size:0.75rem;font-family:ui-monospace,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums;background:var(--canvas-soft);border:1px solid var(--hairline);border-radius:6px;overflow:hidden;} .dp-api-table thead th{background:rgba(232,196,160,0.08);color:var(--orange-500);font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;padding:5px 6px;text-align:left;border-bottom:1px solid var(--hairline);} .dp-api-table thead th.dp-api-h-opts{color:var(--text-3);text-align:left;} .dp-api-table thead th.dp-api-h-arrow{width:14px;text-align:center;} .dp-api-table tbody tr{border-top:1px solid var(--hairline);height:40px;} .dp-api-table tbody tr:first-child{border-top:none;} .dp-api-table td{padding:4px 12px;color:var(--text-2);vertical-align:middle;font-size:0.75rem;height:40px;line-height:32px;overflow:hidden;} .dp-api-table td.dp-api-key{color:var(--text);font-weight:600;width:96px;letter-spacing:-0.01em;} .dp-api-table td.dp-api-opts{color:var(--text-3);font-size:0.75rem;width:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px;} .dp-api-table td.dp-api-arrow{color:var(--text-3);text-align:center;width:14px;} .dp-api-table td.dp-api-upload{color:var(--text);font-weight:700;text-align:right;background:rgba(232,196,160,0.04);white-space:nowrap;} /* VIPER v23 BUG #4 fix · select/option 不撑高行 */ .dp-api-table td select{height:28px;font-size:0.75rem;padding:2px 6px;line-height:24px;vertical-align:middle;} /* VIPER v24 BUG #4 fix · td height 不生效, 用 line-clamp 限制内容高度 */ .dp-api-table tbody tr{height:40px;} .dp-api-table tbody td{padding:4px 12px;font-size:0.75rem;vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px;} .dp-api-table tbody td select{height:28px;font-size:0.75rem;padding:2px 6px;} .dp-api-table tbody td.dp-api-upload{max-width:120px;} .dp-api-inline{display:inline-block;padding:2px 8px;background:var(--canvas);border:1px solid var(--hairline-strong);border-radius:4px;color:var(--text-2);font-family:ui-monospace,monospace;font-size:0.75rem;font-variant-numeric:tabular-nums;} .dp-toggle-v18{position:relative;width:28px;height:16px;background:var(--gray-300);border-radius:8px;cursor:pointer;transition:0.2s;flex-shrink:0;} .dp-toggle-v18::after{content:'';position:absolute;top:1px;left:1px;width:14px;height:14px;background:var(--surface-elevated);border-radius:50%;transition:0.2s;} .dp-toggle-v18.on{background:var(--green);} .dp-toggle-v18.on::after{left:13px;} .dp-type-buttons{display:flex;gap:3px;margin-bottom:5px;} .dp-type-buttons button{flex:1;padding:3px 4px;border:1.5px solid var(--gray-200);border-radius:4px;font-size:0.75rem;cursor:pointer;background:var(--surface-elevated);color:var(--text-2);font-weight:500;} .dp-type-buttons button.active{color:#fff;} .dp-type-buttons button.t-character.active{background:#3b82f6;border-color:#3b82f6;} .dp-type-buttons button.t-scene.active{background:#10b981;border-color:#10b981;} .dp-type-buttons button.t-item.active{background:#a855f7;border-color:#a855f7;} .dp-type-buttons button.t-video.active{background:#ef4444;border-color:#ef4444;} .detail-v18-bottom{flex-shrink:0;display:flex;flex-direction:column;max-height:45%;border-top:1px solid var(--hairline);background:var(--surface-elevated);} .detail-v18-bottom-tabs{display:flex;border-bottom:1px solid var(--hairline);flex-shrink:0;} .detail-v18-bottom-tab{padding:6px 10px;font-size:0.75rem;color:var(--text-3);cursor:pointer;border-right:1px solid var(--hairline);background:var(--surface-elevated);} .detail-v18-bottom-tab.active{color:var(--orange-600);background:var(--surface-elevated);font-weight:600;border-bottom:2px solid var(--orange-500);} .detail-v18-bottom-body{flex:1;overflow-y:auto;padding:8px 10px;} .detail-v18-result-card{border:1px solid var(--hairline-strong);border-radius:5px;padding:var(--space-2);margin-bottom:6px;background:var(--surface-elevated);} .detail-v18-result-card.active{border-color:var(--orange-400);box-shadow:0 0 0 1px var(--orange-400);} .detail-v18-result-card .drc-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;font-size:0.75rem;color:var(--text-3);} .detail-v18-result-card .drc-status{padding:1px 6px;border-radius:3px;font-size:0.75rem;font-weight:600;} .detail-v18-result-card .drc-status.pending{background:rgba(245,158,11,0.15);color:var(--grad-peach);} .detail-v18-result-card .drc-status.processing{background:#DBEAFE;color:#1E40AF;} .detail-v18-result-card .drc-status.completed{background:rgba(232,196,160,0.15);color:var(--accent-3);} .detail-v18-result-card .drc-status.failed{background:rgba(220,38,38,0.15);color:#fca5a5;} .detail-v18-result-card .drc-thumb{max-width:100%;max-height:120px;border-radius:3px;display:block;margin:4px 0;} .detail-v18-result-card .drc-thumb video{max-width:100%;max-height:160px;} .detail-v18-result-card .drc-params{font-size:0.75rem;color:var(--text-3);font-family:monospace;line-height:1.5;margin-top:4px;} .detail-v18-result-card .drc-actions{display:flex;gap:4px;margin-top:6px;flex-wrap:wrap;} .detail-v18-result-card .drc-actions button{padding:3px 8px;border:1px solid var(--hairline-strong);background:var(--surface-elevated);border-radius:3px;font-size:0.75rem;cursor:pointer;color:var(--text);} .detail-v18-result-card .drc-actions button.primary{background:var(--orange-500);color:var(--ink-deep);border-color:var(--orange-500);} .detail-v18-result-card .drc-actions button:hover{background:var(--canvas-soft);} .detail-v18-result-card .drc-actions button.primary:hover{background:var(--orange-600);} .detail-v18-no-result{color:var(--text-3);font-size:0.75rem;text-align:center;padding:24px 0;} /* v23.10-ai-summary · 大纲/剧本 AI 输出默认概述，展开后完整内容独立滚动 */ .ai-output-summary{padding:8px 12px;background:var(--canvas);border:1px solid var(--hairline-strong);border-radius:6px;color:var(--text-2);align-self:flex-start;max-width:85%;font-size:0.75rem;line-height:1.5;} .ai-output-summary-meta{font-size:0.75rem;color:var(--text-3);margin-bottom:6px;} .ai-output-summary-content{white-space:pre-wrap;overflow-wrap:anywhere;} .ai-output-summary.expanded .ai-output-summary-content{max-height:800px;overflow-y:auto;padding-right:8px;} .ai-output-summary-toggle{margin-top:8px;padding:4px 0;border:0;background:transparent;color:var(--orange-500);font:600 0.6875rem/1.4 inherit;cursor:pointer;} .ai-output-summary-toggle:hover{color:var(--orange-600);} .detail-v18-generate-btn{display:flex;align-items:center;justify-content:center;gap:4px;padding:6px 12px;font-size:0.75rem;font-weight:600;color:var(--ink-deep);background:var(--accent);border:none;border-radius:4px;cursor:pointer;width:100%;margin-top:6px;} .detail-v18-generate-btn:hover{filter:brightness(1.1);} .detail-v18-generate-btn:disabled{opacity:0.5;cursor:not-allowed;} /* ====== [2026-06-25 21:13 红线 24] API 调用确认 modal ====== */ .api-confirm-modal{position:fixed;inset:0;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;z-index:10000;backdrop-filter:blur(4px);} .api-confirm-modal[hidden]{display:none;} .api-confirm-card{background:var(--surface-elevated);border:1px solid var(--hairline-strong);border-radius:12px;padding:var(--space-6);max-width:480px;width:90vw;box-shadow:0 20px 60px rgba(0,0,0,0.7);animation:apiConfirmIn 0.18s ease-out;color:var(--text);} @keyframes apiConfirmIn{from{opacity:0;transform:translateY(-10px) scale(0.97);}to{opacity:1;transform:translateY(0) scale(1);}} .api-confirm-card h3{color:#f59e0b;margin:0 0 12px 0;font-size:1.125rem;display:flex;align-items:center;gap:6px;} .api-confirm-card .api-confirm-desc{color:var(--text);font-size:0.875rem;margin:0 0 8px 0;} .api-confirm-card ul{background:#f8f9fa;padding:12px 14px;border-radius:6px;margin:12px 0;list-style:none;border:1px solid var(--hairline);} .api-confirm-card ul li{font-size:0.8125rem;color:var(--text);line-height:1.6;display:flex;justify-content:space-between;gap:var(--space-3);} .api-confirm-card ul li b{color:var(--text-3);font-weight:600;flex-shrink:0;} .api-confirm-card ul li span{color:#111827;font-family:ui-monospace,monospace;font-variant-numeric:tabular-nums;font-size:0.75rem;text-align:right;word-break:break-all;} .api-confirm-warning{color:#ef4444;font-size:0.8125rem;margin:8px 0 0 0;font-weight:500;display:flex;align-items:center;gap:4px;} .api-confirm-cost{color:#dc2626;font-weight:600;} .api-confirm-actions{display:flex;gap:var(--space-2);justify-content:flex-end;margin-top:18px;} .api-confirm-actions button{padding:8px 18px;border:none;border-radius:6px;font-size:0.875rem;font-weight:600;cursor:pointer;transition:filter 0.15s;font-family:inherit;} .api-confirm-actions button:hover{filter:brightness(1.08);} .api-confirm-cancel{background:var(--canvas-soft);color:var(--text);border:1px solid var(--hairline);} .api-confirm-ok{background:#e8c4a0;color:#fff;box-shadow:0 2px 6px rgba(232,196,160,0.3);} .detail-v18-wide .detail-right{width:560px;max-width:80vw;} .detail-v18-wide .detail-v18-right{width:200px;} /* ====== [2026-06-25 21:40 老板红线] Detail Popup Modal (centered, not right slide-out) ====== 老版是右侧 560px slide-out (.detail-right), 现在改成 centered modal 弹窗 老板原话: "点开后放大, 弹窗形式, 中间是放大的提示词, 右边是 API 参数, 包括引用的参考图、音频、视频等等, 要以对应形式呈现, 左边的素材库也要保留" */ .detail-popup-modal{position:fixed;inset:0;background:rgba(0,0,0,0.25);z-index:9999;display:flex;align-items:center;justify-content:center;animation:fadeIn 0.18s;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);} .detail-popup-card{background:var(--surface-elevated);border:1px solid var(--hairline-strong);border-radius:14px;width:min(95vw,1200px);max-width:1200px;max-height:90vh;display:flex;flex-direction:column;box-shadow:0 30px 80px rgba(0,0,0,0.7);overflow:hidden;animation:popupIn 0.2s ease-out;color:var(--text);} @keyframes popupIn{from{opacity:0;transform:translateY(-12px) scale(0.97);}to{opacity:1;transform:translateY(0) scale(1);}} .detail-popup-head{flex-shrink:0;padding:14px 18px;border-bottom:1px solid var(--hairline);display:flex;justify-content:space-between;align-items:center;background:linear-gradient(135deg,rgba(232,196,160,0.04),rgba(168,85,247,0.04));} .detail-popup-head h3{margin:0;font-size:0.9375rem;font-weight:600;color:var(--text);display:flex;align-items:center;gap:var(--space-2);} .detail-popup-head .dph-meta{font-size:0.75rem;color:var(--text-3);font-weight:400;} .detail-popup-close{background:none;border:none;font-size:1.4rem;cursor:pointer;color:var(--text-3);padding:2px 10px;border-radius:6px;line-height:1;transition:all 0.15s;} .detail-popup-close:hover{color:#fff;background:#ef4444;} .detail-popup-body{flex:1;display:flex;min-height:0;overflow:hidden;} /* v23.10 GEN4+7 BUG-B · 老板 2026-07-20 报「左右两边一样大」· 改为左 30% label + 右 70% params (sidebar 窄, params 宽) */ .detail-popup-center{flex:0 0 70%;max-width:70%;display:flex;flex-direction:column;min-width:280px;overflow:hidden;border-right:1px solid var(--hairline);background:var(--surface-elevated);} .detail-popup-prompt-area{flex:1;display:flex;flex-direction:column;min-height:0;padding:14px 16px;} .detail-popup-prompt-area .dp-label{font-size:0.75rem;font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:6px;display:flex;justify-content:space-between;align-items:center;} .detail-popup-prompt{width:100%;flex:1;min-height:200px;padding:10px 12px;border:1px solid var(--hairline-strong);border-radius:8px;font-family:ui-monospace,monospace;font-variant-numeric:tabular-nums;font-size:0.8125rem;line-height:1.6;resize:none;outline:none;color:var(--text);background:var(--surface-elevated);transition:border-color 0.15s;} .detail-popup-prompt:focus{border-color:var(--orange-400);box-shadow:0 0 0 3px rgba(232,196,160,0.15);} /* v18-fix63 · 2026-07-08 · 老板反馈「4-tab 拆太多,所有参数应该在一页」· 单页 modal */ .v18-fullscreen-modal{position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,0.55);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;animation:fadeIn 0.18s;} .v18-fs-card{background:var(--surface-elevated);border:1px solid var(--hairline-strong);border-radius:16px;width:min(95vw,1200px);max-width:1200px;height:90vh;display:flex;flex-direction:column;box-shadow:0 30px 80px rgba(0,0,0,0.7);overflow:hidden;} .v18-fs-head{padding:14px 20px;border-bottom:1px solid var(--hairline);display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,rgba(232,196,160,0.05),rgba(168,85,247,0.05));flex-shrink:0;} .v18-fs-close{background:none;border:none;font-size:1.6rem;cursor:pointer;color:var(--text-3);padding:2px 12px;border-radius:8px;line-height:1;transition:all 0.15s;} .v18-fs-close:hover{color:#fff;background:#ef4444;} .v18-fs-body{flex:1;display:flex;flex-direction:column;min-height:0;padding:16px 20px;overflow:hidden;gap:14px;} .v18-fs-prompt{width:100%;flex:1;min-height:0;padding:14px 18px;border:1px solid var(--hairline-strong);border-radius:10px;font-family:ui-monospace,monospace;font-variant-numeric:tabular-nums;font-size:0.9375rem;line-height:1.7;resize:none;outline:none;color:var(--text);background:var(--canvas-soft);} .v18-fs-prompt:focus{border-color:var(--orange-400);box-shadow:0 0 0 3px rgba(232,196,160,0.15);} .v18-fs-btn{padding:8px 14px;border:1px solid var(--hairline-strong);background:var(--canvas-soft);color:var(--text-2);border-radius:8px;cursor:pointer;font-size:0.8125rem;font-weight:500;font-family:inherit;transition:all 0.15s;} .v18-fs-btn:hover{background:var(--canvas);border-color:var(--orange-500);color:var(--orange-500);} .v18-fs-btn.primary{background:var(--grad-peach);color:var(--ink-deep);border:none;} .v18-fs-btn.primary:hover{filter:brightness(1.08);} .v18-fs-meta{margin-left:auto;font-size:0.75rem;color:var(--text-3);font-weight:400;} .v18-fs-chat{flex:1;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:10px;background:var(--canvas-soft);border:1px solid var(--hairline-strong);border-radius:10px;} .v18-fs-chat-msg{padding:10px 14px;border-radius:10px;font-size:0.875rem;line-height:1.6;max-width:80%;word-break:break-word;} .v18-fs-chat-user{background:rgba(232,196,160,0.10);border:1px solid rgba(232,196,160,0.25);color:var(--text);align-self:flex-end;} .v18-fs-chat-assistant{background:var(--canvas);border:1px solid var(--hairline-strong);color:var(--text-2);align-self:flex-start;} .v18-fs-chat-role{font-size:0.75rem;font-weight:700;color:var(--text-3);margin-bottom:4px;text-transform:uppercase;letter-spacing:0.05em;} .v18-fs-chat-content{white-space:pre-wrap;font-family:ui-monospace,monospace;font-size:0.8125rem;line-height:1.6;} .v18-fs-chat-apply{margin-top:6px;padding:4px 10px;background:var(--grad-peach);color:var(--ink-deep);border:none;border-radius:6px;cursor:pointer;font-size:0.75rem;font-weight:600;font-family:inherit;} .v18-fs-chat-input{flex:1;padding:10px 14px;background:var(--canvas-soft);border:1px solid var(--hairline-strong);border-radius:8px;font-size:0.875rem;font-family:inherit;color:var(--text);outline:none;} .v18-fs-chat-input:focus{border-color:var(--orange-400);box-shadow:0 0 0 3px rgba(232,196,160,0.15);} /* v18-fix30 · 老板 09:14 反馈「点击文本框应该放大」 */ /* v18-fix30 · 老板 09:14 反馈「点击文本框应该放大」 · v23.10 GEN4+7 BUG-B 改: focus 还是 50/50, 比默认 30/70 更宽松 */ .v18-prompt-focus .detail-popup-center{flex:0 0 80%;max-width:80%;min-width:0;} .v18-prompt-focus .detail-popup-right{flex:1 1 50%;min-width:280px;background:rgba(232,196,160,0.04);transition:all 0.2s;} .v18-prompt-focus .detail-popup-prompt{font-size:0.9375rem;border-color:var(--orange-400);} /* v18-fix30 · 「API 上传参数」面板 */ .v18-api-upload-panel{padding:10px 14px;background:rgba(232,196,160,0.06);border-bottom:1px solid rgba(232,196,160,0.2);animation:fadeIn 0.18s;} .v18-api-panel-title{font-size:0.75rem;font-weight:600;color:var(--orange-600);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:8px;display:flex;align-items:center;gap:4px;} .v18-api-panel-title::before{content:'';width:3px;height:10px;background:var(--orange-500);border-radius:1.5px;} .v18-api-panel-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;} .v18-api-group{background:var(--surface-elevated);border:1px solid var(--hairline);border-radius:6px;padding:6px 8px;display:flex;flex-direction:column;gap:4px;} .v18-api-group-head{display:flex;align-items:center;gap:4px;font-size:0.75rem;font-weight:600;} .v18-api-group-label{flex:1;color:var(--text-2);} .v18-api-group-count{background:rgba(232,196,160,0.15);color:var(--orange-600);font-size:0.75rem;padding:1px 5px;border-radius:3px;font-weight:700;} .v18-api-group-list{min-height:20px;display:flex;flex-wrap:wrap;gap:3px;} .v18-api-item{font-size:0.75rem;padding:1px 5px;background:var(--canvas-soft);border:1px solid var(--hairline);border-radius:3px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .v18-api-empty{font-size:0.75rem;color:var(--text-3);font-style:italic;padding:2px 0;} .v18-api-more{font-size:0.75rem;color:var(--orange-600);font-weight:600;} .v18-api-add-btn{margin-top:2px;padding:3px 6px;background:var(--orange-500);color:var(--ink-deep);border:none;border-radius:4px;font-size:0.75rem;cursor:pointer;font-weight:600;} .v18-api-add-btn:hover{filter:brightness(1.1);} .v18-api-panel-tip{font-size:0.75rem;color:var(--text-3);margin-top:6px;line-height:1.4;padding-top:6px;border-top:1px dashed var(--hairline);} .detail-popup-prompt-meta{display:flex;gap:6px;align-items:center;margin-top:10px;font-size:0.75rem;color:var(--text-3);} .detail-popup-prompt-meta .char-count{margin-left:auto;color:var(--text-3);font-weight:500;} .detail-popup-prompt-meta button{padding:5px 10px;border:1px solid var(--hairline-strong);background:var(--surface-elevated);border-radius:5px;font-size:0.75rem;cursor:pointer;color:var(--text);font-weight:500;transition:all 0.15s;} .detail-popup-prompt-meta button:hover{background:var(--canvas-soft);border-color:var(--gray-300);} .detail-popup-prompt-meta button.magic{background:linear-gradient(135deg,#a855f7,#6366f1);color:#fff;border:none;} .detail-popup-prompt-meta button.magic:hover{filter:brightness(1.1);} /* v23.10 GEN4+7 BUG-B · 老板 2026-07-20 报「左右两边一样大」· 右侧 params 70% 宽, 容纳更多参数 */ .detail-popup-right{flex:1 1 70%;min-width:340px;display:flex;flex-direction:column;background:var(--canvas-soft);overflow:hidden;} .detail-popup-right-head{padding:12px 14px 8px;border-bottom:1px solid var(--hairline);background:var(--surface-elevated);} .detail-popup-type-chips{display:flex;gap:4px;} .detail-popup-type-chips button{flex:1;padding:6px 8px;border:1.5px solid var(--gray-200);border-radius:5px;font-size:0.75rem;cursor:pointer;background:var(--surface-elevated);color:var(--text-2);font-weight:500;transition:all 0.15s;} .detail-popup-type-chips button:hover{border-color:var(--gray-300);} .detail-popup-type-chips button.active{color:#fff;} .detail-popup-type-chips button[data-type="character"].active{background:#3b82f6;border-color:#3b82f6;} .detail-popup-type-chips button[data-type="scene"].active{background:#10b981;border-color:#10b981;} .detail-popup-type-chips button[data-type="item"].active{background:#a855f7;border-color:#a855f7;} .detail-popup-type-chips button[data-type="video"].active{background:#ef4444;border-color:#ef4444;} .detail-popup-params{flex:1;overflow-y:auto;padding:10px 14px;} .detail-popup-generate{display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 14px;font-size:0.8125rem;font-weight:600;color:var(--ink-deep);background:var(--accent);border:none;border-radius:0 0 0 0;cursor:pointer;flex-shrink:0;transition:filter 0.15s;} .detail-popup-generate:hover{filter:brightness(1.1);} .detail-popup-generate:disabled{opacity:0.5;cursor:not-allowed;} .detail-popup-gen-status{padding:6px 14px;font-size:0.75rem;color:var(--text-3);text-align:center;background:var(--surface-elevated);border-top:1px solid var(--hairline);flex-shrink:0;} /* v23.10 GEN4+7 BUG-C · 老板 2026-07-20 报「对话框在哪里啊」· AI 修改对话面板 CSS */ .detail-popup-ai-chat{border-top:2px solid var(--orange-500);display:flex;flex-direction:column;background:var(--surface-elevated);flex-shrink:0;max-height:40vh;min-height:160px;} .dp-chat-head{padding:8px 14px;background:linear-gradient(135deg,rgba(232,196,160,0.06),rgba(168,85,247,0.04));border-bottom:1px solid var(--hairline);display:flex;flex-direction:column;gap:2px;flex-shrink:0;} .dp-chat-title{font-size:0.75rem;font-weight:700;color:var(--orange-500);display:flex;align-items:center;gap:6px;} .dp-chat-title::before{content:'';width:3px;height:12px;background:var(--orange-500);border-radius:1.5px;} .dp-chat-hint{font-size:0.75rem;color:var(--text-3);font-weight:400;line-height:1.4;} .dp-chat-history{flex:1;overflow-y:auto;padding:8px 14px;display:flex;flex-direction:column;gap:6px;background:var(--canvas-soft);min-height:60px;font-size:0.75rem;} .dp-chat-msg{padding:7px 10px;border-radius:7px;line-height:1.5;word-break:break-word;max-width:90%;} .dp-chat-msg-user{background:rgba(232,196,160,0.10);border:1px solid rgba(232,196,160,0.25);color:var(--text);align-self:flex-end;} .dp-chat-msg-assistant{background:var(--canvas);border:1px solid var(--hairline-strong);color:var(--text-2);align-self:flex-start;} .dp-chat-msg-role{font-size:0.75rem;font-weight:700;color:var(--text-3);margin-bottom:3px;text-transform:uppercase;letter-spacing:0.05em;} .dp-chat-msg-content{white-space:pre-wrap;font-family:ui-monospace,monospace;font-size:0.75rem;line-height:1.5;} .dp-chat-msg-apply{margin-top:6px;padding:4px 10px;background:var(--orange-500);color:var(--ink-deep);border:none;border-radius:5px;cursor:pointer;font-size:0.75rem;font-weight:600;font-family:inherit;} .dp-chat-msg-apply:hover{filter:brightness(1.1);} .dp-chat-empty{text-align:center;color:var(--text-3);font-size:0.75rem;padding:14px 0;font-style:italic;} .dp-chat-input-row{padding:8px 10px;border-top:1px solid var(--hairline);background:var(--surface-elevated);display:flex;gap:6px;align-items:flex-end;flex-shrink:0;} .dp-chat-input{flex:1;min-height:38px;max-height:120px;padding:8px 10px;background:var(--canvas-soft);border:1.5px solid var(--hairline-strong);border-radius:6px;font-size:0.8125rem;font-family:inherit;color:var(--text);resize:vertical;outline:none;} .dp-chat-input:focus{border-color:var(--orange-400);box-shadow:0 0 0 3px rgba(232,196,160,0.15);} .dp-chat-send{padding:8px 14px;background:var(--accent);color:var(--ink-deep);border:none;border-radius:6px;cursor:pointer;font-size:0.8125rem;font-weight:600;font-family:inherit;white-space:nowrap;flex-shrink:0;} .dp-chat-send:hover{filter:brightness(1.1);} .dp-chat-send:disabled{opacity:0.5;cursor:not-allowed;} /* v18-fix19 · 2026-07-06 07:00 · 老板反馈「添加素材弹文本框」· 视觉素材库选择器 */ .v18-mat-picker-modal{position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:10000;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:fadeIn 0.18s;} .vmp-card{background:var(--surface-elevated);border:1px solid var(--hairline-strong);border-radius:14px;width:min(95vw,900px);max-height:85vh;display:flex;flex-direction:column;box-shadow:0 30px 80px rgba(0,0,0,0.6);overflow:hidden;animation:popupIn 0.2s ease-out;} .vmp-card-wide{width:min(95vw,1100px);} /* v18-fix32 · 3 库选择器 */ .vmp-library-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:24px;} .vmp-library-card{background:var(--canvas-soft);border:1.5px solid var(--hairline);border-radius:12px;padding:24px 18px;cursor:pointer;transition:all 0.2s;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;font-family:inherit;color:var(--text);} .vmp-library-card:hover{border-color:var(--orange-500);background:rgba(232,196,160,0.08);transform:translateY(-2px);box-shadow:0 8px 24px rgba(232,196,160,0.2);} .vmp-library-card:active{transform:translateY(0);} .vmp-lib-icon{font-size:2.5rem;line-height:1;} .vmp-lib-name{font-size:1rem;font-weight:700;color:var(--text);} .vmp-lib-count{font-size:0.75rem;color:var(--orange-600);font-weight:600;} .vmp-lib-desc{font-size:0.75rem;color:var(--text-3);line-height:1.4;margin-top:4px;} .vmp-back-btn{padding:5px 12px;background:transparent;color:var(--text-2);border:1px solid var(--hairline-strong);border-radius:6px;cursor:pointer;font-size:0.75rem;font-family:inherit;} .vmp-back-btn:hover{background:var(--canvas-soft);} .vmp-head{flex-shrink:0;padding:14px 18px;border-bottom:1px solid var(--hairline);display:flex;justify-content:space-between;align-items:center;background:linear-gradient(135deg,rgba(232,196,160,0.06),rgba(168,85,247,0.06));} .vmp-head h3{margin:0;font-size:0.9375rem;font-weight:600;color:var(--text);display:flex;align-items:center;gap:8px;} .vmp-scene-tag{display:inline-block;padding:2px 8px;background:rgba(232,196,160,0.15);color:var(--orange-500);border-radius:4px;font-size:0.75rem;font-weight:600;font-family:monospace;} .vmp-close{background:none;border:none;color:var(--text-3);font-size:1rem;line-height:1;cursor:pointer;padding:0;width:28px;height:28px;border-radius:6px;transition:background 0.15s;} .vmp-close:hover{background:rgba(0,0,0,0.08);color:var(--text);} .vmp-toolbar{flex-shrink:0;padding:10px 18px;border-bottom:1px solid var(--hairline);display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--canvas-soft);} .vmp-tabs{display:flex;gap:4px;} .vmp-tab{padding:5px 12px;font-size:0.75rem;background:transparent;border:1px solid var(--hairline-strong);color:var(--text-3);border-radius:6px;cursor:pointer;font-family:inherit;transition:all 0.15s;} .vmp-tab:hover{border-color:var(--orange-500);color:var(--text);} .vmp-tab.active{background:var(--orange-500);color:var(--ink-deep);border-color:var(--orange-500);font-weight:600;} .vmp-tools{display:flex;gap:8px;align-items:center;} .vmp-search{padding:5px 10px;background:var(--canvas);border:1px solid var(--hairline-strong);border-radius:6px;color:var(--text);font-size:0.75rem;width:160px;font-family:inherit;} .vmp-search:focus{outline:none;border-color:var(--orange-500);} .vmp-upload-btn{padding:5px 12px;background:linear-gradient(135deg,#3B82F6,#6366F1);color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:0.75rem;font-weight:600;font-family:inherit;transition:filter 0.15s;} .vmp-upload-btn:hover{filter:brightness(1.1);} .vmp-body{flex:1;overflow-y:auto;padding:14px 18px;} .vmp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;} .vmp-item{background:var(--canvas);border:1px solid var(--hairline);border-radius:8px;overflow:hidden;cursor:pointer;transition:all 0.15s;display:flex;flex-direction:column;} .vmp-item:hover{border-color:var(--orange-500);transform:translateY(-2px);box-shadow:0 4px 14px rgba(232,196,160,0.25);} .vmp-thumb{width:100%;aspect-ratio:1;background:var(--canvas-soft);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;} .vmp-thumb img,.vmp-thumb video{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0;} .vmp-fallback,.vmp-audio-fallback{position:absolute;inset:0;display:none;align-items:center;justify-content:center;font-size:1.5rem;color:var(--text-3);background:var(--canvas-soft);pointer-events:none;} .vmp-audio-fallback{display:flex;font-size:3rem;color:#8B5CF6;background:linear-gradient(135deg,rgba(139,92,246,0.1),rgba(168,85,247,0.15));} .vmp-meta{padding:6px 8px;} .vmp-name{font-size:0.75rem;color:var(--text);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:3px;} .vmp-type-badge{display:inline-block;padding:1px 6px;font-size:0.75rem;border-radius:3px;font-weight:600;} .vmp-type-character{background:rgba(59,130,246,0.15);color:#3B82F6;} .vmp-type-scene{background:rgba(16,185,129,0.15);color:#10B981;} .vmp-type-video{background:rgba(239,68,68,0.15);color:#EF4444;} .vmp-type-audio{background:rgba(139,92,246,0.15);color:#8B5CF6;} .vmp-empty{padding:60px 20px;text-align:center;color:var(--text-3);} .vmp-empty-icon{font-size:3rem;margin-bottom:12px;} .vmp-empty-tip{font-size:0.75rem;margin-top:6px;color:var(--text-3);opacity:0.7;} .detail-popup-foot{flex-shrink:0;display:flex;border-top:1px solid var(--hairline);max-height:280px;min-height:200px;background:var(--surface-elevated);} .detail-popup-foot-full{display:block;} .detail-popup-foot-full .detail-popup-history-full{padding:14px 20px;} .detail-popup-materials{flex:1;padding:12px 16px;overflow-y:auto;border-right:1px solid var(--hairline);} .detail-popup-history{flex:1;padding:12px 16px;overflow-y:auto;} .detail-popup-history-full{flex:1 1 100%;width:100%;} .detail-popup-foot h4{margin:0 0 8px 0;font-size:0.75rem;font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:0.05em;display:flex;justify-content:space-between;align-items:center;} .detail-popup-foot h4 .h4-count{color:var(--text-3);font-weight:400;text-transform:none;letter-spacing:0;font-size:0.75rem;} .detail-material{position:relative;display:inline-block;margin:4px 6px 4px 0;border-radius:6px;overflow:hidden;border:1px solid var(--hairline-strong);vertical-align:top;background:var(--surface-elevated);cursor:pointer;transition:transform 0.15s,box-shadow 0.15s;} .detail-material:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.15);} .detail-material.dm-image img{width:130px;height:90px;object-fit:cover;display:block;} .detail-material.dm-video video{width:160px;height:90px;display:block;background:#000;} .detail-material.dm-audio audio{width:240px;height:36px;display:block;padding:4px;background:var(--canvas-soft);} .detail-material .dm-name{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,0.65);color:#fff;font-size:0.75rem;padding:2px 6px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .detail-material.dm-audio .dm-name{position:relative;background:var(--canvas-soft);color:var(--text-2);padding:4px 6px;font-size:0.75rem;} .detail-material .dm-type-badge{position:absolute;top:4px;left:4px;background:rgba(0,0,0,0.55);color:#fff;font-size:0.75rem;padding:1px 5px;border-radius:3px;font-weight:500;text-transform:uppercase;} .detail-empty{color:var(--text-3);font-size:0.75rem;padding:20px 12px;text-align:center;} .detail-popup-history-tabs{display:flex;gap:0;border-bottom:1px solid var(--hairline);margin-bottom:8px;} .detail-popup-history-tabs button{padding:4px 10px;font-size:0.75rem;color:var(--text-3);cursor:pointer;background:none;border:none;border-bottom:2px solid transparent;font-weight:500;} .detail-popup-history-tabs button.active{color:var(--orange-600);border-bottom-color:var(--orange-500);font-weight:600;} /* 隐藏旧 detail-overlay / .detail-right / .detail-v18-split 等 (老板已说右侧滑出是错的) 仅保留 v18 命名空间 JS 函数, 改弹窗 */ .detail-overlay{display:none !important;} /* ====== Prompt Text Box (below scene node) ====== */ .prompt-box{position:absolute;min-width:220px;max-width:400px;background:var(--surface-elevated);border:2px solid var(--purple);border-radius:var(--radius);z-index:4;box-shadow:0 2px 12px rgba(168,85,247,0.1);} .prompt-box-header{padding:0.375rem 0.5rem;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,rgba(168,85,247,0.08),rgba(99,102,241,0.08));border-radius:calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0 0;cursor:move;font-size:0.75rem;font-weight:600;color:var(--purple);border-bottom:1px solid rgba(168,85,247,0.15);} .prompt-box-header .close-btn{cursor:pointer;color:var(--text-3);font-size:0.875rem;line-height:1;} .prompt-box-header .close-btn:hover{color:var(--red);} .prompt-box textarea{width:100%;min-height:80px;padding:0.5rem;font-size:0.75rem;line-height:1.5;border:none;outline:none;resize:both;font-family:inherit;background:transparent;color:var(--text);} .prompt-box textarea:focus{background:rgba(168,85,247,0.03);} .prompt-box-footer{padding:0.25rem 0.5rem;display:flex;gap:0.25rem;justify-content:flex-end;border-top:1px solid rgba(168,85,247,0.1);} .prompt-box-footer button{padding:0.125rem 0.5rem;border:none;border-radius:4px;font-size:0.75rem;cursor:pointer;font-weight:500;} .prompt-box-footer .save-btn{background:var(--purple);color:#fff;} .prompt-box-footer .gen-btn{background:var(--orange-500);color:var(--ink-deep);} .prompt-box-footer .auto-btn{background:linear-gradient(135deg,#a855f7,#6366f1);color:#fff;} /* ====== Reference Node (dragged from sidebar) ====== */ .ref-node{position:absolute;width:72px;background:var(--surface-elevated);border:2px solid var(--gray-200);border-radius:var(--radius);overflow:hidden;z-index:3;cursor:move;transition:box-shadow 0.2s,border-color 0.2s;} .ref-node:hover{box-shadow:0 2px 8px rgba(0,0,0,0.1);} .ref-node.ref-character{border-color:var(--purple);border-style:dashed;} .ref-node.ref-scene{border-color:var(--blue);border-style:dashed;} .ref-node.dragging{opacity:0.85;z-index:100;box-shadow:0 8px 24px rgba(0,0,0,0.15);} .ref-node-thumb{width:100%;aspect-ratio:3/4;overflow:hidden;background:var(--canvas-soft);border:1px solid var(--hairline);} .ref-node-thumb img{width:100%;height:100%;object-fit:cover;} .ref-node-label{padding:0.125rem 0.25rem;font-size:0.75rem;font-weight:600;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .ref-node.ref-character .ref-node-label{color:var(--purple);} .ref-node.ref-scene .ref-node-label{color:var(--blue);} .ref-node-close{position:absolute;top:2px;right:2px;width:14px;height:14px;border-radius:50%;background:rgba(0,0,0,0.5);color:#fff;font-size:0.75rem;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:opacity 0.15s;z-index:5;} .ref-node:hover .ref-node-close{opacity:1;} /* ====== Context Menu ====== */ .context-menu{position:fixed;background:var(--surface-elevated);border:1px solid var(--hairline-strong);border-radius:var(--radius);box-shadow:0 4px 16px rgba(0,0,0,0.12);z-index:500;min-width:160px;padding:0.25rem 0;} .context-menu-item{padding:0.5rem 1rem;font-size:0.8125rem;color:var(--text);cursor:pointer;display:flex;align-items:center;gap:0.5rem;transition:background 0.1s;} .context-menu-item:hover{background:rgba(232,196,160,0.08);color:var(--accent);} .context-menu-item.danger{color:var(--red);} .context-menu-item.danger:hover{background:rgba(239,68,68,0.08);} .context-menu-divider{height:1px;background:var(--canvas-soft);margin:0.25rem 0;} /* Prompt review modal */ .prompt-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:9999;display:flex;align-items:center;justify-content:center;} .prompt-modal{background:var(--surface-elevated);border-radius:12px;width:min(90vw,720px);max-height:85vh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,0.3);resize:both;overflow:hidden;} .prompt-modal-header{padding:16px 20px;border-bottom:1px solid #e5e7eb;display:flex;justify-content:space-between;align-items:center;} .prompt-modal-header h3{margin:0;font-size:1rem;color:var(--text);} .prompt-modal-body{padding:16px 20px;overflow-y:auto;flex:1;} .prompt-modal-body textarea{width:100%;min-height:200px;font-size:0.8125rem;line-height:1.6;border:1px solid var(--hairline);border-radius:8px;padding:var(--space-3);resize:both;font-family:inherit;} .prompt-modal-body .asset-table{width:100%;border-collapse:collapse;font-size:0.75rem;margin-top:12px;} .prompt-modal-body .asset-table th,.prompt-modal-body .asset-table td{border:1px solid var(--hairline);padding:6px 10px;text-align:left;} .prompt-modal-body .asset-table th{background:var(--canvas-soft);color:var(--text);font-weight:600;} .prompt-modal-body .asset-table td img{width:40px;height:52px;object-fit:cover;border-radius:4px;} .prompt-modal-footer{padding:12px 20px;border-top:1px solid #e5e7eb;display:flex;gap:var(--space-2);justify-content:flex-end;} /* Generation spinner */ .gen-spinner{width:24px;height:24px;border:3px solid rgba(251,191,36,0.2);border-top:3px solid var(--yellow-400);border-radius:50%;animation:gen-spin 1s linear infinite;} @keyframes gen-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}} /* Projects List */ .projects-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1.5rem;} .project-card{background:var(--surface-card);border:1px solid var(--hairline);border-radius:var(--radius-lg);overflow:hidden;cursor:pointer;transition:border-color var(--motion-hover),box-shadow var(--motion-hover),transform var(--motion-hover);display:flex;flex-direction:column;position:relative;animation:cardEnter var(--motion-enter) both;} .project-card:hover{border-color:var(--grad-peach);box-shadow:0 12px 32px rgba(0,0,0,0.4);transform:translateY(-2px);} .project-card .cover{aspect-ratio:9/16;background:#0d1117;display:flex;align-items:center;justify-content:center;font-size:2.5rem;position:relative;overflow:hidden;color:var(--muted-soft);} .project-card .cover img{width:100%;height:100%;object-fit:cover;} .project-card .cover .cover-gen{position:absolute;top:8px;right:8px;z-index:6;padding:0.3125rem 0.75rem;border:none;border-radius:6px;font-size:0.75rem;cursor:pointer;background:rgba(12,10,9,0.7);color:#f5f5f5;backdrop-filter:blur(8px);opacity:0;transform:translateX(-50%) scale(0.7);transform-origin:bottom center;transition:opacity 0.35s, transform 0.35s;font-weight:500;letter-spacing:0.02em;} .project-card:hover .cover-gen{opacity:1;} .project-card .cover .cover-gen:hover{background:var(--ink-deep);} .project-card .cover .cover-spinner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.6);z-index:4;} .project-card .cover .cover-spinner .gen-spinner{width:24px;height:24px;border:3px solid rgba(232,196,160,0.2);border-top-color:var(--accent);border-radius:50%;animation:gen-spin 1s linear infinite;} .project-card .cover .mask{position:absolute;left:0;right:0;bottom:0;padding:1rem;background:linear-gradient(transparent,rgba(0,0,0,0.65));opacity:1;transition:opacity 0.22s ease;} .project-card:hover .cover .mask{opacity:0;} .project-card .cover .mask h4{font-family:'Inter',sans-serif;font-size:1.125rem;font-weight:400;letter-spacing:-0.01em;color:#fafafa;margin-bottom:0.125rem;} .project-card .cover .mask p{font-size:0.75rem;color:rgba(255,255,255,0.7);} .project-card .info{position:absolute;left:0;right:0;bottom:0;padding:1rem;background:linear-gradient(transparent,rgba(0,0,0,0.92) 30%);opacity:0;transform:translateY(8px);transition:opacity 0.22s ease, transform 0.22s ease;pointer-events:none;} .project-card:hover .info{opacity:1;transform:translateY(0);pointer-events:auto;} .project-card .info h4{font-family:'Inter',sans-serif;font-size:1rem;font-weight:600;letter-spacing:-0.01em;color:#fafaf9;margin-bottom:0.25rem;} .project-card .info p{font-size:0.75rem;color:#a8a29e;line-height:1.5;} .project-card .info .stats{font-size:0.75rem;color:#a8a29e;margin-top:0.375rem;font-variant-numeric:tabular-nums;} /* Admin (暗色化) */ .admin-page{padding:2rem;overflow:auto;color:var(--text);} .admin-page h2{font-family:'Inter',sans-serif;font-size:2rem;font-weight:600;letter-spacing:-0.01em;margin-bottom:1.5rem;} /* v18.104 fix #1 · 2026-07-16 22:25 · team tabs overflow-x:auto 避免 375px viewport 下竖排 */ .tabs{display:flex;gap:0.25rem;margin-bottom:1.5rem;padding:0.25rem;background:rgba(255,255,255,0.04);border:1px solid var(--hairline);border-radius:10px;width:fit-content;max-width:100%;overflow-x:auto;overflow-y:hidden;flex-wrap:nowrap;white-space:nowrap;-webkit-overflow-scrolling:touch;} .tab{padding:0.5rem 1rem;border:none;background:transparent;border-radius:7px;font-size:0.8125rem;color:var(--muted);cursor:pointer;font-family:inherit;transition:all 0.15s;} .tab:hover{color:var(--text);} .tab.active{background:var(--surface-card);color:var(--text);box-shadow:0 2px 8px rgba(0,0,0,0.3);} .tab-count{display:inline-block;margin-left:0.5rem;padding:0.0625rem 0.4375rem;background:var(--canvas);color:var(--muted);font-size:0.75rem;border-radius:10px;font-variant-numeric:tabular-nums;min-width:1.25rem;text-align:center;} .tab.active .tab-count{background:rgba(232,196,160,0.15);color:var(--grad-peach);} /* v18-fix66 · 老板反馈「管理后台 UI 太乱」· 6 tab 重构成 3 分组下拉 */ .admin-grouped-tabs{display:flex;gap:0.5rem;margin-bottom:1.5rem;flex-wrap:wrap;align-items:center;} .admin-group-trigger{position:relative;padding:0.5rem 1rem;border:1px solid var(--hairline);background:rgba(255,255,255,0.03);border-radius:10px;font-size:0.8125rem;color:var(--text-2);cursor:pointer;font-family:inherit;transition:all 0.15s;display:inline-flex;align-items:center;gap:0.5rem;user-select:none;} .admin-group-trigger:hover{border-color:var(--grad-peach);background:rgba(232,196,160,0.06);color:var(--text);} .admin-group-trigger.active,.admin-group-trigger.open{border-color:var(--grad-peach);background:rgba(232,196,160,0.10);color:var(--text);box-shadow:0 2px 8px rgba(232,196,160,0.18);} .admin-group-trigger .admin-trigger-label{font-weight:600;letter-spacing:-0.01em;} .admin-group-trigger .admin-trigger-count{padding:1px 7px;background:var(--canvas);color:var(--muted);font-size:0.75rem;border-radius:8px;font-variant-numeric:tabular-nums;line-height:1.2;} .admin-group-trigger.active .admin-group-trigger-count,.admin-group-trigger.open .admin-trigger-count{background:rgba(232,196,160,0.18);color:var(--grad-peach);} .admin-group-trigger .admin-trigger-caret{display:inline-block;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;opacity:0.55;transition:transform 0.18s ease;} .admin-group-trigger.active .admin-trigger-caret,.admin-group-trigger.open .admin-trigger-caret{transform:rotate(180deg);opacity:0.95;} .admin-group-dropdown{display:none;position:absolute;left:0;top:calc(100% + 6px);min-width:240px;background:var(--surface-elevated);border:1px solid var(--hairline-strong);border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,0.55);padding:6px;z-index:30;} .admin-group-trigger.open .admin-group-dropdown{display:block;} .admin-group-item{display:flex;align-items:center;justify-content:space-between;padding:0.5rem 0.75rem;border-radius:7px;font-size:0.8125rem;color:var(--text-2);cursor:pointer;font-family:inherit;transition:background 0.12s,color 0.12s;gap:0.5rem;line-height:1.4;} .admin-group-item:hover{background:rgba(232,196,160,0.06);color:var(--text);} .admin-group-item.active{background:rgba(232,196,160,0.16);color:var(--text);font-weight:600;} .admin-group-item .admin-item-text{flex:1;} .admin-group-item .admin-item-tag{padding:1px 7px;background:var(--canvas);color:var(--muted);font-size:0.75rem;border-radius:6px;font-variant-numeric:tabular-nums;letter-spacing:0.02em;} .admin-group-item.active .admin-item-tag{background:rgba(232,196,160,0.22);color:var(--grad-peach);} /* 内容区宽度统一 */ .admin-content-wrap{max-width:1200px;margin:0 auto;padding:0 1rem 2rem;} /* 卡片容器统一 */ .admin-content-card{background:var(--surface-card);border:1px solid var(--hairline);border-radius:12px;padding:1rem 1.25rem;margin-bottom:1rem;} .admin-content-card h3{font-family:'Inter',sans-serif;font-size:1rem;font-weight:600;color:var(--text);margin:0 0 0.75rem;letter-spacing:-0.01em;} /* 表格统一样式 */ .admin-content-card table.admin{width:100%;border-collapse:collapse;font-size:0.8125rem;} .admin-content-card table.admin thead th{background:var(--canvas-soft);color:var(--text-3);font-weight:500;padding:0.625rem 0.875rem;text-align:left;font-size:0.75rem;letter-spacing:0.01em;border-bottom:1px solid var(--hairline);} .admin-content-card table.admin tbody td{padding:0.625rem 0.875rem;border-bottom:1px solid var(--hairline);color:var(--text-2);font-size:0.8125rem;vertical-align:middle;} .admin-content-card table.admin tbody tr:hover{background:var(--canvas-soft);} .admin-content-card table.admin tbody tr:last-child td{border-bottom:none;} .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1.5rem;} .stat-card{background:var(--surface-card);border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:1.25rem;} .stat-label{font-size:0.75rem;color:var(--text-3);margin-bottom:0.25rem;} .stat-value{font-size:1.5rem;font-weight:700;} .stat-value.yellow{color:var(--accent);} .stat-value.blue{color:var(--blue);} .stat-value.green{color:var(--green);} .stat-value.purple{color:var(--purple);} table.admin{width:100%;border-collapse:collapse;background:var(--surface-card);border:1px solid var(--hairline);border-radius:var(--radius-lg);overflow:hidden;color:var(--text);} table.admin th{text-align:left;padding:0.75rem 1rem;font-size:0.75rem;font-weight:600;color:var(--muted);border-bottom:1px solid var(--hairline);background:var(--canvas-soft);text-transform:uppercase;letter-spacing:0.05em;} table.admin td{padding:0.75rem 1rem;font-size:0.8125rem;border-bottom:1px solid var(--hairline-soft);} table.admin tr:last-child td{border-bottom:none;} table.admin tr:hover{background:rgba(232,196,160,0.04);} .badge{display:inline-block;padding:0.125rem 0.5rem;border-radius:4px;font-size:0.75rem;font-weight:500;} .badge-active{background:rgba(16,185,129,0.1);color:var(--green);} .badge-inactive{background:rgba(239,68,68,0.1);color:var(--red);} .badge-admin{background:rgba(168,85,247,0.1);color:var(--purple);} .badge-user{background:rgba(59,130,246,0.1);color:var(--blue);} .api-key{font-family:monospace;font-size:0.75rem;background:var(--canvas-soft);padding:0.125rem 0.5rem;border-radius:4px;color:var(--grad-peach);border:1px solid var(--hairline);} /* Modal (暗色化) */ .modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.7);display:flex;align-items:center;justify-content:center;z-index:500;visibility:hidden;pointer-events:none;opacity:0;transition:opacity 0.2s ease;} .modal-overlay.show{visibility:visible;pointer-events:auto;opacity:1;} .modal{background:var(--surface-elevated);border:1px solid var(--hairline-strong);border-radius:16px;padding:1.75rem;width:460px;max-height:80vh;overflow-y:auto;box-shadow:0 30px 80px rgba(0,0,0,0.6);color:var(--text);} .modal h3{font-family:'Inter',sans-serif;font-size:1.5rem;font-weight:600;letter-spacing:-0.01em;margin-bottom:1.25rem;} .form-group{margin-bottom:1rem;} .form-group label{display:block;font-size:0.75rem;font-weight:500;color:var(--muted);margin-bottom:0.375rem;text-transform:uppercase;letter-spacing:0.06em;} .form-group input,.form-group select,.form-group textarea{width:100%;padding:0.625rem 0.875rem;background:var(--canvas);border:1px solid var(--hairline-strong);border-radius:8px;font-size:0.875rem;outline:none;font-family:inherit;color:var(--text);transition:all 0.15s;} .form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--grad-peach);background:var(--canvas-soft);} .form-group textarea{min-height:80px;resize:vertical;} .modal-actions{display:flex;gap:0.5rem;justify-content:flex-end;margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--hairline);} /* Toast */ /* v18.102 fix #8 · 2026-07-16 22:15 · toast 对比度 WCAG AA 4.5:1 + 字号 14px + 加粗 + 高 z-index */ .toast{position:fixed;top:24px;left:50%;transform:translateX(-50%) translateY(-100px);background:var(--surface-elevated);color:var(--grad-peach);padding:0.875rem 1.5rem;border-radius:var(--radius);font-size:0.875rem;font-weight:700;opacity:0;transition:all 0.3s;z-index:40000;border:2px solid var(--orange-500);box-shadow:0 12px 32px rgba(0,0,0,0.7);min-width:240px;text-align:center;pointer-events:none;} .toast.show{transform:translateX(-50%);opacity:1;} .toast.error{border-color:var(--error);color:#fca5a5;background:#1c1917;} .toast.success{border-color:#22c55e;color:#86efac;background:#1c1917;font-weight:700;} @keyframes v18FadeIn{from{opacity:0}to{opacity:1}} @keyframes v18DialogIn{from{opacity:0;transform:translate(-50%,-50%) scale(0.95)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}} .v18-dialog:hover{box-shadow:0 32px 80px rgba(0,0,0,0.75);} .v18-dialog-cancel:hover{background:rgba(255,255,255,0.04);color:var(--text);border-color:var(--text-3);} .v18-dialog-confirm:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 8px 24px rgba(232,196,160,0.25);} .toast.success{border-color:var(--success);color:#86efac;} /* Buttons */ .btn{padding:0.5rem 1rem;border-radius:8px;font-size:0.8125rem;font-weight:500;cursor:pointer;border:none;transition:all 0.15s;font-family:inherit;} /* v18-fix97 · 2026-07-16 01:42 · WCAG 修复 · .btn-primary 对比度 1.4:1 → 14:1 (暖金渐变 + 墨黑文字) */ .btn-primary{background:var(--accent);color:var(--ink-deep);border:1px solid transparent;font-weight:600;} .btn-primary:hover{filter:brightness(1.08);box-shadow:0 4px 16px rgba(232,196,160,0.25);} .btn-secondary{background:transparent;color:var(--muted);border:1px solid var(--hairline-strong);} .btn-secondary:hover{color:var(--text);border-color:var(--text-3);background:rgba(255,255,255,0.03);} .btn-accent{background:var(--accent);color:var(--ink-deep);border-color:transparent;font-weight:600;} .btn-accent:hover{filter:brightness(1.08);box-shadow:0 4px 16px rgba(232,196,160,0.25);} /* Scrollbar */ ::-webkit-scrollbar{width:6px;height:6px;} ::-webkit-scrollbar-track{background:transparent;} ::-webkit-scrollbar-thumb{background:var(--gray-300);border-radius:3px;} /* v18-fix88 · 2026-07-11 19:30 · 老板反馈「文本框只显示了一半」· 根因：flex 子元素堆积 → textarea 被压缩到 0 高度 / 父容器 overflow:visible → 内容裁切异常 修：明确高度（260px 默认）· overflow:hidden · textarea 最小 80px */ .prompt-box-canvas{position:absolute;min-width:200px;max-width:420px;width:280px;min-height:380px;background:rgba(30,30,40,0.92);border:1.5px solid rgba(255,255,255,0.25);border-radius:var(--radius);z-index:3;box-shadow:0 2px 12px rgba(0,0,0,0.4);cursor:move;transition:box-shadow 0.2s;backdrop-filter:blur(8px);overflow:hidden;display:flex;flex-direction:column;} .prompt-box-canvas:hover{box-shadow:0 4px 20px rgba(255,255,255,0.15);border-color:rgba(255,255,255,0.4);} .prompt-box-canvas.selected{border-color:#F59E0B;box-shadow:0 0 0 2px rgba(245,158,11,0.4);} .pb-header{padding:0.25rem 0.5rem;font-size:0.75rem;font-weight:600;color:#fff;border-bottom:1px solid rgba(255,255,255,0.15);background:linear-gradient(135deg,rgba(255,255,255,0.08),rgba(255,255,255,0.03));border-radius:calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0 0;flex-shrink:0;} .pb-content{padding:0;flex:1;min-height:80px;overflow:hidden;display:flex;} .pb-content textarea{width:100%;flex:1;min-height:120px;padding:0.5rem 0.625rem;font-size:0.8125rem;line-height:1.6;color:#e6edf3;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.15);border-radius:4px;outline:none;resize:none;font-family:inherit;word-break:break-all;box-sizing:border-box;font-weight:500;} .pb-content textarea:focus{background:rgba(255,255,255,0.05);} .pb-footer{padding:0.25rem 0.5rem;display:flex;justify-content:space-between;font-size:0.75rem;color:rgba(255,255,255,0.5);border-top:1px solid rgba(255,255,255,0.1);flex-shrink:0;position:relative;width:100%;box-sizing:border-box;} /* ⭐ v23.10 · 文本框素材格子 (固定大小, 已生成图可放大, 未生成待生成+点击生成) */ .pb-material-grid{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:4px;width:100%;} .pb-mat-cell{position:relative;width:44px;height:44px;border-radius:6px;overflow:hidden;border:1px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.04);flex-shrink:0;cursor:pointer;transition:border-color 0.15s;} .pb-mat-cell:hover{border-color:rgba(232,196,160,0.6);} .pb-mat-cell.has-img img{width:100%;height:100%;object-fit:cover;display:block;} .pb-mat-cell.pending{border:1px dashed rgba(232,196,160,0.5);background:rgba(232,196,160,0.06);} .pb-mat-cell .pb-mat-pending{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:0.5625rem;color:#F59E0B;font-weight:600;} .pb-mat-cell .pb-mat-label{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,0.7);color:#fff;font-size:0.5rem;text-align:center;padding:1px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .pb-mat-cell.add-cell{display:flex;align-items:center;justify-content:center;font-size:1rem;color:rgba(255,255,255,0.5);border-style:dashed;} .pb-status{color:#10B981;} .pb-chars{color:rgba(255,255,255,0.6);} /* ===== 文本框参数栏 ===== */ .pb-params{padding:0.2rem 0.4rem;display:flex;align-items:center;gap:0.4rem;background:rgba(0,0,0,0.4);border-top:1px solid rgba(255,255,255,0.12);font-size:0.75rem;color:rgba(255,255,255,0.85);flex-shrink:0;flex-wrap:wrap;min-height:24px;} .pb-watermark-toggle{position:relative;width:22px;height:12px;background:rgba(255,255,255,0.18);border-radius:6px;cursor:pointer;transition:background 0.2s;flex-shrink:0;} .pb-watermark-toggle.on{background:#10B981;} .pb-watermark-toggle::after{content:'';position:absolute;top:1px;left:1px;width:10px;height:10px;background:var(--surface-elevated);border-radius:50%;transition:transform 0.2s;box-shadow:0 1px 2px rgba(0,0,0,0.3);} .pb-watermark-toggle.on::after{transform:translateX(10px);} /* ===== 素材引用计数 (在footer里) ===== */ .pb-asset-badges{display:flex;gap:0.3rem;font-size:0.75rem;align-items:center;} .pb-asset-badge{padding:1px 4px;border-radius:3px;font-variant-numeric:tabular-nums;background:rgba(255,255,255,0.08);color:rgba(255,255,255,0.7);} .pb-asset-badge.warn{background:rgba(245,158,11,0.25);color:#F59E0B;} .pb-asset-badge.full{background:rgba(239,68,68,0.25);color:#EF4444;} .pb-gen-btns{display:flex;gap:4px;margin-left:auto;} .pb-gen-btn{font-size:0.4375rem;padding:2px 6px;border-radius:3px;border:1px solid rgba(255,255,255,0.2);background:rgba(255,255,255,0.08);color:rgba(255,255,255,0.7);cursor:pointer;white-space:nowrap;transition:all 0.15s;} .pb-gen-btn.save{background:rgba(59,130,246,0.25);color:#60A5FA;border-color:rgba(59,130,246,0.4);} .pb-gen-btn.save:hover{background:rgba(59,130,246,0.4);} .pb-gen-btn:hover{background:rgba(255,255,255,0.15);color:#fff;} .pb-gen-btn.regen{border-color:rgba(239,68,68,0.4);color:#F87171;} .pb-gen-btn.regen:hover{background:rgba(239,68,68,0.2);border-color:#EF4444;} .pb-gen-btn.again{border-color:rgba(59,130,246,0.4);color:#60A5FA;} .pb-gen-btn.again:hover{background:rgba(59,130,246,0.2);border-color:#3B82F6;} /* ===== 素材缩略图图标 (画布上) ===== */ /* v18-fix65 · 2026-07-08 · 取消 4 色边框/底色 · 统一灰阶 */ .asset-icon{position:relative;width:64px;height:64px;border-radius:8px;border:1px solid rgba(255,255,255,0.1);background:#1a1a1a;display:flex;align-items:center;justify-content:center;overflow:hidden;z-index:7;cursor:grab;transition:box-shadow 0.15s,border-color 0.15s;box-shadow:0 2px 8px rgba(0,0,0,0.4);} .asset-icon:hover{box-shadow:0 4px 16px rgba(0,0,0,0.5);border-color:rgba(255,255,255,0.25);} .asset-icon.dragging{opacity:0.8;z-index:100;cursor:grabbing;} .asset-icon.zoomed{width:160px !important;height:160px !important;z-index:200;box-shadow:0 8px 32px rgba(0,0,0,0.5);border-color:rgba(255,255,255,0.35);cursor:zoom-out;transition:all 0.2s ease;} .asset-icon img{width:100%;height:100%;object-fit:cover;display:block;} .asset-icon video{width:100%;height:100%;object-fit:cover;display:block;background:#000;} .asset-icon .asset-label{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0.85) 40%);color:#fff;font-size:0.75rem;text-align:center;padding:6px 2px 2px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2;text-shadow:0 1px 2px rgba(0,0,0,0.8);} .asset-icon .asset-type{position:absolute;top:2px;left:2px;background:rgba(0,0,0,0.6);color:rgba(255,255,255,0.85);font-size:0.75rem;padding:1px 5px;border-radius:3px;line-height:1.2;font-weight:600;letter-spacing:0.5px;} /* v18-fix65 · 取消彩色背景 · 统一灰阶 */ .asset-icon .asset-type.type-scene, .asset-icon .asset-type.type-image, .asset-icon .asset-type.type-task, .asset-icon .asset-type.type-character, .asset-icon .asset-type.type-prop, .asset-icon .asset-type.type-item, .asset-icon .asset-type.type-audio, .asset-icon .asset-type.type-voiceover, .asset-icon .asset-type.type-other, .asset-icon .asset-type.type-video { background: rgba(0,0,0,0.6); color: rgba(255,255,255,0.85); } /* v18-fix65 · 统一灰底 fallback · 不再有彩色 emoji */ .asset-icon .asset-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#1a1a1a;color:rgba(255,255,255,0.4);font-size:0.75rem;font-weight:600;letter-spacing:0.05em;text-align:center;padding:4px;} .asset-icon .asset-rm{position:absolute;top:-4px;right:-4px;width:14px;height:14px;border-radius:50%;background:var(--red);color:#fff;font-size:0.75rem;display:none;align-items:center;justify-content:center;cursor:pointer;line-height:1;z-index:8;} .asset-icon:hover .asset-rm{display:flex;} /* v18-fix65 · 去紫边框+淡紫底 · 统一灰 */ .asset-icon.audio-icon{border-color:rgba(255,255,255,0.1);background:#1a1a1a;} /* ===== 素材库 v14 样式 ===== */ .material-box-wrap{display:inline-block;} .material-box{display:flex;flex-direction:column;align-items:center;gap:2px;padding:0;margin:0;user-select:none;} .material-box .material-img{position:relative;border-radius:6px;overflow:hidden;border:2px dashed var(--hairline);background:var(--canvas-soft);display:flex;align-items:center;justify-content:center;transition:all 0.15s;} /* v23.10 GEN4+7 BUG-A · 老板 2026-07-20 报「图片素材完全没法删除」· hover 时显示右上角删除 X */ .material-box .material-delete-x{position:absolute;top:2px;right:2px;width:20px;height:20px;border-radius:50%;background:rgba(239,68,68,0.92);color:#fff;border:1.5px solid #fff;font-size:14px;line-height:1;cursor:pointer;padding:0;display:none;align-items:center;justify-content:center;font-family:inherit;z-index:5;box-shadow:0 2px 6px rgba(0,0,0,0.4);} .material-box:hover .material-delete-x{display:flex !important;} .material-box .material-delete-x:hover{background:#dc2626;transform:scale(1.1);} .material-box.material-generated .material-img{border:2px solid #10B981;border-style:solid;} .material-box:hover .material-img{box-shadow:0 4px 16px rgba(0,0,0,0.2);transform:translateY(-1px);} .material-box .material-pending{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;color:var(--text-3);background:repeating-linear-gradient(45deg,var(--canvas) 0px,var(--canvas) 4px,var(--canvas-soft) 4px,var(--canvas-soft) 8px);border:1px dashed var(--hairline);} .material-box .material-pending .pending-icon{font-size:1.5rem;opacity:0.6;} .material-box .material-pending .pending-text{font-size:0.75rem;font-weight:600;color:var(--text-3);margin-top:0.125rem;letter-spacing:0.05em;} .material-box .material-img img{width:100%;height:100%;object-fit:cover;} .material-box .material-name{font-size:0.75rem;color:var(--text);text-align:center;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 2px;} .material-box .material-scenes{font-size:0.75rem;color:var(--text-4);} .material-box .material-epnums{font-size:0.65rem;color:var(--text-4);} /* v29 · 双向联动样式 */ .material-box.material-highlight, .scene-node.material-highlight, .prompt-box-canvas.material-highlight { outline: 2px solid var(--orange-500) !important; outline-offset: 2px; box-shadow: 0 0 16px rgba(232,196,160,0.4) !important; z-index: 50; } .sidebar-pulse { animation: sidebar-pulse-anim 0.6s ease 2; } @keyframes sidebar-pulse-anim { 0%, 100% { box-shadow: 0 0 0 rgba(232,196,160,0); } 50% { box-shadow: 0 0 20px rgba(232,196,160,0.5); } } .material-ready-badge { pointer-events: auto; cursor: pointer; transition: all 0.15s; } .material-ready-badge:hover { transform: scale(1.15); } /* 详情模态框 */ .material-modal-bg{position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:10010;} .material-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--surface-elevated);border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,0.3);z-index:10011;width:90%;max-width:560px;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;} .material-modal-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.25rem;border-bottom:1px solid var(--hairline);} .material-modal-header h3{margin:0;font-size:1.125rem;} .modal-close{background:none;border:none;font-size:1rem;color:var(--text-4);cursor:pointer;padding:0;line-height:1;} .modal-close:hover{color:var(--text);} .material-modal-body{padding:1.25rem;overflow-y:auto;} .material-modal-preview{display:flex;justify-content:center;align-items:center;background:var(--canvas);border-radius:8px;min-height:200px;margin-bottom:1rem;overflow:hidden;border:1px solid var(--hairline);} .material-modal-preview img{max-width:100%;max-height:300px;object-fit:contain;} .material-pending-large{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:200px;background:repeating-linear-gradient(45deg,var(--canvas) 0px,var(--canvas) 8px,var(--canvas-soft) 8px,var(--canvas-soft) 16px);color:var(--text-3);border:1px dashed var(--hairline);} .material-modal-info{margin-bottom:1rem;} .info-row{display:flex;align-items:center;gap:0.5rem;padding:0.25rem 0;font-size:0.8125rem;} .info-label{color:var(--text-3);min-width:60px;} .scene-tag{display:inline-block;background:rgba(232,196,160,0.15);color:var(--grad-lavender);padding:2px 6px;border-radius:4px;font-size:0.75rem;margin:0 0.25rem 0.25rem 0;cursor:pointer;} .scene-tag:hover{background:rgba(232,196,160,0.25);} .status-generated{color:var(--success);font-weight:600;} .status-pending{color:#92400e;font-weight:600;} .material-modal-prompt .prompt-label{font-size:0.8125rem;color:var(--text-3);margin-bottom:0.25rem;font-weight:600;} /* v23.10 · 素材详情弹窗 · 提示词自动生成状态 + AI 对话修改区 */ .material-prompt-gen-hint{font-size:0.75rem;color:var(--text-3);margin-top:0.35rem;min-height:1em;} .material-prompt-gen-hint.generating{color:var(--orange-500);} .material-prompt-gen-hint.done{color:#10b981;} .material-modal-chat{margin-top:12px;border:1px solid var(--hairline);border-radius:8px;overflow:hidden;background:var(--surface-elevated);} .material-modal-chat-head{padding:8px 12px;background:var(--canvas);font-size:0.75rem;font-weight:700;color:var(--text-2);border-bottom:1px solid var(--hairline);display:flex;justify-content:space-between;align-items:center;} .material-modal-chat-clear{font-size:0.75rem;color:var(--text-3);cursor:pointer;background:none;border:none;font-family:inherit;text-decoration:underline;} .material-modal-chat .dp-chat-history{max-height:200px;min-height:70px;border-radius:0;} .material-modal-chat .dp-chat-input-row{border-radius:0;background:var(--surface-elevated);} /* 画布场景旁素材条 */ /* v18-fix65 · 2026-07-08 · 去黑底 · 统一中性灰描边 */ /* scene-materials-strip removed · 不再渲染到画布 */ .ref-panel{position:absolute;top:10px;right:10px;width:320px;max-height:80vh;background:rgba(20,20,30,0.95);border:1px solid rgba(255,255,255,0.15);border-radius:12px;z-index:150;overflow:hidden;backdrop-filter:blur(12px);box-shadow:0 8px 32px rgba(0,0,0,0.5);display:flex;flex-direction:column;} .ref-panel-header{padding:8px 12px;background:rgba(255,255,255,0.05);border-bottom:1px solid rgba(255,255,255,0.1);display:flex;justify-content:space-between;align-items:center;font-size:0.75rem;color:#fff;font-weight:600;} .ref-panel-header .close{cursor:pointer;color:rgba(255,255,255,0.5);font-size:1rem;padding:0 4px;} .ref-panel-header .close:hover{color:#fff;} .ref-panel-body{overflow-y:auto;flex:1;padding:var(--space-2);} .ref-panel-section{margin-bottom:8px;} .ref-panel-section-title{font-size:0.75rem;color:rgba(255,255,255,0.5);margin-bottom:4px;padding:0 4px;} .ref-panel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;} .ref-panel-item{position:relative;border-radius:6px;overflow:hidden;cursor:grab;border:2px solid transparent;transition:border-color 0.15s;aspect-ratio:1;background:rgba(255,255,255,0.05);} .ref-panel-item:hover{border-color:#F59E0B;} .ref-panel-item img{width:100%;height:100%;object-fit:cover;} .ref-panel-item .ref-item-label{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,0.7);color:#fff;font-size:0.75rem;text-align:center;padding:2px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .ref-panel-item.audio{display:flex;align-items:center;justify-content:center;font-size:1.5rem;} .ref-panel-item.pending{cursor:pointer;border:1px dashed #F59E0B;background:rgba(232,196,160,0.08);transition:all 0.2s;} .ref-panel-item.pending:hover{border-color:#F59E0B;background:rgba(232,196,160,0.18);transform:scale(1.02);} .ref-item-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:#F59E0B;} .marquee{position:fixed;border:1.5px solid #F59E0B;background:rgba(245,158,11,0.15);pointer-events:none;z-index:99999;display:none;border-radius:2px;} /* ===== 素材小图标 (贴在文本框四边) ===== */ /* ===== SA3 · 2026-07-02 · v33 P3 画风选择器 + 画布 + 模板 ===== */ /* style-preset-picker 双入口 (chips + [+] 自定义按钮) */ .style-picker-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:4px;} @media (max-width: 900px){.style-picker-grid{grid-template-columns:repeat(3,minmax(0,1fr));}} @media (max-width: 600px){.style-picker-grid{grid-template-columns:repeat(2,minmax(0,1fr));}} .style-chip{ display:flex;flex-direction:column;align-items:center;justify-content:center; padding:8px 4px 6px;border:1.5px solid var(--hairline-strong);border-radius:8px; background:var(--surface-elevated);cursor:pointer;transition:all 0.15s; min-height:60px;position:relative;overflow:hidden; } .style-chip:hover{border-color:var(--orange-400);background:var(--orange-50);transform:translateY(-1px);box-shadow:0 2px 6px rgba(0,0,0,0.08);} .style-chip.selected{ border-color:var(--orange-500);background:linear-gradient(135deg,rgba(232,196,160,0.08),rgba(168,85,247,0.06)); box-shadow:0 0 0 2px rgba(232,196,160,0.2),0 4px 12px rgba(0,0,0,0.1); } .style-chip.selected::after{ content:'';position:absolute;top:2px;right:4px;font-size:0.75rem;font-weight:700;color:#fff; background:var(--orange-500);width:16px;height:16px;border-radius:50%; display:flex;align-items:center;justify-content:center; } .style-chip-color{width:24px;height:24px;border-radius:6px;margin-bottom:4px;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.08);} .style-chip-name{font-size:0.75rem;font-weight:600;color:var(--text);line-height:1.2;} .style-chip-badge{position:absolute;top:2px;left:4px;font-size:0.75rem;color:var(--text-3);text-transform:uppercase;letter-spacing:0.05em;background:var(--gray-100);padding:1px 4px;border-radius:3px;} .style-chip-add{ display:flex;flex-direction:column;align-items:center;justify-content:center; padding:8px 4px 6px;border:1.5px dashed var(--hairline-strong);border-radius:8px; background:transparent;cursor:pointer;transition:all 0.15s;min-height:60px; color:var(--text-3); } .style-chip-add:hover{border-color:var(--orange-400);color:var(--orange-500);background:rgba(232,196,160,0.04);} .style-chip-add-icon{font-size:1.5rem;line-height:1;font-weight:600;} .style-chip-add-text{font-size:0.75rem;margin-top:2px;} .style-preview-box{ margin-top:8px;padding:8px 10px;background:var(--canvas-soft); border:1px solid var(--hairline);border-radius:6px;font-size:0.75rem; color:var(--text-2);font-family:ui-monospace,monospace;font-variant-numeric:tabular-nums;line-height:1.5;max-height:60px;overflow-y:auto; } .style-preview-box .sp-label{color:var(--text-3);font-family:inherit;} /* custom-style-modal 自定义画风弹窗 */ /* v23.1 P0-1: 自定义画风必须压过详情弹窗/其它 modal */ .sa3-modal-mask[data-above="custom-style"]{z-index:10002;} .sa3-modal-mask{position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:10000;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);animation:fadeIn 0.18s;} .sa3-modal-card{background:var(--surface-elevated);border:1px solid var(--hairline-strong);border-radius:14px;width:min(95vw,520px);max-height:90vh;display:flex;flex-direction:column;box-shadow:0 30px 80px rgba(0,0,0,0.5);animation:popupIn 0.2s ease-out;overflow:hidden;} .sa3-modal-head{padding:14px 18px;border-bottom:1px solid var(--hairline);display:flex;justify-content:space-between;align-items:center;background:linear-gradient(135deg,rgba(232,196,160,0.05),rgba(168,85,247,0.05));} .sa3-modal-head h3{margin:0;font-size:0.9375rem;font-weight:600;color:var(--text);} .sa3-modal-body{flex:1;overflow-y:auto;padding:16px 18px;} .sa3-modal-body .field{margin-bottom:12px;} .sa3-modal-body .field label{display:block;font-size:0.75rem;font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:4px;} .sa3-modal-body .field input,.sa3-modal-body .field select,.sa3-modal-body .field textarea{ width:100%;padding:7px 10px;border:1px solid var(--hairline-strong);border-radius:6px; font-size:0.8125rem;font-family:inherit;background:var(--surface-elevated);color:var(--text);outline:none; transition:border-color 0.15s; } .sa3-modal-body .field input:focus,.sa3-modal-body .field select:focus,.sa3-modal-body .field textarea:focus{ border-color:var(--orange-400);box-shadow:0 0 0 3px rgba(232,196,160,0.15); } .sa3-modal-body .field textarea{font-family:ui-monospace,monospace;font-variant-numeric:tabular-nums;min-height:80px;resize:vertical;line-height:1.5;} .sa3-modal-body .field .field-hint{font-size:0.75rem;color:var(--text-3);margin-top:2px;} .sa3-modal-body .field .field-counter{text-align:right;font-size:0.75rem;color:var(--text-3);margin-top:2px;} .sa3-modal-body .color-row{display:flex;gap:6px;align-items:center;} .sa3-modal-body .color-row input[type=color]{width:36px;height:36px;padding:0;border:1px solid var(--hairline-strong);border-radius:6px;cursor:pointer;background:transparent;} .sa3-modal-body .color-row input[type=text]{flex:1;font-family:ui-monospace,monospace;font-variant-numeric:tabular-nums;} .sa3-modal-foot{padding:12px 18px;border-top:1px solid var(--hairline);display:flex;justify-content:flex-end;gap:8px;background:var(--canvas-soft);} .sa3-modal-foot button{padding:7px 16px;border-radius:6px;font-size:0.8125rem;font-weight:500;cursor:pointer;transition:all 0.15s;} .sa3-modal-foot button.secondary{background:var(--surface-elevated);color:var(--text);border:1px solid var(--hairline-strong);} .sa3-modal-foot button.secondary:hover{background:var(--gray-100);} .sa3-modal-foot button.primary{background:var(--accent);color:var(--ink-deep);border:none;font-weight:600;} .sa3-modal-foot button.primary:hover{filter:brightness(1.1);} .sa3-modal-foot button.primary:disabled{opacity:0.5;cursor:not-allowed;} /* workspace-view 切换按钮 (画布/列表) */ .view-toggle-group{display:inline-flex;border:1px solid var(--hairline-strong);border-radius:7px;overflow:hidden;background:var(--surface-elevated);} .view-toggle-group button{padding:4px 10px;font-size:0.75rem;font-weight:500;color:var(--text-3);background:transparent;border:none;cursor:pointer;transition:all 0.15s;} .view-toggle-group button:hover{color:var(--text);background:var(--canvas-soft);} .view-toggle-group button.active{background:var(--accent);color:var(--ink-deep);font-weight:600;} .view-toggle-group button + button{border-left:1px solid var(--hairline-strong);} /* canvas view container */ .sa3-canvas-wrap{flex:1;position:relative;overflow:hidden;background:linear-gradient(135deg,#fef9f3,#fdf2e9);min-height:600px;} .sa3-canvas-toolbar{position:absolute;top:12px;left:12px;display:flex;gap:6px;z-index:50;background:rgba(255,255,255,0.95);padding:6px;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,0.08);border:1px solid var(--hairline);} .sa3-canvas-toolbar button{width:32px;height:32px;border:1px solid transparent;background:transparent;border-radius:5px;font-size:0.875rem;cursor:pointer;color:var(--text-2);transition:all 0.15s;} .sa3-canvas-toolbar button:hover{background:var(--gray-100);} .sa3-canvas-toolbar button.active{background:var(--orange-100);color:var(--orange-600);} .sa3-canvas-info{position:absolute;top:12px;right:12px;background:rgba(255,255,255,0.95);border-radius:8px;padding:8px 12px;font-size:0.75rem;color:var(--text-2);box-shadow:0 2px 8px rgba(0,0,0,0.08);border:1px solid var(--hairline);z-index:50;} .sa3-canvas-info strong{color:var(--orange-600);} .sa3-canvas-stage{position:absolute;top:0;left:0;width:100%;height:100%;cursor:grab;} .sa3-canvas-stage:active{cursor:grabbing;} .sa3-canvas-inner{position:relative;width:4000px;height:3000px;transform-origin:0 0;} .sa3-scene-node{position:absolute;width:240px;background:#fff;border:1.5px solid var(--hairline);border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,0.06);overflow:hidden;transition:all 0.15s;cursor:pointer;} .sa3-scene-node:hover{box-shadow:0 6px 24px rgba(0,0,0,0.12);transform:translateY(-2px);} .sa3-scene-node.selected{box-shadow:0 0 0 2px var(--orange-500),0 6px 24px rgba(232,196,160,0.2);} .sa3-scene-node-head{padding:8px 10px;display:flex;justify-content:space-between;align-items:center;background:linear-gradient(135deg,var(--orange-50),var(--yellow-50));border-bottom:1px solid var(--hairline);} .sa3-scene-node-num{font-size:0.75rem;font-weight:700;color:var(--orange-600);background:#fff;padding:1px 6px;border-radius:3px;border:1px solid var(--orange-200);} .sa3-scene-node-type{font-size:0.75rem;padding:1px 6px;border-radius:3px;color:#fff;font-weight:500;} .sa3-scene-node-type.character{background:#3B82F6;} .sa3-scene-node-type.scene{background:#10B981;} .sa3-scene-node-type.item{background:#8B5CF6;} .sa3-scene-node-type.video{background:#EF4444;} .sa3-scene-node-body{padding:8px 10px;font-size:0.75rem;color:var(--text-2);line-height:1.4;} .sa3-scene-node-body h5{font-size:0.8125rem;font-weight:600;color:var(--text);margin:0 0 4px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .sa3-scene-node-body .desc{font-size:0.75rem;color:var(--text-3);line-height:1.4;max-height:48px;overflow:hidden;} .sa3-scene-node-foot{padding:6px 10px;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--hairline);background:var(--gray-50);font-size:0.75rem;color:var(--text-3);} .sa3-canvas-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--text-3);font-size:0.875rem;gap:8px;} .sa3-canvas-empty-icon{font-size:3rem;opacity:0.4;} .sa3-canvas-svg{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1;} /* workspace topbar 增强 */ .sa3-topbar-extras{display:flex;align-items:center;gap:8px;margin-left:8px;padding-left:12px;border-left:1px solid var(--hairline);} /* my-templates tab panel */ .sa3-agent-panel{padding:1rem 1.5rem;} .sa3-templates-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;} .sa3-templates-header h3{margin:0;font-size:1rem;font-weight:600;color:var(--text);} .sa3-templates-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;} .sa3-template-card{background:var(--surface-elevated);border:1.5px solid var(--hairline);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:6px;transition:all 0.15s;} .sa3-template-card:hover{border-color:var(--orange-400);box-shadow:0 2px 8px rgba(0,0,0,0.06);} .sa3-template-card.builtin{border-style:dashed;background:var(--gray-50);} .sa3-template-card-head{display:flex;justify-content:space-between;align-items:center;gap:8px;} .sa3-template-card-name{font-size:0.875rem;font-weight:600;color:var(--text);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .sa3-template-card-badge{font-size:0.75rem;padding:1px 6px;border-radius:3px;font-weight:600;letter-spacing:0.05em;text-transform:uppercase;} .sa3-template-card-badge.builtin{background:var(--gray-200);color:var(--text-3);} .sa3-template-card-badge.custom{background:var(--accent);color:var(--ink-deep);} .sa3-template-card-meta{font-size:0.75rem;color:var(--text-3);display:flex;gap:8px;align-items:center;} .sa3-template-card-content{font-size:0.75rem;color:var(--text-2);font-family:ui-monospace,monospace;font-variant-numeric:tabular-nums;line-height:1.5;background:var(--canvas-soft);padding:8px;border-radius:6px;max-height:80px;overflow-y:auto;white-space:pre-wrap;word-break:break-word;} .sa3-template-card-actions{display:flex;gap:6px;justify-content:flex-end;border-top:1px solid var(--hairline);padding-top:8px;margin-top:4px;} .sa3-template-card-actions button{padding:4px 10px;font-size:0.75rem;border:1px solid var(--hairline-strong);background:var(--surface-elevated);border-radius:5px;cursor:pointer;color:var(--text-2);transition:all 0.15s;} .sa3-template-card-actions button:hover{border-color:var(--orange-400);color:var(--orange-500);} .sa3-template-card-actions button.delete:hover{border-color:#ef4444;color:#ef4444;background:rgba(239,68,68,0.08);} .sa3-template-card-actions button.use{background:var(--accent);color:var(--ink-deep);border-color:transparent;font-weight:500;} .sa3-template-card-actions button.use:hover{filter:brightness(1.1);} .sa3-templates-empty{padding:3rem 2rem;text-align:center;color:var(--text-3);} .sa3-templates-empty-icon{font-size:3rem;margin-bottom:1rem;opacity:0.4;} .sa3-templates-empty-text{font-size:0.875rem;margin-bottom:1rem;} .sa3-template-cat-filter{display:flex;gap:6px;margin-bottom:1rem;flex-wrap:wrap;} .sa3-template-cat-filter button{padding:4px 10px;font-size:0.75rem;border:1px solid var(--hairline-strong);background:var(--surface-elevated);border-radius:14px;cursor:pointer;color:var(--text-2);transition:all 0.15s;} .sa3-template-cat-filter button:hover{border-color:var(--orange-400);} .sa3-template-cat-filter button.active{background:var(--orange-500);color:var(--ink-deep);border-color:var(--orange-500);font-weight:600;} /* ===== P0.1 · 项目状态机 · 顶部进度条 (GEN2 R3: 醒目定位 · workspaceView 直接子) ===== */ .workspace-view { flex-direction: column !important; align-items: stretch !important; overflow-y: auto; overflow-x: hidden; } .workspace-body { display: flex; flex-direction: column; flex: 1; min-height: 0; width: 100%; } .project-progress { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; background: #161b22; border: 1px solid #30363d; border-radius: 8px; padding: 16px 24px; margin: 16px 24px; position: relative; z-index: 10; font-size: 14px; box-shadow: 0 1px 0 rgba(255,255,255,0.02); } .project-progress .progress-label { color: #8b949e; font-size: 11px; font-weight: 500; margin-right: 16px; letter-spacing: 0.04em; } .res-item { color: #8b949e; font-size: 13px; font-weight: 400; line-height: 1.4; white-space: nowrap; transition: color 200ms ease; } .res-item strong { font-weight: 500; margin-left: 4px; color: #8b949e; } /* v23.2 patch · 资源状态颜色改柔和, 红不再扎眼 */ .res-done strong { color: #4a9d6e; font-weight: 500; } .res-partial strong { color: #c19145; font-weight: 500; } .res-todo strong { color: #c47a7a; font-weight: 500; } /* ===== P0.1 · 项目状态机 · 右侧推荐抽屉 ===== */ .rec-drawer { position: fixed; top: 0; right: 0; width: 320px; height: 100vh; background: #161b22; border-left: 1px solid #30363d; z-index: 998; overflow-y: auto; padding: 20px 16px; box-sizing: border-box; font-size: 14px; color: #c9d1d9; } .rec-drawer.hidden { display: none; } .rec-drawer-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid #30363d; } .rec-drawer-header h3 { margin: 0; font-size: 14px; font-weight: 600; color: #c9d1d9; } .rec-drawer-header h3 .rec-count { /* v23.8 part 3 · GEN3 · 柔和橙 (替代 #bf8700) */ color: #c19145; font-weight: 700; margin: 0 4px; } .rec-drawer-close { background: transparent; border: 1px solid #30363d; color: #8b949e; padding: 4px 10px; font-size: 12px; cursor: pointer; font-family: inherit; border-radius: 4px; } .rec-drawer-close:hover { color: #c9d1d9; border-color: #57606a; } .rec-empty { padding: 32px 8px; text-align: center; color: #57606a; font-size: 13px; } .rec-card { /* v23.8 part 3 · GEN3 · bg 更深暗色 (替代 #0d1117) */ background: #0a0e14; border: 1px solid #30363d; border-radius: 6px; padding: 16px; margin-bottom: 16px; transition: border-color var(--motion-hover), transform var(--motion-hover); } .rec-card:hover{border-color:#57606a;transform:translateY(-1px);} .rec-card.rec-p0 { border-left: 3px solid #c87474; } /* v23.8 part 3 · 柔红 (替代 #cf222e) */ .rec-card.rec-p1 { border-left: 3px solid #c19145; } /* v23.8 part 3 · 柔橙 (替代 #bf8700) */ .rec-card-header { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; font-size: 12px; } .rec-priority { font-weight: 700; padding: 2px 6px; border-radius: 3px; font-size: 11px; letter-spacing: 0.5px; } .rec-priority.p0 { color: #c87474; background: rgba(207, 122, 122, 0.1); } /* v23.8 part 3 · 柔红 */ .rec-priority.p1 { color: #c19145; background: rgba(193, 145, 69, 0.1); } /* v23.8 part 3 · 柔橙 */ .rec-resource { color: #8b949e; font-size: 12px; } .rec-card-body { font-size: 13px; color: #c9d1d9; line-height: 1.6; margin-bottom: 12px; } .rec-card-meta { font-size: 11px; color: #57606a; margin-bottom: 12px; } .rec-card-actions { display: flex; gap: 8px; flex-wrap: wrap; } .rec-action-btn { padding: 6px 12px; font-size: 12px; border-radius: 4px; cursor: pointer; font-family: inherit; border: 1px solid #30363d; background: transparent; color: #c9d1d9; transition: all 150ms ease; } .rec-action-btn.primary { /* v23.8 part 3 · GEN3 · 柔绿 (替代 #2da44e) */ background: #4a9d6e; color: #ffffff; border-color: #4a9d6e; font-weight: 600; } .rec-action-btn.primary:hover { filter: brightness(1.1); } .rec-action-btn.secondary { color: #8b949e; } .rec-action-btn.secondary:hover { color: #c9d1d9; border-color: #57606a; } .rec-action-btn.tertiary { color: #57606a; } .rec-action-btn.tertiary:hover { color: #8b949e; } /* workspace main content offset when drawer is open */ body.rec-drawer-open #app { margin-right: 320px; transition: margin 200ms ease; } body.rec-drawer-closed #app { margin-right: 0; transition: margin 200ms ease; } /* ===== Team Module (P2) ===== */ .avatar-wrap{position:relative;} .user-dropdown{position:absolute;top:42px;right:0;width:300px;background:var(--surface-elevated);border:1px solid var(--hairline-strong);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,0.12);z-index:9999;display:none;overflow:hidden;} .user-dropdown.show{display:block;} .ud-header{padding:1rem;background:linear-gradient(135deg,var(--orange-50),#fff);border-bottom:1px solid var(--hairline);} .ud-name{font-size:0.9375rem;font-weight:600;color:var(--text);} .ud-meta{font-size:0.75rem;color:var(--text-3);margin-top:0.25rem;} .ud-tokens{display:flex;justify-content:space-between;align-items:center;padding:0.625rem 1rem;background:var(--canvas-soft);font-size:0.8125rem;} .ud-tokens .num{font-weight:700;color:var(--orange-600);} .ud-section{padding:0.5rem 0;border-bottom:1px solid var(--hairline);} .ud-section:last-child{border-bottom:none;} .ud-section-title{padding:0.5rem 1rem 0.25rem;font-size:0.75rem;color:var(--text-3);text-transform:uppercase;letter-spacing:0.05em;} .ud-item{display:flex;align-items:center;justify-content:space-between;padding:0.5rem 1rem;cursor:pointer;font-size:0.8125rem;color:var(--text);} .ud-item:hover{background:var(--canvas-soft);} .ud-item.active{background:var(--orange-50);color:var(--orange-600);font-weight:500;} .ud-item .label{display:flex;align-items:center;gap:0.5rem;} .ud-item .badge{font-size:0.75rem;padding:0.125rem 0.375rem;border-radius:4px;background:var(--orange);color:#fff;} .workspace-switch{display:flex;align-items:center;gap:0.75rem;padding:0.625rem 1.5rem;background:var(--canvas-soft);border-bottom:1px solid var(--hairline);font-size:0.8125rem;min-height:48px;flex-wrap:wrap;} /* ⭐ v23.10 HARNESS V3 · 前端工程师 fix (老板原话: "项目参数选项无法点击, 改为标题点击") ws-project-params-title: 可点击 h3 标题, 配 cursor:pointer + hover 下划线 + 点击反馈, 不依赖任何 button clicker (webview/iframe/canvas 内都能直接 onclick). */ .ws-project-params-title{ margin:0;padding:0.25rem 0.5rem;font-family:'Inter',sans-serif; font-size:0.875rem;font-weight:600;letter-spacing:-0.01em; color:var(--orange-600);cursor:pointer;user-select:none; border-radius:6px;transition:background-color 0.15s,color 0.15s,text-decoration 0.15s; text-decoration:none;display:inline-flex;align-items:center; } .ws-project-params-title:hover{ background:rgba(232,196,160,0.18);color:var(--orange-700);text-decoration:underline; } .ws-project-params-title:active{ background:rgba(232,196,160,0.32);transform:translateY(1px); } .ws-project-params-title:focus{outline:2px solid var(--orange-500);outline-offset:2px;} /* v18-fix42 · 2026-07-07 00:42 · 老板反馈「工作区是类目名称应该UI有所区分」· 突出成 section label */ .ws-label{display:inline-flex;align-items:center;gap:0.375rem;padding:0.3125rem 0.625rem;background:linear-gradient(135deg,rgba(232,196,160,0.18) 0%,rgba(232,196,160,0.12) 100%);border:1px solid rgba(232,196,160,0.35);border-radius:6px;color:var(--orange-600);font-weight:700;letter-spacing:0.05em;text-transform:uppercase;font-size:0.75rem;flex-shrink:0;} .ws-label::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--orange-500);box-shadow:0 0 6px rgba(232,196,160,0.6);} .ws-tabs{display:flex;gap:0.25rem;flex:1;overflow-x:auto;min-width:0;scrollbar-width:thin;padding-bottom:2px;} .ws-tab{padding:0.4375rem 0.875rem;border:1px solid var(--hairline-strong);border-radius:8px;cursor:pointer;font-size:0.8125rem;color:var(--text-2);background:rgba(255,255,255,0.02);white-space:nowrap;display:flex;align-items:center;gap:0.4375rem;font-weight:500;transition:all 0.15s;position:relative;z-index:1;pointer-events:auto;flex-shrink:0;} .ws-tab:hover{border-color:var(--grad-peach);color:var(--text);background:rgba(232,196,160,0.04);} .ws-tab.active{background:linear-gradient(135deg,rgba(232,196,160,0.12) 0%,rgba(232,196,160,0.08) 100%);border-color:var(--grad-peach);color:var(--text);font-weight:600;} .ws-tab .role{font-size:0.75rem;padding:0.125rem 0.4375rem;border-radius:4px;background:var(--accent);color:var(--ink-deep);font-weight:600;letter-spacing:0.03em;text-transform:uppercase;} .ws-actions{display:flex;gap:0.5rem;} .ws-btn{padding:0.4375rem 0.75rem;border:1px solid var(--hairline-strong);background:transparent;border-radius:8px;font-size:0.75rem;color:var(--text-2);cursor:pointer;font-family:inherit;transition:all 0.15s;} .ws-btn:hover{border-color:var(--grad-peach);color:var(--text);background:rgba(232,196,160,0.04);} .message-bell{position:relative;cursor:pointer;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:6px;color:var(--text-2);font-size:1.1rem;} .message-bell:hover{background:var(--canvas-soft);color:var(--orange-600);} .message-bell::before{content:'提示';display:flex;align-items:center;justify-content:center;width:18px;height:18px;font-size:0.6875rem;font-weight:600;color:var(--text-2);} .message-bell .badge{position:absolute;top:2px;right:2px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:#ef4444;color:#fff;font-size:0.75rem;font-weight:600;display:flex;align-items:center;justify-content:center;} .message-dropdown{position:absolute;top:42px;right:80px;width:380px;max-height:480px;background:var(--surface-elevated);border:1px solid var(--hairline-strong);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,0.12);z-index:9999;display:none;flex-direction:column;} .message-dropdown.show{display:flex;} .md-header{padding:0.75rem 1rem;border-bottom:1px solid var(--hairline);display:flex;justify-content:space-between;align-items:center;} .md-header .title{font-size:0.875rem;font-weight:600;} .md-header .actions{display:flex;gap:0.5rem;} .md-list{flex:1;overflow-y:auto;max-height:380px;} .md-item{padding:0.75rem 1rem;border-bottom:1px solid var(--gray-50);cursor:pointer;font-size:0.8125rem;} .md-item:hover{background:var(--canvas-soft);} .md-item.unread{background:#fff8ec;} .md-item .mt{font-weight:600;color:var(--text);margin-bottom:0.25rem;} .md-item .mc{color:var(--text-2);line-height:1.5;} .md-item .ms{font-size:0.75rem;color:var(--text-3);margin-top:0.375rem;} .md-empty{padding:2rem 1rem;text-align:center;color:var(--text-3);font-size:0.8125rem;} .org-binding-form{padding:0.5rem 0;} .ob-tabs{display:flex;border-bottom:1px solid var(--hairline);margin-bottom:1rem;} .ob-tab{flex:1;padding:0.75rem;text-align:center;cursor:pointer;font-size:0.875rem;color:var(--text-3);border-bottom:2px solid transparent;} .ob-tab.active{color:var(--orange-600);border-bottom-color:var(--orange-500);font-weight:500;} .layout-3col{display:grid;grid-template-columns:auto 1fr auto;height:calc(100vh - 52px);position:relative;} .right-sidebar{width:300px;background:var(--surface-elevated);border-left:1px solid var(--gray-200);display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto;} .right-sidebar.hidden{display:none;} .rs-header{padding:0.75rem 1rem;border-bottom:1px solid var(--hairline);display:flex;justify-content:space-between;align-items:center;} .rs-header .title{font-size:0.875rem;font-weight:600;color:var(--text);} .rs-section{padding:0.75rem 1rem;border-bottom:1px solid var(--gray-50);} .rs-section-title{font-size:0.75rem;color:var(--text-3);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:0.5rem;} .rs-card{background:var(--canvas-soft);border-radius:8px;padding:0.75rem;margin-bottom:0.5rem;font-size:0.8125rem;} .rs-card .label{color:var(--text-3);font-size:0.75rem;} .rs-card .value{font-weight:600;color:var(--text);font-size:1.125rem;margin-top:0.125rem;} .rs-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;} .rs-stat-grid .rs-card{margin:0;} .rs-btn{display:inline-block;padding:0.375rem 0.75rem;background:var(--orange-500);color:var(--ink-deep);border-radius:6px;font-size:0.75rem;cursor:pointer;border:none;} .rs-btn:hover{background:var(--orange-600);} .rs-btn-ghost{background:transparent;border:1px solid var(--hairline-strong);color:var(--text);} .rs-btn-ghost:hover{border-color:var(--orange);color:var(--orange-600);background:transparent;} .rs-toggle{position:absolute;top:8px;right:8px;z-index:30;background:var(--surface-elevated);border:1px solid var(--hairline-strong);border-radius:6px;padding:0.25rem 0.5rem;cursor:pointer;font-size:0.75rem;color:var(--text-2);} .rs-toggle:hover{color:var(--orange-600);border-color:var(--orange);} /* ========================================= v34 · SA5 · 剪辑区 CSS (CapCut 风格) ========================================= */ #editorView { display: flex; flex-direction: column; height: calc(100vh - 52px); background: var(--canvas); color: var(--text); font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; overflow: hidden; } /* 顶栏 */ .editor-topbar { display: flex; align-items: center; gap: 0.5rem; height: 48px; padding: 0 1rem; background: var(--canvas-soft); border-bottom: 1px solid var(--hairline); flex-shrink: 0; } .editor-topbar .title { font-size: 0.875rem; font-weight: 600; color: var(--text); flex: 1; } .editor-topbar .title input { background: transparent; border: 1px solid transparent; padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.875rem; color: var(--text); font-family: inherit; min-width: 200px; } .editor-topbar .title input:hover, .editor-topbar .title input:focus { border-color: var(--hairline-strong); background: var(--surface-elevated); outline: none; } .editor-topbar button { padding: 0.375rem 0.75rem; font-size: 0.75rem; font-weight: 500; background: transparent; color: var(--text-2); border: 1px solid var(--hairline-strong); border-radius: 6px; cursor: pointer; font-family: inherit; transition: all 0.15s; } .editor-topbar button:hover { border-color: var(--grad-peach); color: var(--grad-peach); } .editor-topbar button.primary { background: var(--grad-peach); color: var(--ink-deep); border-color: var(--grad-peach); } .editor-topbar button.primary:hover { background: #f7b89a; border-color: #f7b89a; } .editor-topbar button:disabled { opacity: 0.4; cursor: not-allowed; } /* 主体三栏:素材库 | 预览+时间轴 | 属性面板 */ .editor-body { display: flex; flex: 1; min-height: 0; } /* 左侧素材库 */ .editor-assets { width: 280px; flex-shrink: 0; background: var(--canvas-soft); border-right: 1px solid var(--hairline); display: flex; flex-direction: column; } .editor-assets .tabs { display: flex; border-bottom: 1px solid var(--hairline); } .editor-assets .tabs button { flex: 1; padding: 0.625rem 0; background: transparent; border: none; color: var(--text-3); font-size: 0.75rem; font-weight: 500; cursor: pointer; border-bottom: 2px solid transparent; font-family: inherit; transition: all 0.15s; } .editor-assets .tabs button.active { color: var(--grad-peach); border-bottom-color: var(--grad-peach); } .editor-assets .tabs button:hover { color: var(--text); } .editor-assets .tab-content { flex: 1; overflow-y: auto; padding: 0.5rem; } /* v18-fix60 · 老板「单独素材区」· header + 类型图标 + drag hint */ .editor-assets-header { display: flex; justify-content: space-between; align-items: baseline; padding: 0.5rem 0.625rem 0.25rem; border-bottom: 1px solid var(--hairline); background: linear-gradient(90deg, rgba(168, 200, 232, 0.04), transparent); } .editor-assets-title { font-size:0.75rem; font-weight: 700; color: var(--text); letter-spacing: 0.05em; text-transform: uppercase; } .editor-assets-hint { font-size:0.75rem; color: var(--text-3); font-style: italic; } .editor-assets-tabs { gap: 0 !important; padding: 0 !important; } .editor-assets-tabs .asset-tab { display: flex !important; align-items: center; justify-content: center; gap: 5px; padding: 0.5rem 0 !important; } .asset-tab-icon { width: 16px; height: 16px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; font-size:0.75rem; font-weight: 700; color: #fff; flex-shrink: 0; } .asset-tab-icon-video { background: linear-gradient(135deg, #f4c5a8, #e89b6f); } .asset-tab-icon-audio { background: linear-gradient(135deg, #a8c8e8, #6f9ce8); } .asset-tab-icon-subtitle { background: linear-gradient(135deg, #d4a8e8, #a86fe8); } .asset-tab-label { font-size: 0.75rem; } .editor-assets .upload-area { border: 1px dashed var(--hairline-strong); border-radius: 8px; padding: 1rem 0.5rem; text-align: center; margin-bottom: 0.5rem; cursor: pointer; color: var(--text-3); font-size: 0.75rem; transition: all 0.15s; } .editor-assets .upload-area:hover { border-color: var(--grad-peach); color: var(--grad-peach); background: rgba(232,196,160,0.05); } .editor-assets .upload-area.dragover { border-color: var(--grad-peach); background: rgba(232,196,160,0.1); } .editor-assets .asset-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem; margin-bottom: 0.25rem; background: var(--surface-elevated); border: 1px solid var(--hairline); border-radius: 6px; cursor: grab; font-size: 0.75rem; color: var(--text); transition: all 0.15s; } .editor-assets .asset-item:hover { border-color: var(--grad-peach); transform: translateX(2px); } .editor-assets .asset-item:active { cursor: grabbing; } .editor-assets .asset-icon { width: 32px; height: 24px; background: var(--canvas-deep); border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size:0.75rem; color: var(--text-3); flex-shrink: 0; } .editor-assets .asset-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .editor-assets .empty { text-align: center; color: var(--text-3); font-size: 0.75rem; padding: 2rem 1rem; } /* 中央:预览 + 时间轴 */ .editor-main { flex: 1; display: flex; flex-direction: column; min-width: 0; } .editor-preview { flex: 1; background: #000; display: flex; align-items: center; justify-content: center; position: relative; min-height: 240px; } .editor-preview video { max-width: 100%; max-height: 100%; outline: none; } .editor-preview .preview-empty { color: var(--text-3); font-size: 0.875rem; text-align: center; } .editor-preview .preview-empty .emoji { font-size: 3rem; margin-bottom: 0.5rem; opacity: 0.5; } .editor-preview .playback-bar { position: absolute; bottom: 0; left: 0; right: 0; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; background: rgba(0,0,0,0.7); color: #fafaf9; font-size: 0.75rem; } .editor-preview .playback-bar button { background: transparent; border: none; color: #fafaf9; cursor: pointer; font-size: 0.875rem; padding: 0.25rem 0.5rem; } .editor-preview .playback-bar button:hover { color: var(--grad-peach); } .editor-preview .playback-bar .time { font-family: monospace; } /* 时间轴 */ .editor-timeline { height: 200px; background: var(--canvas-soft); border-top: 1px solid var(--hairline); display: flex; flex-direction: column; flex-shrink: 0; } .timeline-toolbar { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-bottom: 1px solid var(--hairline); font-size: 0.75rem; color: var(--text-3); } .timeline-toolbar button { background: transparent; border: 1px solid var(--hairline-strong); color: var(--text-2); padding: 0.25rem 0.5rem; border-radius: 4px; cursor: pointer; font-size:0.75rem; font-family: inherit; } .timeline-toolbar button:hover { border-color: var(--grad-peach); color: var(--grad-peach); } .timeline-toolbar .spacer { flex: 1; } .timeline-svg-host { flex: 1; overflow-x: auto; overflow-y: hidden; } .timeline-svg { display: block; min-width: 100%; height: 100%; } .tl-clip { cursor: move; transition: opacity 0.15s; } .tl-clip:hover { opacity: 0.85; } .tl-clip.selected { stroke: var(--grad-peach); stroke-width: 2; } .tl-clip.multi-selected .tl-clip-body { stroke: #60A5FA; stroke-width: 2.5; stroke-dasharray: 4 2; } .tl-trim { cursor: ew-resize; fill: rgba(255,255,255,0.2); } .tl-trim:hover { fill: rgba(255,255,255,0.4); } .tl-transition { cursor: pointer; } .tl-transition:hover { opacity: 0.9; } .tl-ruler text { fill: var(--text-3); font-size: 9px; font-family: monospace; } .tl-ruler line { stroke: var(--hairline-strong); stroke-width: 1; } .tl-playhead { stroke: var(--grad-peach); stroke-width: 2; } .tl-track-label { fill: var(--text-3); font-size: 10px; font-weight: 600; font-family: 'Inter', sans-serif; } /* 右侧属性面板 */ .editor-properties { width: 280px; flex-shrink: 0; background: var(--canvas-soft); border-left: 1px solid var(--hairline); padding: 1rem; overflow-y: auto; } .editor-properties h3 { font-size: 0.75rem; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 0.5rem 0; } .editor-properties .field { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.75rem; } .editor-properties .field label { font-size:0.75rem; color: var(--text-3); font-weight: 500; } .editor-properties .field input, .editor-properties .field select { background: var(--surface-elevated); border: 1px solid var(--hairline-strong); color: var(--text); padding: 0.375rem 0.5rem; border-radius: 4px; font-size: 0.75rem; font-family: inherit; } .editor-properties .field input:focus, .editor-properties .field select:focus { outline: none; border-color: var(--grad-peach); } .editor-properties .empty { color: var(--text-3); font-size: 0.75rem; text-align: center; padding: 2rem 1rem; } .transitions-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-top: 0.5rem; } .transition-btn { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 0.5rem 0.25rem; background: var(--surface-elevated); border: 1px solid var(--hairline-strong); border-radius: 6px; color: var(--text); font-size:0.75rem; cursor: pointer; font-family: inherit; transition: all 0.15s; text-align: center; } .transition-btn:hover { border-color: var(--grad-peach); background: rgba(232,196,160,0.08); } .transition-btn .icon { width: 32px; height: 18px; display: flex; align-items: center; justify-content: center; font-size: 0.875rem; color: var(--grad-peach); } /* ========================================= v18-fix64 · 老板反馈「视频保存区在剪辑区」+「素材区改弹窗」· editorSavedSection (顶部我的剪辑区) + editorAssetsModal (弹窗) ========================================= */ /* 顶部我的剪辑区 */ .editor-saved-section { flex-shrink: 0; background: linear-gradient(90deg, rgba(139,92,246,0.05) 0%, rgba(232,196,160,0.03) 100%); border-bottom: 1px solid var(--hairline); padding: 0.5rem 0.75rem; max-height: 140px; display: flex; flex-direction: column; } .editor-saved-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.375rem; } .editor-saved-title { font-size:0.75rem; font-weight: 700; color: var(--text); letter-spacing: 0.05em; text-transform: uppercase; } .editor-saved-actions { display: flex; gap: 6px; } .editor-saved-new-btn, .editor-saved-refresh-btn { padding: 0.25rem 0.625rem; font-size:0.75rem; background: var(--canvas-soft); color: var(--text-2); border: 1px solid var(--hairline-strong); border-radius: 5px; cursor: pointer; font-family: inherit; transition: all 0.15s; } .editor-saved-new-btn { background: var(--grad-peach); color: var(--ink-deep); border-color: var(--grad-peach); font-weight: 600; } .editor-saved-new-btn:hover { background: #f7b89a; } .editor-saved-refresh-btn:hover { border-color: var(--grad-peach); color: var(--grad-peach); } .editor-saved-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; scrollbar-width: thin; } .editor-saved-list::-webkit-scrollbar { width: 6px; } .editor-saved-list::-webkit-scrollbar-thumb { background: var(--hairline-strong); border-radius: 3px; } /* 「素材库」按钮 · 替换原本的 inline tab */ .editor-assets-open-btn { padding: 0.25rem 0.75rem; font-size:0.75rem; font-weight: 600; background: var(--grad-peach); color: var(--ink-deep); border: 1px solid var(--grad-peach); border-radius: 5px; cursor: pointer; font-family: inherit; transition: all 0.15s; } .editor-assets-open-btn:hover { background: #f7b89a; } /* 素材库弹窗 tab · 与侧边 tab 复用样式但加 eam-tab class */ .editor-assets-modal-tabs { gap: 0 !important; padding: 0 !important; } .eam-tab { flex: 1; padding: 0.625rem 0; background: transparent; border: none; color: var(--text-3); font-size: 0.75rem; font-weight: 500; cursor: pointer; border-bottom: 2px solid transparent; font-family: inherit; transition: all 0.15s; display: flex !important; align-items: center; justify-content: center; gap: 5px; } .eam-tab.active { color: var(--grad-peach); border-bottom-color: var(--grad-peach); } .eam-tab:hover { color: var(--text); } /* 弹窗内素材项 */ .editor-asset-modal-item { background: var(--surface-elevated); border: 1px solid var(--hairline); border-radius: 8px; cursor: grab; overflow: hidden; display: flex; flex-direction: column; transition: all 0.15s; } .editor-asset-modal-item:hover { border-color: var(--grad-peach); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(232,196,160,0.18); } .editor-asset-modal-item:active { cursor: grabbing; } .editor-asset-modal-thumb { width: 100%; height: 90px; background: #000; position: relative; display: flex; align-items: center; justify-content: center; } .editor-asset-modal-name { font-size:0.75rem; color: var(--text); padding: 5px 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: var(--canvas-soft); } /* 转场预览悬浮 */ .transition-preview { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--surface-elevated); border: 1px solid var(--hairline-strong); border-radius: 12px; padding: 1rem; z-index: 1000; box-shadow: 0 24px 60px rgba(0,0,0,0.5); display: none; } .transition-preview.show { display: block; } .transition-preview video { width: 480px; height: 270px; background: #000; } .transition-preview .close { background: transparent; border: 1px solid var(--hairline-strong); color: var(--text-2); padding: 0.25rem 0.75rem; border-radius: 4px; cursor: pointer; font-size: 0.75rem; margin-top: 0.5rem; display: block; margin-left: auto; margin-right: auto; } .transition-preview .close:hover { color: var(--grad-peach); border-color: var(--grad-peach); } /* Toast 提示 */ .editor-toast { position: fixed; top: 80px; right: 24px; background: var(--surface-elevated); border: 1px solid var(--hairline-strong); border-radius: 8px; padding: 0.75rem 1rem; font-size: 0.75rem; color: var(--text); z-index: 9999; max-width: 320px; box-shadow: 0 8px 24px rgba(0,0,0,0.3); animation: editor-toast-in 0.2s ease-out; } .editor-toast.success { border-color: #22c55e; } .editor-toast.error { border-color: #ef4444; } @keyframes editor-toast-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } @media (max-width: 1024px) { .editor-properties { display: none; } .editor-assets { width: 220px; } } @media (max-width: 767px) { .editor-body { flex-direction: column; } .editor-assets { width: 100%; max-height: 180px; } .editor-properties { display: none; } } /* HARNESS V2.1 Sprint P1.2 · 2026-07-12 16:35 · 移动端汉堡菜单 */ /* P0.1 C · TASTE 化 nav · 4 档颜色 + 完整词 · 2026-07-17 GEN3 */ .nav-btn { color: #57606a; transition: color 200ms ease, background 200ms ease; } .nav-btn:hover { color: #e6edf3; background: rgba(255,255,255,0.04); } .nav-btn.active { color: #e6edf3; font-weight: 600; } .nav-btn { transition: opacity 0.2s, transform 0.2s; } /* v18.103 fix #2 · 2026-07-16 22:25 · mobile-menu-toggle 高度 ≥ 44px (Apple HIG) */ .mobile-menu-toggle { display: none; background: var(--canvas-soft); color: var(--text); border: 1px solid var(--hairline-strong); padding: 0.75rem 0.875rem; border-radius: 6px; cursor: pointer; font-family: inherit; font-size: 1.25rem; line-height: 1; min-height: 44px; min-width: 44px; align-items: center; justify-content: center; } /* v18.102 fix #1 · 2026-07-16 22:15 · nav 断点 768 → 767 (iPad 竖屏恢复 nav) */ @media (max-width: 767px) { /* 隐藏 nav-btn 横排 · 显示汉堡 */ .nav-btn { display: none; } .mobile-menu-toggle { display: inline-block; } .nav-btn.mobile-open { display: flex; position: absolute; top: 56px; left: 0; right: 0; flex-direction: column; background: var(--surface-card); border-bottom: 1px solid var(--hairline-strong); z-index: 999; padding: 0.5rem; gap: 0.25rem; } .nav-btn.mobile-open:hover { background: rgba(232,196,160,0.08); } } @media (max-width: 600px) { /* 进一步紧凑 */ .nav-btn.mobile-open { font-size: 0.875rem; padding: 0.375rem; } } /* ====== SA-3 fix93 · v18 UI 多 viewport 修复 · 2026-07-14 ====== 4 个断点：1440 / 1024 / 768 / 480 desktop ≥1025：保持现状 tablet 768-1024：nav 顶部 tab 滑动条 + sidebar 默认收起 mobile 480-768：nav 折叠为 hamburger menu + 全单列布局 mobile <480：font-size 缩 0.875 + 紧凑 padding */ /* 断点 1 · max-width 1440（large desktop 边界 · 优化大屏布局） */ @media (max-width: 1440px) { .sidebar { width: 180px; } .right-sidebar { width: 260px; } .editor-assets { width: 240px; } .editor-properties { width: 280px; } } /* 断点 2 · max-width 1024（tablet 边界 · 切换为顶部 tab + 收起 sidebar） */ @media (max-width: 1024px) { /* sidebar 默认收起 → 仅显示浮层按钮触发 */ .sidebar { width: 220px; transform: translateX(-100%) !important; position: fixed !important; left: 0; top: 0; bottom: 0; z-index: 1000; transition: transform 0.25s ease; box-shadow: 4px 0 20px rgba(0,0,0,0.15); } .sidebar.open { transform: translateX(0) !important; } .sidebar-resizer { display: none !important; } /* 浮层按钮触发器可见 */ .mobile-menu-btn { display: inline-flex !important; align-items: center; justify-content: center; } /* 顶部 tab 横排 · 可横向滑动 */ .nav { display: flex; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin; max-width: 100%; flex-wrap: nowrap; gap: 0.25rem; } .nav::-webkit-scrollbar { height: 3px; } .nav::-webkit-scrollbar-thumb { background: var(--hairline-strong); border-radius: 2px; } .nav-btn { flex-shrink: 0; padding: 0.4375rem 0.75rem; font-size: 0.8125rem; white-space: nowrap; } /* v18.105 fix #1 · 2026-07-17 01:50 · iPad 竖屏 768-767 断点 nav 走汉堡下拉（避免 9 按钮 + 侧栏 + 返回 挤压 logo 换行） */ .mobile-menu-toggle { display: inline-flex; align-items: center; justify-content: center; } .nav-btn { display: none; } .nav.mobile-open { display: flex; flex-direction: column; } /* canvas / 视频区 适配 tablet */ .editor-body { flex-direction: column; } .editor-assets { width: 100%; max-height: 160px; } .editor-properties { display: none; } /* 右侧栏 改为浮层 */ .right-sidebar { width: 280px; transform: translateX(100%); position: fixed; right: 0; top: 0; bottom: 0; z-index: 999; transition: transform 0.25s ease; } .right-sidebar:not(.hidden) { transform: translateX(0); } } /* 断点 3 · max-width 768（mobile 边界 · hamburger menu + 全单列） */ @media (max-width: 767px) { /* v18.100 fix: 不要设 .nav display:none,会杀死所有子元素显示 改为 .nav 本身是 row layout,内部 nav-btn 全部隐藏 点汉堡后 .nav-btn 加 .mobile-open class ->显示 */ .nav { display: flex; } .nav-btn { display: none; } .mobile-menu-toggle { display: inline-flex; align-items: center; justify-content: center; } /* v18.105 fix #1 · 2026-07-17 01:50 · 隐藏 mobile-menu-btn (侧栏按钮) 避免与 mobile-menu-toggle (菜单) 双汉堡重复 */ .mobile-menu-btn { display: none !important; } /* 移动端 nav-btn 展开样式 · 让 nav 变成 dropdown menu */ .nav { position: fixed; top: 56px; left: 0; right: 0; flex-direction: column; background: var(--surface-card); border-bottom: 1px solid var(--hairline-strong); box-shadow: 0 4px 20px rgba(0,0,0,0.4); z-index: 998; padding: 0.5rem; gap: 0.25rem; max-height: calc(100vh - 56px); overflow-y: auto; display: none; /* 默认隐藏整个 nav */ } .nav.mobile-open { display: flex; } /* 汉堡展开时显示整个 nav */ .nav-btn.mobile-open { display: flex; width: 100%; text-align: left; padding: 0.625rem 0.875rem; border-radius: 8px; font-size: 0.875rem; margin: 0.125rem 0; background: transparent; color: var(--text); align-items: center; justify-content: flex-start; position: static; /* 不再 fixed，因为父 .nav 是 fixed */ } .nav-btn.mobile-open.active { background: rgba(232,196,160,0.12); color: #fafaf9; font-weight: 600; } .nav-btn.mobile-open:hover { background: rgba(232,196,160,0.08); } /* 全单列布局 */ .header { padding: 0.5rem 0.625rem; gap: 0.375rem; flex-wrap: wrap; } .header-left { flex-wrap: wrap; gap: 0.375rem; } .logo { font-size: 0.9375rem; } .version-badge { font-size:0.75rem; padding: 1px 6px; } .token-badge { font-size:0.75rem; padding: 0.125rem 0.4375rem; } .ghost-btn { font-size:0.75rem; padding: 0.25rem 0.5rem; } /* v18.100 fix: 顶栏右侧 元素在 mobile 太挤会换行 → 紧凑化 + 隐藏同步按钮 + 缩小token badge */ .header-right { gap: 0.25rem; flex-wrap: nowrap; } .header-right .ghost-btn { padding: 0.25rem 0.4rem; font-size:0.75rem; } .header-right .token-badge { padding: 0.125rem 0.3rem; font-size:0.75rem; } /* mobile 隐藏「同步」按钮 · 保留 AGENT + 积分 + 铃铛 + 头像 */ #manualSyncBtn { display: none !important; } /* token 数字太长(10000)用缩写 */ .token-badge span { font-variant-numeric: tabular-nums; } /* 隐藏冗长 title 属性以避免 tooltip 折行 */ #agentEditorBtn { padding: 0.25rem 0.4rem; } /* 「30 秒看懂能干嘛」3 卡片在 mobile · 不再竖排堆叠 · 改为单列 */ .feature-cards-grid, div[style*="grid-template-columns:repeat(3"] { grid-template-columns: 1fr !important; } /* 「准备好创作下一个爆款了吗？」+ 01/02 按钮组 · 移动端单列 */ div[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; } div[style*="grid-template-columns: repeat(2"] { grid-template-columns: 1fr !important; } /* 30 秒看懂能干嘛 区块内的 创作/协作/管理 3 卡片 */ div[style*="display: grid"][style*="grid-template-columns:repeat(3"] { grid-template-columns: 1fr !important; } /* 7 个 nav view 在 mobile 全部可访问 · 走 hamburger menu */ /* hamburger 展开时所有 nav-btn 都可见 */ .nav-btn.mobile-open { width: 100%; text-align: left; padding: 0.625rem 0.875rem; border-radius: 8px; font-size: 0.875rem; margin: 0.125rem 0; background: transparent; color: var(--text); } .nav-btn.mobile-open.active { background: rgba(232,196,160,0.12); color: var(--fafaf9, #fafaf9); font-weight: 600; } /* sidebar 默认收起 · 浮层按钮触发 */ .sidebar { width: 280px !important; transform: translateX(-100%) !important; } .sidebar.open { transform: translateX(0) !important; } .sidebar-header h3 { font-size: 0.875rem; } .sidebar-header p { font-size:0.75rem; } /* modal · 17 个全部 max-width 95vw + 内部滚动 */ .modal, .modal-overlay .modal, .modal-overlay .modal-card, div.modal-overlay >div.modal, div.modal-overlay >div[class="modal"] { width: 95vw !important; max-width: 95vw !important; max-height: 90vh !important; padding: 1rem !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; } /* canvas / 视频区 mobile 全屏 + pin 到底部 */ .canvas-area, .editor-canvas, .v18-canvas, [class*="canvas-container"] { width: 100% !important; height: calc(100vh - 120px) !important; min-height: 240px; } /* 编辑器属性面板 移动端默认隐藏 · 浮层 */ .editor-properties { display: none !important; } .editor-assets { width: 100% !important; max-height: 140px !important; } /* timeline 移动端隐藏时间刻度 · 仅显示片段块 */ .editor-timeline-ruler, .timeline-ruler, .ruler { display: none !important; } .timeline-clip, .editor-timeline-clip { min-width: 32px !important; } /* 表单 grid · 单列 */ .form-grid, .modal-form { grid-template-columns: 1fr !important; } /* workspace 卡片单列 */ .workspace-grid, .capability-grid { grid-template-columns: 1fr !important; } /* 抑制横向溢出 */ body, html { overflow-x: hidden; } .container, .app-body { max-width: 100vw; } } /* 断点 4 · max-width 480（小屏边界 · font 缩 0.875 + 紧凑 padding） */ @media (max-width: 480px) { html { font-size: 14px; } /* 1rem = 14px（标准 16px 的 0.875） */ body { font-size: 0.875rem; } /* 顶部更紧凑 */ .header { padding: 0.375rem 0.5rem; } .logo { font-size: 0.8125rem; } .version-badge { font-size:0.75rem; padding: 1px 5px; margin-left: 4px !important; } .token-badge { font-size:0.75rem; padding: 0.125rem 0.375rem; } .ghost-btn { font-size:0.75rem; padding: 0.1875rem 0.4375rem; } .avatar-wrap .avatar { width: 28px; height: 28px; font-size: 0.75rem; } /* 移动端 nav-btn 紧凑 */ .nav-btn.mobile-open { padding: 0.5rem 0.625rem; font-size: 0.8125rem; } /* modal 进一步紧凑 padding */ .modal, .modal-overlay .modal-card { padding: 0.75rem !important; } .modal h2, .modal h3 { font-size: 1rem !important; } /* 表格 · 横向滚动 */ /* v18.104 fix #2 · 2026-07-16 22:25 · admin/dashboard/videoLibrary 表格水平溢出包裹 */ table { font-size: 0.75rem; display: block; overflow-x: auto; max-width: 100%; } /* dashboard / admin / videoLibrary 表格容器 (table-layout fixed) */ .table-wrap { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; } .table-wrap > table { display: table; border-collapse: collapse; } .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* 按钮紧凑 */ button { font-size: 0.8125rem; padding: 0.375rem 0.625rem; } button.primary, .btn-primary { padding: 0.4375rem 0.75rem; } /* canvas 全屏 pin 底 */ .canvas-area, .editor-canvas { height: calc(100vh - 100px) !important; } /* sidebar 更窄 */ .sidebar { width: 260px !important; } } /* ====== SA-3 fix93 · 移动端辅助类 ====== */ .mobile-only { display: none; } @media (max-width: 767px) { .mobile-only { display: inline-flex; } } .desktop-only { display: inline-flex; } @media (max-width: 767px) { .desktop-only { display: none !important; } } /* ====== SA-3 fix93 · 防止水平溢出 ====== */ html, body { max-width: 100vw; overflow-x: hidden; } /* HARNESS V2.1 Sprint P2.1.A · ModalFramework Form 类通用样式 */ .modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); display: none; align-items: center; justify-content: center; z-index: 9999; animation: modalFadeIn 0.2s ease-out; } .modal-overlay.show { display: flex; } .modal-overlay .modal-card { background: var(--surface-card, #1a1a1a); border-radius: 12px; border: 1px solid var(--hairline, rgba(255,255,255,0.1)); padding: 1.5rem; min-width: 400px; max-width: 90vw; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.5); } @keyframes modalFadeIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } /* ===== P0.2 Team API Keys · TASTE ===== */ #teamApiKeysView, #teamApiKeysView * { box-sizing: border-box; } #teamApiKeysView { /* v23.8 part 3 · GEN3 · 柔色调色板 (替代 GitHub #2da44e/#bf8700/#cf222e/#0d1117) */ --tak-done: #4a9d6e; /* 柔绿 */ --tak-partial: #c19145; /* 柔橙 */ --tak-todo: #c87474; /* 柔红 */ --tak-neutral: #57606a; --tak-canvas: #0a0e14; /* 更深暗色 bg (替代 #0d1117) */ --tak-surface: #161b22; --tak-line: #30363d; --tak-text: #e6edf3; color: var(--tak-text); background: var(--tak-canvas); border: 1px solid var(--tak-line); padding: 24px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; } .team-api-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 24px; border-bottom: 1px solid var(--tak-line); } .team-api-header h3 { margin: 0; color: var(--tak-text); font-size: 24px; line-height: 1.3; font-weight: 700; } .team-api-header p { margin: 8px 0 0; color: var(--tak-neutral); font-size: 14px; } .team-api-key-list { display: grid; gap: 0; } .team-api-key-block { padding: 24px 0; border-bottom: 1px solid var(--tak-line); background: var(--tak-canvas); } .team-api-key-block:last-child { border-bottom: 0; } .team-api-key-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .team-api-key-title { color: var(--tak-text); font-size: 18px; font-weight: 600; } .team-api-status { color: var(--tak-neutral); font-size: 12px; font-weight: 600; } .team-api-status.configured, .team-api-health.healthy { color: var(--tak-done); } .team-api-status.disabled, .team-api-health.failed { color: var(--tak-todo); } .team-api-health.checking { color: var(--tak-partial); } .team-api-key-meta { margin-top: 12px; color: var(--tak-neutral); font-size: 14px; min-height: 21px; } .team-api-key-meta code { color: var(--tak-text); background: transparent; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; } .team-api-budget { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-top: 12px; color: var(--tak-neutral); font-size: 12px; } .team-api-budget-track { height: 4px; background: var(--tak-line); overflow: hidden; } .team-api-budget-fill { display: block; height: 100%; background: var(--tak-partial); } .team-api-key-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .team-api-button { min-height: 36px; padding: 8px 16px; color: var(--tak-text); background: var(--tak-surface); border: 1px solid var(--tak-line); border-radius: 0; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: color 200ms ease, opacity 200ms ease; } .team-api-button:hover { color: var(--tak-done); } .team-api-button:disabled { color: var(--tak-neutral); opacity: .55; cursor: not-allowed; } .team-api-button.danger { color: var(--tak-todo); } .team-api-audit { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--tak-line); background: var(--tak-canvas); } .team-api-audit-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; } .team-api-audit h4 { margin: 0; color: var(--tak-text); font-size: 18px; font-weight: 600; } .team-api-audit-summary { color: var(--tak-neutral); font-size: 14px; } .team-api-usage-table { width: 100%; border-collapse: collapse; color: var(--tak-text); font-size: 14px; background: var(--tak-canvas); } .team-api-usage-table th, .team-api-usage-table td { padding: 12px 8px; border-bottom: 1px solid var(--tak-line); text-align: left; } .team-api-usage-table th { color: var(--tak-neutral); font-size: 12px; font-weight: 600; } .team-api-usage-table th:not(:first-child), .team-api-usage-table td:not(:first-child) { text-align: right; } .team-api-empty { padding: 24px 8px; color: var(--tak-neutral); text-align: center; } .team-api-modal-overlay { position: fixed; inset: 0; z-index: 13000; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(13,17,23,.88); } .team-api-modal { width: min(520px, 100%); max-height: calc(100vh - 48px); overflow: auto; padding: 24px; background: var(--tak-surface, #161b22); border: 1px solid var(--tak-line, #30363d); color: var(--tak-text, #e6edf3); } .team-api-modal h3 { margin: 0 0 24px; color: #e6edf3; font-size: 18px; font-weight: 600; } .team-api-field { margin-bottom: 16px; } .team-api-field label { display: block; margin-bottom: 8px; color: #57606a; font-size: 12px; font-weight: 600; } .team-api-field input { width: 100%; padding: 12px; color: #e6edf3; background: #0a0e14; border: 1px solid #30363d; border-radius: 0; font: inherit; font-size: 14px; outline: none; transition: border-color 200ms ease; } .team-api-field input:focus { border-color: #4a9d6e; } .team-api-modal-note { margin: -8px 0 16px; color: #57606a; font-size: 12px; line-height: 1.6; } .team-api-modal-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 16px; border-top: 1px solid #30363d; } @media (max-width: 680px) { #teamApiKeysView { padding: 16px; } .team-api-header, .team-api-audit-head { align-items: stretch; flex-direction: column; } .team-api-button { flex: 1 1 calc(50% - 8px); } .team-api-usage-table { display: table; overflow: visible; } }