/* ══════════════════════════════════════════════ AI电影制作系统 - 自定义赛博青蓝+紫+荧光绿主题
══════════════════════════════════════════════*/
:root {
/* ====== VERSION_FINGERPRINT_CSS = J2_20260819_SCROLLBAR_SHOW100PERCENT__LEFTCOL480_PX_LAYOUT__PANELBODY_MINHEIGHT0__TL_LABELS_DETACHED ======
F12 搜 "VERSION_FINGERPRINT_CSS" 看这个数字跟我说明一致 = 你跟我用的是同一个 CSS。*/
/* ===== 用户提供的主题主变量（核心） ===== */
--bg: #0A0E17;
--text: #5BC8FF;
--text-dim: #9FB3C8;
--accent: #39FF14;
--violet: #9D4EDD;
--line: #1C2536;
/* ===== 从主变量派生：原有变量名（保持兼容，现有代码大量使用这些名称） ===== */
--bg-dark: var(--bg); /* 页面主背景 */
--bg-panel: #111625; /* 面板：比 bg 稍亮（来自 --bg + 渐变） */
--bg-card: #161D30; /* 卡片：再亮一档 */
--bg-hover: #1F2840; /* hover 高亮 */
--border: var(--line); /* 边线 */
--cyan: var(--text); /* 青蓝主色 = 正文主色 #5BC8FF */
--blue: #5B8AFF; /* 按钮蓝：偏向青蓝的深蓝调 */
--gold: #FFD166; /* 金：与主题和谐但保留暖调点缀 */
--green: var(--accent); /* 绿色点缀 = 用户提供的荧光绿 #39FF14 */
--red: #ff4d6d; /* 红：错误/取消保持明显对比 */
--purple: var(--violet); /* 紫：替换为用户提供的紫色 #9D4EDD */
/* ===== 文字色三级：从用户 --text / --text-dim 派生 ===== */
--text2: var(--text-dim); /* 次级文字 */
--text3: #7A8AA0; /* 辅助/占位符文字（比 text-dim 再灰一档） */
}
* { margin: 0; padding: 0; box-sizing: border-box; }
/* 固定布局：以浏览器100%视口为基准，控件位置/大小不随浏览器尺寸变化，超出部分被边界遮挡 */
html {
overflow-x: auto;
}
body {
font-family: "Source Han Sans SC", "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
background: var(--bg);
color: var(--text);
min-height: 100vh;
overflow-y: scroll;
overflow-x: auto;
width: var(--app-base-width, 100%);
margin: 0 auto;
}
/* ===== 用户指定：.title 渐变字（青蓝#5BC8FF → 紫#9D4EDD） ===== */
.title {
font-family: "Source Han Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
background: linear-gradient(90deg, #5BC8FF, #9D4EDD);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: 0 0 18px rgba(91, 200, 255, .35);
font-weight: bold;
}
a { color: var(--cyan); text-decoration: none; }
/* 滚动�?*/
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-panel); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--cyan); }
/* ══════�?登录�?══════�?*/
.page-login {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-dark);
}
.login-card {
background: var(--bg-panel);
border: 1px solid var(--border);
border-radius: 12px;
padding: 40px 36px;
width: 380px;
}
.login-card h1 {
color: var(--cyan);
font-size: 24px;
text-align: center;
margin-bottom: 32px;
}
/* 表单 */
.field { margin-bottom: 0; display: flex; align-items: center; gap: 10px; }
.field label {
color: var(--text2);
font-size: 13px;
flex-shrink: 0;
width: 72px;
text-align: right;
}
.req { color: var(--red); font-weight: bold; }
.field input,
.field select,
.field textarea {
flex: 1;
padding: 9px 12px;
background: var(--bg-dark);
border: 1px solid var(--border);
border-radius: 6px;
color: var(--text);
font-size: 13px;
outline: none;
transition: border-color 0.2s;
font-family: inherit;
}
.field textarea { align-self: stretch; }
/* 照片等需要竖向的字段 */
.field-stack {
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
.field-stack label { width: auto; text-align: left; }
.field input:focus,
.field select:focus,
.field textarea:focus {
border-color: var(--cyan);
}
.field input::placeholder { color: var(--text3); }
.field textarea { resize: vertical; min-height: 70px; }
/* ===== 自定义输入框组件（contenteditable div，避免浏览器自动填充） ===== */
.custom-input {
flex: 1;
padding: 9px 12px;
background: var(--bg-dark);
border: 1px solid var(--border);
border-radius: 6px;
color: var(--text);
font-size: 13px;
outline: none;
transition: border-color 0.2s;
font-family: inherit;
min-height: 20px;
max-height: 40px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
line-height: 1.4;
}
.custom-input:focus {
border-color: var(--cyan);
box-shadow: 0 0 0 2px rgba(0, 200, 255, 0.15);
}
.custom-input:empty::before {
content: attr(data-placeholder);
color: var(--text3);
pointer-events: none;
}
.custom-input.readonly {
color: var(--cyan);
cursor: default;
}
/* ===== 修复：浏览器自动填充导致的白色背景 + 下拉框选项白色背景 ===== */
/* 覆盖 Chrome/Edge 自动填充的白色背景，保持与界面风格一致 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0 1000px var(--bg-dark) inset !important;
-webkit-text-fill-color: var(--text) !important;
caret-color: var(--text) !important;
transition: background-color 9999s ease-in-out 0s;
}
/* 全局下拉框选项背景色，防止白色 */
select option,
.field select option {
background: var(--bg-dark) !important;
color: var(--text) !important;
}
/* ===== 故事简介textarea统一样式 ===== */
#projSummary {
background: var(--bg-dark) !important;
color: var(--text) !important;
border: 1px solid var(--border) !important;
border-radius: 6px !important;
font-size: 13px !important;
font-family: inherit !important;
padding: 9px 12px !important;
}
#projSummary::placeholder {
color: var(--text3) !important;
}
#projSummary:focus {
border-color: var(--cyan) !important;
box-shadow: 0 0 0 2px rgba(0, 200, 255, 0.15) !important;
}
select option:checked,
.field select option:checked,
select option:hover,
.field select option:hover {
background: var(--bg-hover) !important;
color: #fff !important;
}
/* 按钮 */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 8px 18px;
border: none;
border-radius: 6px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
font-family: inherit;
}
.btn:hover { opacity: 0.88; transform: translateY(-1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn-primary {
display: block;
width: 100%;
padding: 13px;
background: linear-gradient(135deg, var(--cyan), var(--blue));
color: #fff;
font-size: 15px;
}
.btn-cyan { background: var(--cyan); color: var(--bg-dark); }
.btn-blue { background: var(--blue); color: #fff; }
.btn-green { background: var(--green); color: #fff; }
.btn-red { background: var(--red); color: #fff; }
.btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--text2); }
.btn-ghost:hover { background: var(--bg-hover); color: var(--text); }
.btn-sm { padding: 5px 12px; font-size: 12px; }
.btn-xs { padding: 3px 10px; font-size: 11px; }
/* =========================================================
皮肤切换：科幻 HUD 风格（tech-lines 按钮组件）
通过给 加 class="theme-scifi" 启用；
默认不加 class 即 "未来" 主题（当前方案）。
变量与 "未来" 主题一致（深空+冰蓝+青柠+电光紫），
但按钮、输入框、模态框等控件采用 HUD 线条切线风。
========================================================= */
/* ---------- 皮肤选择控件（顶部 header 中用户名前）---------- */
.theme-switcher {
display: inline-flex;
align-items: center;
gap: 6px;
margin-right: 12px;
}
.theme-switcher__label {
font-size: 12px;
color: var(--text-dim);
white-space: nowrap;
}
.theme-switcher__select {
padding: 5px 10px;
font-family: "Source Han Sans SC","PingFang SC","HarmonyOS Sans SC",sans-serif;
font-size: 12px;
font-weight: 500;
letter-spacing: .04em;
color: var(--text);
background: transparent;
border: 1px solid var(--text);
border-radius: var(--radius, 6px);
cursor: pointer;
outline: none;
appearance: none;
-webkit-appearance: none;
position: relative;
padding-right: 26px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 8px center;
transition: border-color .25s ease, box-shadow .25s ease, color .25s ease;
}
.theme-switcher__select:hover {
border-color: var(--accent);
color: #fff;
box-shadow:
0 0 0 1px rgba(57,255,20,.25),
0 0 14px rgba(91,200,255,.30),
inset 0 0 8px rgba(91,200,255,.12);
}
.theme-switcher__select option {
background: var(--bg);
color: var(--text);
border: 1px solid var(--line);
padding: 4px 10px;
}
/* ---------- Tech HUD Button（核心组件，用户 tech-lines.css）---------- */
.tech-btn{
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 22px;
font-family: "Source Han Sans SC","PingFang SC","HarmonyOS Sans SC",sans-serif;
font-size: 14px;
font-weight: 500;
letter-spacing: .04em;
line-height: 1;
color: var(--text);
background: transparent;
border: var(--bd-w, 1px) solid var(--text);
border-radius: var(--radius, 6px);
cursor: pointer;
user-select: none;
position: relative;
overflow: hidden;
transition:
color .25s ease,
border-color .25s ease,
box-shadow .25s ease,
background .25s ease;
}
/* 角标装饰：左上/右下短切线，强化 HUD 感 */
.tech-btn::before,
.tech-btn::after{
content:"";
position:absolute;
width:10px;height:10px;
border: var(--bd-w, 1px) solid var(--text);
opacity:.6;
transition: opacity .25s ease, border-color .25s ease;
pointer-events: none;
}
.tech-btn::before{ top:-1px; left:-1px; border-right:none; border-bottom:none; }
.tech-btn::after{ bottom:-1px; right:-1px; border-left:none; border-top:none; }
/* Hover：冰蓝发光 + 青柠微染 */
.tech-btn:hover{
color: #fff;
border-color: var(--accent);
box-shadow:
0 0 0 1px rgba(57,255,20,.25),
0 0 18px rgba(91,200,255,.35),
inset 0 0 12px rgba(91,200,255,.12);
z-index: 1;
}
.tech-btn:hover::before,
.tech-btn:hover::after{
border-color: var(--accent);
opacity:1;
}
/* Active：按下内收 */
.tech-btn:active{
transform: translateY(1px);
box-shadow:
0 0 0 1px rgba(57,255,20,.4),
inset 0 0 18px rgba(57,255,20,.18);
}
/* Disabled */
.tech-btn:disabled,
.tech-btn.is-disabled{
color: var(--text-dim);
border-color: var(--line);
cursor: not-allowed;
box-shadow:none;
}
.tech-btn:disabled::before,
.tech-btn:disabled::after{
border-color: var(--line);
opacity:.4;
}
/* 变体：紫调主按钮（强调操作） */
.tech-btn--primary{
color: #fff;
border-color: var(--violet);
background: linear-gradient(180deg, rgba(157,78,221,.18), rgba(157,78,221,.04));
box-shadow: 0 0 14px rgba(157,78,221,.25);
}
.tech-btn--primary:hover{
border-color: var(--accent);
box-shadow:
0 0 0 1px rgba(57,255,20,.3),
0 0 22px rgba(157,78,221,.45);
}
/* 变体：纯青柠高亮（告警/运行） */
.tech-btn--accent{
color: var(--accent);
border-color: var(--accent);
}
.tech-btn--accent:hover{
color:#0A0E17;
background:var(--accent);
box-shadow:0 0 22px rgba(57,255,20,.5);
}
/* 尺寸 */
.tech-btn--sm{ padding:6px 14px; font-size:12px; }
.tech-btn--lg{ padding:14px 30px; font-size:16px; }
.tech-btn svg{ width:16px; height:16px; fill:currentColor; }
/* 加载态（纯 CSS 旋转环） */
.tech-btn.is-loading{ color:transparent !important; pointer-events:none; }
.tech-btn.is-loading::after{
content:"";
position:absolute;
width:14px;height:14px;
border:2px solid rgba(91,200,255,.25);
border-top-color:var(--text);
border-radius:50%;
animation:tech-spin .7s linear infinite;
opacity:1;
bottom:auto;right:auto;top:50%;left:50%;
transform:translate(-50%, -50%);
border-left:2px solid rgba(91,200,255,.25);
border-bottom:2px solid rgba(91,200,255,.25);
}
@keyframes tech-spin {
to { transform: translate(-50%, -50%) rotate(360deg); }
}
/* =========================================================
「科幻」主题：启用 HUD 风格覆盖原生 .btn / input / modal 等
选择器前缀：body.theme-scifi → 仅科幻模式生效
========================================================= */
body.theme-scifi .btn {
/* 原生按钮整体替换为 tech-btn 基线风格 */
border: 1px solid var(--text);
border-radius: var(--radius, 6px);
background: transparent;
color: var(--text);
font-family: "Source Han Sans SC","PingFang SC","HarmonyOS Sans SC",sans-serif;
font-weight: 500;
letter-spacing: .02em;
box-shadow: none;
position: relative;
overflow: hidden;
transition: color .25s ease, border-color .25s ease, box-shadow .25s ease, background .25s ease, transform .15s ease;
}
body.theme-scifi .btn::before,
body.theme-scifi .btn::after {
content:"";
position:absolute;
width:10px;height:10px;
border:1px solid var(--text);
opacity:.6;
transition:opacity .25s ease, border-color .25s ease;
pointer-events:none;
}
body.theme-scifi .btn::before{ top:-1px; left:-1px; border-right:none; border-bottom:none; }
body.theme-scifi .btn::after{ bottom:-1px; right:-1px; border-left:none; border-top:none; }
body.theme-scifi .btn:hover {
color: #fff;
border-color: var(--accent);
box-shadow:
0 0 0 1px rgba(57,255,20,.25),
0 0 16px rgba(91,200,255,.32),
inset 0 0 10px rgba(91,200,255,.10);
opacity: 1;
transform: none;
}
body.theme-scifi .btn:hover::before,
body.theme-scifi .btn:hover::after { border-color: var(--accent); opacity: 1; }
body.theme-scifi .btn:active {
transform: translateY(1px);
box-shadow:
0 0 0 1px rgba(57,255,20,.35),
inset 0 0 16px rgba(57,255,20,.15);
}
/* 科幻主题：btn-primary → 紫调 tech-btn--primary */
body.theme-scifi .btn-primary {
color: #fff;
border-color: var(--violet);
background: linear-gradient(180deg, rgba(157,78,221,.20), rgba(157,78,221,.04));
box-shadow: 0 0 14px rgba(157,78,221,.25);
}
body.theme-scifi .btn-primary:hover {
border-color: var(--accent);
box-shadow:
0 0 0 1px rgba(57,255,20,.28),
0 0 22px rgba(157,78,221,.45);
}
/* 科幻主题：btn-green / btn-cyan → 青柠 accent 风 */
body.theme-scifi .btn-green,
body.theme-scifi .btn-cyan {
color: var(--accent);
border-color: var(--accent);
}
body.theme-scifi .btn-green:hover,
body.theme-scifi .btn-cyan:hover {
color:#0A0E17;
background: var(--accent);
box-shadow: 0 0 20px rgba(57,255,20,.5);
}
/* 科幻主题：btn-red → 保持警示红，但加发光 */
body.theme-scifi .btn-red {
color: var(--red);
border-color: var(--red);
}
body.theme-scifi .btn-red:hover {
background: var(--red);
color: #fff;
box-shadow: 0 0 18px rgba(255,77,109,.45);
}
/* 科幻主题：尺寸变体 btn-sm / btn-xs */
body.theme-scifi .btn-sm { padding: 6px 14px; font-size: 12px; }
body.theme-scifi .btn-xs { padding: 3px 10px; font-size: 11px; }
/* 科幻主题：btn-ghost 透明 + HUD 边框 */
body.theme-scifi .btn-ghost {
background: transparent !important;
border: 1px solid var(--border) !important;
color: var(--text-dim) !important;
}
body.theme-scifi .btn-ghost:hover {
background: rgba(0, 255, 170, 0.08) !important;
border-color: var(--accent) !important;
color: var(--accent) !important;
}
/* 项目卡底部按钮行：紧凑对齐、间距统一 */
.project-card-foot .act-btns {
display: flex;
gap: 6px;
flex-shrink: 0;
}
.project-card-foot .act-btns .btn {
border-radius: 4px;
font-weight: 500;
letter-spacing: 0.3px;
}
.project-card-foot .act-btns .btn-ghost {
background: transparent;
border: 1px solid var(--border);
color: var(--text2);
}
.project-card-foot .act-btns .btn-ghost:hover {
background: var(--bg-hover);
border-color: var(--accent);
color: var(--accent);
}
.project-card-foot .act-btns .btn-red {
background: transparent !important;
border: 1px solid var(--red);
color: var(--red) !important;
}
.project-card-foot .act-btns .btn-red:hover {
background: var(--red) !important;
color: #fff !important;
}
/* 科幻主题：禁用态（统一 HUD 灰线） */
body.theme-scifi .btn:disabled {
color: var(--text-dim);
border-color: var(--line);
background: transparent;
box-shadow: none;
opacity: .75;
}
body.theme-scifi .btn:disabled::before,
body.theme-scifi .btn:disabled::after {
border-color: var(--line);
opacity: .4;
}
/* 科幻主题：输入框 HUD 风 */
body.theme-scifi input[type="text"],
body.theme-scifi input[type="number"],
body.theme-scifi input[type="password"],
body.theme-scifi textarea,
body.theme-scifi select:not(.theme-switcher__select),
body.theme-scifi .field input,
body.theme-scifi .field textarea,
body.theme-scifi .field select {
background: transparent !important;
border: 1px solid var(--text) !important;
border-radius: var(--radius, 6px) !important;
color: var(--text) !important;
padding: 8px 12px !important;
font-family: "Source Han Sans SC","PingFang SC","HarmonyOS Sans SC",sans-serif;
transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
position: relative;
}
body.theme-scifi input[type="text"]:focus,
body.theme-scifi input[type="number"]:focus,
body.theme-scifi input[type="password"]:focus,
body.theme-scifi textarea:focus,
body.theme-scifi select:not(.theme-switcher__select):focus,
body.theme-scifi .field input:focus,
body.theme-scifi .field textarea:focus,
body.theme-scifi .field select:focus {
outline: none;
border-color: var(--accent) !important;
box-shadow:
0 0 0 1px rgba(57,255,20,.25),
0 0 14px rgba(91,200,255,.28),
inset 0 0 10px rgba(91,200,255,.08);
}
/* 科幻主题：模态框/面板 HUD 风外框 */
body.theme-scifi .modal,
body.theme-scifi .ws-llm-output-panel,
body.theme-scifi .ws-loading-info-block,
body.theme-scifi .ws-team-progress-content,
body.theme-scifi .panel,
body.theme-scifi .admin-area,
body.theme-scifi .ws-scene-list-panel,
body.theme-scifi .ws-character-list,
body.theme-scifi .ws-locations-panel,
body.theme-scifi .ws-costumes-panel,
body.theme-scifi .ws-props-panel,
body.theme-scifi .story-info-card,
body.theme-scifi .panel-script-area {
position: relative;
}
body.theme-scifi .modal::before,
body.theme-scifi .ws-llm-output-panel::before,
body.theme-scifi .ws-loading-info-block::before,
body.theme-scifi .ws-team-progress-content::before,
body.theme-scifi .panel::before,
body.theme-scifi .admin-area::before,
body.theme-scifi .modal::after,
body.theme-scifi .ws-llm-output-panel::after,
body.theme-scifi .ws-loading-info-block::after,
body.theme-scifi .ws-team-progress-content::after,
body.theme-scifi .panel::after,
body.theme-scifi .admin-area::after {
content:"";
position:absolute;
width: 18px; height: 18px;
border: 2px solid var(--text);
opacity: .7;
pointer-events: none;
transition: opacity .25s ease, border-color .25s ease;
z-index: 2;
}
body.theme-scifi .modal::before,
body.theme-scifi .ws-llm-output-panel::before,
body.theme-scifi .ws-loading-info-block::before,
body.theme-scifi .ws-team-progress-content::before,
body.theme-scifi .panel::before,
body.theme-scifi .admin-area::before {
top: 2px; left: 2px;
border-right: none; border-bottom: none;
}
body.theme-scifi .modal::after,
body.theme-scifi .ws-llm-output-panel::after,
body.theme-scifi .ws-loading-info-block::after,
body.theme-scifi .ws-team-progress-content::after,
body.theme-scifi .panel::after,
body.theme-scifi .admin-area::after {
bottom: 2px; right: 2px;
border-left: none; border-top: none;
}
body.theme-scifi .modal:hover::before,
body.theme-scifi .ws-llm-output-panel:hover::before,
body.theme-scifi .ws-loading-info-block:hover::before,
body.theme-scifi .ws-team-progress-content:hover::before,
body.theme-scifi .panel:hover::before,
body.theme-scifi .admin-area:hover::before,
body.theme-scifi .modal:hover::after,
body.theme-scifi .ws-llm-output-panel:hover::after,
body.theme-scifi .ws-loading-info-block:hover::after,
body.theme-scifi .ws-team-progress-content:hover::after,
body.theme-scifi .panel:hover::after,
body.theme-scifi .admin-area:hover::after {
border-color: var(--accent);
opacity: 1;
}
/* =========================================================
「科幻」主题增强：背景+HUD扫描线+更强角标发光
（之前的基础规则已经有，这里做差异化增强）
========================================================= */
body.theme-scifi {
/* 深空底 + 超淡网格 + 左上青柠极光 + 右下紫色星云 */
background:
linear-gradient(135deg, rgba(91,200,255,.05), transparent 50%),
radial-gradient(800px 600px at 85% 20%, rgba(157,78,221,.12), transparent 60%),
radial-gradient(900px 700px at 15% 85%, rgba(57,255,20,.07), transparent 60%),
repeating-linear-gradient(0deg, rgba(91,200,255,.025) 0 1px, transparent 1px 4px),
repeating-linear-gradient(90deg, rgba(91,200,255,.02) 0 1px, transparent 1px 4px),
var(--bg);
}
/* 科幻主题：按钮角标更醒目（14px）+ 细发光边框 */
body.theme-scifi .btn::before,
body.theme-scifi .btn::after {
width: 14px; height: 14px;
border-width: 2px;
opacity: .85;
}
body.theme-scifi .btn {
box-shadow: 0 0 8px rgba(91,200,255,.12);
}
/* =========================================================
「烂漫」主题 —— 粉紫星云宇宙 + 玻璃卡片 + 玫瑰衬线
配色：#0B0C1A(深紫夜空) / #E8E8F0(月光) / #FF6B9D(玫瑰)
/ #7B61FF(星云紫) / #00F5D4(极光青)
========================================================= */
body.theme-romance {
/* 宇宙双径向渐变：星云紫(60%右上) + 玫瑰粉(70%左下) + 极淡极光青点缀 */
background:
radial-gradient(1200px 900px at 65% 25%, rgba(123,97,255,.32), transparent 60%),
radial-gradient(1000px 700px at 25% 80%, rgba(255,107,157,.22), transparent 62%),
radial-gradient(600px 400px at 90% 95%, rgba(0,245,212,.08), transparent 65%),
/* 点缀星光（用多重径向渐变模拟稀疏星星）*/
radial-gradient(1.2px 1.2px at 12% 18%, rgba(232,232,240,.55), transparent 60%),
radial-gradient(1.2px 1.2px at 38% 42%, rgba(232,232,240,.45), transparent 60%),
radial-gradient(1.5px 1.5px at 68% 12%, rgba(232,232,240,.55), transparent 60%),
radial-gradient(1px 1px at 82% 58%, rgba(255,107,157,.55), transparent 60%),
radial-gradient(1.2px 1.2px at 54% 75%, rgba(123,97,255,.55), transparent 60%),
radial-gradient(1px 1px at 22% 65%, rgba(232,232,240,.35), transparent 60%),
radial-gradient(1.2px 1.2px at 92% 35%, rgba(0,245,212,.45), transparent 60%),
#0B0C1A;
color: #E8E8F0;
font-family: Georgia, "Times New Roman", "Playfair Display","Noto Serif SC","PingFang SC","HarmonyOS Sans SC",serif;
}
/* 烂漫主题：覆盖通用变量到主题变量 */
html[data-theme="romance"],
body.theme-romance {
--romance-bg: #0B0C1A;
--romance-moon: #E8E8F0;
--romance-rose: #FF6B9D;
--romance-nebula: #7B61FF;
--romance-aurora: #00F5D4;
--romance-glass: rgba(255,107,157,.07);
--romance-glass-2: rgba(123,97,255,.08);
}
/* 烂漫主题：标题渐变字（月光 → 玫瑰）*/
body.theme-romance .title,
body.theme-romance h1, body.theme-romance h2, body.theme-romance h3,
body.theme-romance .story-info h3,
body.theme-romance .panel-head .section-title,
body.theme-romance .logo,
body.theme-romance .nav-link,
body.theme-romance .user-info .name {
background: linear-gradient(135deg, #E8E8F0 0%, #FF6B9D 60%, #7B61FF 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
body.theme-romance .logo { font-weight: 600; letter-spacing: .02em; font-size: 20px; }
/* 烂漫主题：整体 App 容器 玻璃卡片 */
body.theme-romance .app-header,
body.theme-romance .panel,
body.theme-romance .ws-llm-output-panel,
body.theme-romance .ws-loading-info-block,
body.theme-romance .ws-team-progress-content,
body.theme-romance .ws-scene-list-panel,
body.theme-romance .ws-character-list,
body.theme-romance .ws-locations-panel,
body.theme-romance .ws-costumes-panel,
body.theme-romance .ws-props-panel,
body.theme-romance .story-info-card,
body.theme-romance .panel-script-area,
body.theme-romance .admin-area,
body.theme-romance .modal,
body.theme-romance .login-card,
body.theme-romance .project-card,
body.theme-romance .card,
body.theme-romance .user-bubble,
body.theme-romance .toast {
background:
linear-gradient(180deg, rgba(255,107,157,.07), rgba(123,97,255,.05)),
rgba(11,12,26,.55);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid rgba(255,107,157,.22);
box-shadow:
0 0 40px rgba(123,97,255,.15),
inset 0 0 30px rgba(255,107,157,.04);
border-radius: 18px;
position: relative;
overflow: hidden;
}
/* 玻璃卡片顶部霓虹条（玫瑰→星云紫渐变）*/
body.theme-romance .panel::before,
body.theme-romance .ws-llm-output-panel::before,
body.theme-romance .ws-scene-list-panel::before,
body.theme-romance .ws-character-list::before,
body.theme-romance .ws-locations-panel::before,
body.theme-romance .ws-costumes-panel::before,
body.theme-romance .ws-props-panel::before,
body.theme-romance .admin-area::before,
body.theme-romance .login-card::before,
body.theme-romance .project-card::before,
body.theme-romance .modal::before {
content:"";
position:absolute;
top:0; left:50%;
transform: translateX(-50%);
width: 80%;
height: 2px;
background: linear-gradient(90deg, transparent, var(--romance-rose), var(--romance-nebula), transparent);
border-radius: 2px;
z-index: 2;
pointer-events: none;
opacity: .9;
}
/* 卡片右下角霓虹小光点 */
body.theme-romance .panel::after,
body.theme-romance .ws-llm-output-panel::after,
body.theme-romance .ws-scene-list-panel::after,
body.theme-romance .ws-character-list::after,
body.theme-romance .ws-locations-panel::after,
body.theme-romance .ws-costumes-panel::after,
body.theme-romance .ws-props-panel::after,
body.theme-romance .login-card::after,
body.theme-romance .project-card::after,
body.theme-romance .modal::after {
content:"";
position:absolute;
right: 14px; bottom: 10px;
width: 6px; height: 6px;
background: radial-gradient(circle, var(--romance-aurora), transparent 70%);
border-radius: 50%;
box-shadow: 0 0 12px var(--romance-aurora);
pointer-events: none;
z-index: 2;
opacity: .7;
}
/* 烂漫主题：输入框 玻璃玫瑰风 */
body.theme-romance input[type="text"],
body.theme-romance input[type="number"],
body.theme-romance input[type="password"],
body.theme-romance textarea,
body.theme-romance select:not(.theme-switcher__select),
body.theme-romance .field input,
body.theme-romance .field textarea,
body.theme-romance .field select {
background: rgba(255,107,157,.05) !important;
border: 1px solid rgba(255,107,157,.28) !important;
border-radius: 10px !important;
color: #E8E8F0 !important;
padding: 8px 12px !important;
font-family: -apple-system, "Segoe UI", "Microsoft YaHei", "Inter","Noto Serif SC","PingFang SC",sans-serif;
letter-spacing: .02em;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
transition: border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
body.theme-romance input[type="text"]:focus,
body.theme-romance input[type="number"]:focus,
body.theme-romance input[type="password"]:focus,
body.theme-romance textarea:focus,
body.theme-romance select:not(.theme-switcher__select):focus,
body.theme-romance .field input:focus,
body.theme-romance .field textarea:focus,
body.theme-romance .field select:focus {
outline: none !important;
border-color: var(--romance-rose) !important;
background: rgba(255,107,157,.09) !important;
box-shadow:
0 0 0 1px rgba(255,107,157,.2),
0 0 18px rgba(255,107,157,.25),
inset 0 0 14px rgba(123,97,255,.08);
color: #fff !important;
}
/* 烂漫主题：按钮 —— 玫瑰线条风（hover 反色粉玫瑰实心） */
body.theme-romance .btn {
background: transparent;
color: var(--romance-rose);
border: 1px solid var(--romance-rose);
border-radius: 10px;
font-family: -apple-system, "Segoe UI", "Microsoft YaHei", "Inter","Noto Serif SC",sans-serif;
font-weight: 500;
letter-spacing: .1em;
text-transform: none;
padding: 8px 20px;
position: relative;
overflow: hidden;
transition: color .3s ease, border-color .3s ease, background .3s ease, box-shadow .3s ease, transform .2s ease;
box-shadow: 0 0 0 rgba(255,107,157,0);
}
body.theme-romance .btn::after {
content:"";
position:absolute;
inset:0;
border-radius: inherit;
pointer-events: none;
box-shadow: 0 0 20px rgba(255,107,157,.28);
opacity: 0;
transition: opacity .3s ease;
}
body.theme-romance .btn:hover {
color: #0B0C1A;
background: linear-gradient(135deg, var(--romance-rose), rgba(123,97,255,.85));
border-color: transparent;
color: #fff;
box-shadow: 0 0 26px rgba(255,107,157,.35);
}
body.theme-romance .btn:hover::after { opacity: 1; }
body.theme-romance .btn:active { transform: translateY(1px); }
/* 烂漫主题：按钮变体（primary 星云紫，green 极光青，red 玫瑰红发光）*/
body.theme-romance .btn-primary,
body.theme-romance .btn-gen {
color: #fff !important;
background: linear-gradient(135deg, rgba(123,97,255,.25), rgba(255,107,157,.18)) !important;
border: 1px solid rgba(123,97,255,.5) !important;
box-shadow: 0 0 20px rgba(123,97,255,.25) !important;
}
body.theme-romance .btn-primary:hover,
body.theme-romance .btn-gen:hover {
background: linear-gradient(135deg, var(--romance-nebula), var(--romance-rose)) !important;
color: #fff !important;
border-color: transparent !important;
box-shadow: 0 0 30px rgba(123,97,255,.55), 0 0 22px rgba(255,107,157,.4) !important;
}
body.theme-romance .btn-green,
body.theme-romance .btn-cyan {
color: var(--romance-aurora) !important;
border-color: var(--romance-aurora) !important;
}
body.theme-romance .btn-green:hover,
body.theme-romance .btn-cyan:hover {
background: var(--romance-aurora) !important;
color: #0B0C1A !important;
border-color: var(--romance-aurora) !important;
box-shadow: 0 0 24px rgba(0,245,212,.5) !important;
}
body.theme-romance .btn-red {
color: #FF8FAE !important;
border-color: rgba(255,107,157,.7) !important;
}
body.theme-romance .btn-red:hover {
background: linear-gradient(135deg, #FF3D6F, #FF6B9D) !important;
color: #fff !important;
box-shadow: 0 0 26px rgba(255,61,111,.55) !important;
}
body.theme-romance .btn-sm { padding: 5px 14px; font-size: 12px; letter-spacing: .06em; }
body.theme-romance .btn-xs { padding: 3px 10px; font-size: 11px; }
/* 烂漫主题：nav-link 玫瑰发光下划线 */
body.theme-romance .app-header .nav-link {
font-family: Georgia, "Times New Roman", "Playfair Display","Noto Serif SC",serif;
font-weight: 500;
background: none !important;
-webkit-text-fill-color: rgba(232,232,240,.75) !important;
color: rgba(232,232,240,.75) !important;
padding: 8px 16px;
position: relative;
transition: all .25s ease;
}
body.theme-romance .app-header .nav-link:hover,
body.theme-romance .app-header .nav-link.active {
-webkit-text-fill-color: var(--romance-rose) !important;
color: var(--romance-rose) !important;
}
body.theme-romance .app-header .nav-link.active::after {
content:"";
position:absolute;
left:14%; right:14%; bottom:2px;
height:2px;
background: linear-gradient(90deg, transparent, var(--romance-rose), var(--romance-nebula), transparent);
box-shadow: 0 0 14px rgba(255,107,157,.5);
}
/* 烂漫主题：文本/标签 */
body.theme-romance .role-tag,
body.theme-romance .text3,
body.theme-romance .text-dim,
body.theme-romance label { color: rgba(232,232,240,.6) !important; }
body.theme-romance .cyan,
body.theme-romance .text-cyan,
body.theme-romance .text2 { color: var(--romance-aurora) !important; }
/* 烂漫主题：皮肤选择框也要玫瑰风（覆盖默认）*/
body.theme-romance .theme-switcher__label {
color: rgba(232,232,240,.85) !important;
font-family: Georgia, "Times New Roman", "Playfair Display","Noto Serif SC",serif !important;
letter-spacing: .04em;
}
body.theme-romance .theme-switcher__select {
background: rgba(255,107,157,.08) !important;
border: 1px solid rgba(255,107,157,.35) !important;
color: #E8E8F0 !important;
border-radius: 10px !important;
font-family: -apple-system, "Segoe UI", "Microsoft YaHei", "Inter","Noto Serif SC",sans-serif !important;
}
body.theme-romance .theme-switcher__select:focus {
border-color: var(--romance-rose) !important;
box-shadow: 0 0 14px rgba(255,107,157,.35) !important;
color: #fff !important;
}
body.theme-romance .theme-switcher__select option {
background: #14122E !important;
color: #E8E8F0 !important;
}
/* 烂漫主题：header 边界改为玫瑰细渐变发光 */
body.theme-romance .app-header {
border-bottom: none !important;
box-shadow:
0 1px 0 rgba(255,107,157,.3),
0 10px 30px rgba(123,97,255,.08);
border-radius: 0 0 18px 18px;
}
/* 烂漫主题：登录页 logo 大标题更强发光 */
body.theme-romance .page-login .login-card h1 {
font-size: 32px !important;
text-shadow: 0 0 30px rgba(255,107,157,.35);
}
/* 烂漫主题：徽章/数字标签 玫瑰 */
body.theme-romance .badge,
body.theme-romance .status-tag,
body.theme-romance .status-flag {
background: rgba(255,107,157,.12) !important;
color: var(--romance-rose) !important;
border: 1px solid rgba(255,107,157,.35) !important;
font-family: Consolas, "Courier New", monospace,"Inter",monospace !important;
}
/* 烂漫主题：toast 玻璃玫瑰 */
body.theme-romance .toast.info {
background: linear-gradient(135deg, rgba(255,107,157,.14), rgba(123,97,255,.1)) !important;
border: 1px solid rgba(255,107,157,.3) !important;
color: #E8E8F0 !important;
backdrop-filter: blur(14px);
}
/* =========================================================
「专业」主题 —— 电影胶片 · 星云宇宙 · 镜头光晕
配色：#05060A(胶片黑) / #E8E8F0(月光白) / #1A0A2E(星云紫)
/ #0A1428(星云蓝) / rgba(255,100,180,.6)(粉光晕)
字体：Bebas Neue(标题) / Space Mono(等宽) / Inter(正文)
特效：胶片颗粒动画 + 扫描线 + 镜头光晕
========================================================= */
body.theme-professional {
/* 胶片黑底 + 双星云渐变 + 中心微弱光晕 */
background-color: #05060A;
background-image:
radial-gradient(ellipse 80% 60% at 20% 50%, rgba(26,10,46,.85), transparent 70%),
radial-gradient(ellipse 70% 50% at 80% 40%, rgba(10,20,40,.85), transparent 60%),
radial-gradient(circle 50% at 50% 50%, rgba(20,20,40,.8), #05060A 100%);
color: #E8E8F0;
font-family: -apple-system, "Segoe UI", "Microsoft YaHei", 'Inter', 'Helvetica Neue', 'PingFang SC', 'HarmonyOS Sans SC', sans-serif;
}
/* 专业主题：胶片颗粒（叠加在整个页面上）*/
body.theme-professional::before {
content:"";
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
pointer-events: none;
z-index: 9999;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
opacity: 0.04;
animation: professional-grain 8s steps(10) infinite;
}
@keyframes professional-grain {
0%, 100% { transform: translate(0, 0); }
10% { transform: translate(-5%, -5%); }
20% { transform: translate(-10%, 5%); }
30% { transform: translate(5%, -10%); }
40% { transform: translate(-5%, 15%); }
50% { transform: translate(-10%, 5%); }
60% { transform: translate(15%, 0); }
70% { transform: translate(0, 10%); }
80% { transform: translate(-15%, 0); }
90% { transform: translate(10%, 5%); }
}
/* 专业主题：镜头光晕 */
body.theme-professional::after {
content:"";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 9998;
background:
radial-gradient(circle 6% at 12% 18%, rgba(235,235,255,.35), transparent 50%),
radial-gradient(circle 12% at 28% 28%, rgba(255,100,180,.25), transparent 60%),
radial-gradient(circle 10% at 65% 55%, rgba(80,120,255,.2), transparent 55%),
radial-gradient(circle 8% at 88% 75%, rgba(255,255,255,.12), transparent 50%);
mix-blend-mode: overlay;
opacity: 0.65;
}
/* 专业主题：标题 Bebas Neue 大字风格（电影片尾字幕感）*/
body.theme-professional .logo {
font-family: Impact, "Arial Black", sans-serif, 'Anton', 'Inter', sans-serif;
font-weight: 400;
font-size: 28px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #E8E8F0;
text-shadow: 0 0 60px rgba(232,232,240,.2);
background: none !important;
-webkit-text-fill-color: #E8E8F0 !important;
}
body.theme-professional .logo i {
color: #E8E8F0;
text-shadow: 0 0 30px rgba(255,255,255,.3);
}
body.theme-professional h1,
body.theme-professional h2,
body.theme-professional h3 {
font-family: Impact, "Arial Black", sans-serif, 'Anton', 'Inter', sans-serif;
font-weight: 400;
letter-spacing: 0.08em;
text-transform: uppercase;
line-height: 1;
color: #E8E8F0;
background: none !important;
-webkit-text-fill-color: #E8E8F0 !important;
}
body.theme-professional h1 { font-size: 42px; text-shadow: 0 0 80px rgba(255,255,255,.2); }
body.theme-professional h2 { font-size: 32px; text-shadow: 0 0 60px rgba(255,255,255,.15); }
body.theme-professional h3 { font-size: 22px; }
/* 专业主题：标题渐变字（白→银灰）*/
body.theme-professional .title,
body.theme-professional .story-info h3,
body.theme-professional .panel-head .section-title {
font-family: Impact, "Arial Black", sans-serif, 'Anton', 'Inter', sans-serif;
letter-spacing: 0.08em;
text-transform: uppercase;
background: linear-gradient(180deg, #FFFFFF 20%, #A0A0CC 80%) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
text-shadow: 0 0 120px rgba(180,180,255,.3) !important;
}
/* 专业主题：导航栏 Space Mono 等宽字 */
body.theme-professional .app-header .nav-link {
font-family: Consolas, "Courier New", monospace !important;
font-size: 13px !important;
letter-spacing: 0.2em !important;
text-transform: uppercase;
color: rgba(232,232,240,.6) !important;
background: none !important;
-webkit-text-fill-color: rgba(232,232,240,.6) !important;
padding: 8px 16px;
position: relative;
}
body.theme-professional .app-header .nav-link:hover,
body.theme-professional .app-header .nav-link.active {
color: #E8E8F0 !important;
-webkit-text-fill-color: #E8E8F0 !important;
}
body.theme-professional .app-header .nav-link.active::after {
content:"";
position:absolute;
left:10%; right:10%; bottom:2px;
height:1px;
background: linear-gradient(90deg, transparent, rgba(255,100,180,.6), transparent);
animation: professional-scan 4s linear infinite;
}
@keyframes professional-scan {
0% { opacity: 0.3; }
50% { opacity: 1; }
100% { opacity: 0.3; }
}
/* 专业主题：Header 胶片黑 + 扫描线 */
body.theme-professional .app-header {
background: rgba(5,6,10,.85) !important;
border-bottom: 1px solid rgba(255,255,255,.08) !important;
box-shadow: 0 1px 0 rgba(255,100,180,.2), 0 0 40px rgba(0,0,0,.5);
position: relative;
overflow: hidden;
}
/* Header 扫描线 */
body.theme-professional .app-header::after {
content:"";
position:absolute;
top:0; left:-100%;
width:100%; height:1px;
background: linear-gradient(90deg, transparent, rgba(80,120,255,.7), transparent);
animation: professional-header-scan 4s linear infinite;
pointer-events: none;
}
@keyframes professional-header-scan {
0% { left: -100%; }
100% { left: 100%; }
}
/* 专业主题：所有面板/卡片 胶片黑 + 细边框 */
body.theme-professional .panel,
body.theme-professional .ws-llm-output-panel,
body.theme-professional .ws-loading-info-block,
body.theme-professional .ws-team-progress-content,
body.theme-professional .ws-scene-list-panel,
body.theme-professional .ws-character-list,
body.theme-professional .ws-locations-panel,
body.theme-professional .ws-costumes-panel,
body.theme-professional .ws-props-panel,
body.theme-professional .story-info-card,
body.theme-professional .panel-script-area,
body.theme-professional .admin-area,
body.theme-professional .login-card,
body.theme-professional .project-card,
body.theme-professional .card {
background: rgba(10,10,18,.82) !important;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,.12) !important;
box-shadow:
0 0 60px rgba(0,0,0,.6),
inset 0 0 40px rgba(0,0,0,.4);
border-radius: 4px;
position: relative;
}
/* 专业主题：卡片顶部极细扫描线 */
body.theme-professional .panel::before,
body.theme-professional .ws-llm-output-panel::before,
body.theme-professional .login-card::before,
body.theme-professional .project-card::before {
content:"";
position:absolute;
top:0; left:0; right:0;
height:1px;
background: linear-gradient(90deg, transparent, rgba(80,120,255,.35), rgba(255,100,180,.35), transparent);
animation: professional-scan 5s linear infinite;
pointer-events: none;
}
/* 专业主题：输入框 胶片风 */
body.theme-professional input[type="text"],
body.theme-professional input[type="number"],
body.theme-professional input[type="password"],
body.theme-professional textarea,
body.theme-professional select:not(.theme-switcher__select),
body.theme-professional .field input,
body.theme-professional .field textarea,
body.theme-professional .field select {
background: rgba(5,6,10,.9) !important;
border: 1px solid rgba(255,255,255,.15) !important;
border-radius: 2px !important;
color: #E8E8F0 !important;
font-family: Consolas, "Courier New", monospace !important;
letter-spacing: 0.02em;
transition: border-color .3s ease, box-shadow .3s ease;
}
body.theme-professional input[type="text"]:focus,
body.theme-professional input[type="number"]:focus,
body.theme-professional input[type="password"]:focus,
body.theme-professional textarea:focus,
body.theme-professional select:not(.theme-switcher__select):focus {
outline: none !important;
border-color: rgba(255,255,255,.4) !important;
box-shadow: 0 0 0 1px rgba(255,255,255,.2), 0 0 30px rgba(255,100,180,.15);
color: #fff !important;
}
/* 专业主题：按钮 胶片白 + 极细边框 */
body.theme-professional .btn {
background: transparent;
color: #E8E8F0;
border: 1px solid rgba(255,255,255,.3);
border-radius: 2px;
font-family: -apple-system, "Segoe UI", "Microsoft YaHei", 'Inter', 'PingFang SC', sans-serif;
font-weight: 400;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 8px 20px;
position: relative;
overflow: hidden;
transition: all .3s ease;
}
body.theme-professional .btn:hover {
background: rgba(255,255,255,.08);
border-color: rgba(255,255,255,.6);
color: #fff;
box-shadow: 0 0 20px rgba(255,100,180,.2);
}
body.theme-professional .btn:active {
transform: translateY(1px);
box-shadow: 0 0 40px rgba(80,120,255,.3);
}
/* 专业主题：按钮变体 */
body.theme-professional .btn-primary,
body.theme-professional .btn-gen {
color: #fff !important;
background: linear-gradient(180deg, rgba(80,120,255,.2), rgba(255,100,180,.1)) !important;
border: 1px solid rgba(255,255,255,.35) !important;
letter-spacing: 0.1em;
}
body.theme-professional .btn-primary:hover,
body.theme-professional .btn-gen:hover {
background: linear-gradient(180deg, rgba(80,120,255,.4), rgba(255,100,180,.25)) !important;
color: #fff !important;
box-shadow: 0 0 30px rgba(80,120,255,.35) !important;
}
body.theme-professional .btn-green,
body.theme-professional .btn-cyan {
color: #E8E8F0 !important;
border-color: rgba(255,255,255,.4) !important;
}
body.theme-professional .btn-green:hover,
body.theme-professional .btn-cyan:hover {
background: rgba(255,255,255,.1) !important;
color: #fff !important;
box-shadow: 0 0 25px rgba(255,100,180,.25) !important;
}
body.theme-professional .btn-red {
color: rgba(255,200,210,.85) !important;
border-color: rgba(255,100,180,.5) !important;
}
body.theme-professional .btn-red:hover {
background: rgba(255,100,180,.2) !important;
color: #fff !important;
box-shadow: 0 0 25px rgba(255,100,180,.35) !important;
}
body.theme-professional .btn-sm { padding: 5px 14px; font-size: 12px; letter-spacing: 0.06em; }
body.theme-professional .btn-xs { padding: 3px 10px; font-size: 11px; }
/* 专业主题：退出按钮 */
body.theme-professional .btn-logout {
color: rgba(232,232,240,.6);
border: 1px solid rgba(255,255,255,.2);
border-radius: 2px;
background: transparent;
transition: all .3s ease;
}
body.theme-professional .btn-logout:hover {
color: #fff;
border-color: rgba(255,100,180,.5);
box-shadow: 0 0 15px rgba(255,100,180,.3);
}
/* 专业主题：文字/标签 Space Mono */
body.theme-professional .role-tag,
body.theme-professional .text3,
body.theme-professional .text-dim,
body.theme-professional label,
body.theme-professional .ws-section-bar-title,
body.theme-professional .ws-section-title,
body.theme-professional .ws-team-title,
body.theme-professional .ws-tool-label,
body.theme-professional .ws-genre-analysis-label {
font-family: Consolas, "Courier New", monospace !important;
letter-spacing: 0.05em;
}
body.theme-professional .text3,
body.theme-professional .text-dim,
body.theme-professional label {
color: rgba(232,232,240,.5) !important;
}
body.theme-professional .cyan,
body.theme-professional .text-cyan,
body.theme-professional .text2 {
color: rgba(80,120,255,.85) !important;
}
body.theme-professional .gold,
body.theme-professional .text-gold {
color: rgba(255,100,180,.85) !important;
}
/* 专业主题：皮肤选择框 胶片风 */
body.theme-professional .theme-switcher__label {
font-family: Consolas, "Courier New", monospace !important;
font-size: 13px;
letter-spacing: 0.15em;
color: rgba(232,232,240,.55) !important;
text-transform: uppercase;
}
body.theme-professional .theme-switcher__select {
background: rgba(5,6,10,.9) !important;
border: 1px solid rgba(255,255,255,.25) !important;
color: #E8E8F0 !important;
border-radius: 2px !important;
font-family: Consolas, "Courier New", monospace !important;
letter-spacing: 0.08em;
}
body.theme-professional .theme-switcher__select:focus {
border-color: rgba(255,255,255,.5) !important;
box-shadow: 0 0 20px rgba(255,100,180,.2);
}
body.theme-professional .theme-switcher__select option {
background: #05060A !important;
color: #E8E8F0 !important;
}
/* 专业主题：徽章/标签 极细边框 */
body.theme-professional .badge,
body.theme-professional .status-tag,
body.theme-professional .status-flag {
background: rgba(255,255,255,.06) !important;
color: #E8E8F0 !important;
border: 1px solid rgba(255,255,255,.2) !important;
border-radius: 2px !important;
font-family: Consolas, "Courier New", monospace !important;
letter-spacing: 0.08em;
text-transform: uppercase;
font-size: 11px;
}
/* 专业主题：toast 胶片风 */
body.theme-professional .toast.info {
background: rgba(10,10,18,.95) !important;
border: 1px solid rgba(255,255,255,.2) !important;
color: #E8E8F0 !important;
font-family: Consolas, "Courier New", monospace;
letter-spacing: 0.05em;
backdrop-filter: blur(8px);
}
/* 专业主题：用户气泡 */
body.theme-professional .user-bubble {
background: rgba(10,10,18,.85) !important;
border: 1px solid rgba(255,255,255,.15) !important;
border-radius: 2px !important;
}
/* 专业主题：进度条 电影胶片风 */
body.theme-professional .progress-bar,
body.theme-professional .progress-fill {
border-radius: 2px !important;
}
body.theme-professional .progress-bar {
background: rgba(255,255,255,.08) !important;
border: 1px solid rgba(255,255,255,.1);
}
body.theme-professional .progress-fill {
background: linear-gradient(90deg, rgba(80,120,255,.8), rgba(255,100,180,.8)) !important;
box-shadow: 0 0 20px rgba(80,120,255,.4);
}
/* 专业主题：分割线 */
body.theme-professional hr,
body.theme-professional .divider {
border-color: rgba(255,255,255,.12) !important;
}
/* 专业主题：工作台加载信息 */
body.theme-professional .ws-loading-message {
font-family: Consolas, "Courier New", monospace !important;
letter-spacing: 0.1em;
color: rgba(232,232,240,.7);
}
body.theme-professional .ws-loading-progress-label {
font-family: Consolas, "Courier New", monospace !important;
letter-spacing: 0.1em;
text-transform: uppercase;
}
/* 专业主题：扫描线动画标题 */
body.theme-professional .ws-section-bar-title {
font-family: Impact, "Arial Black", sans-serif, 'Anton', sans-serif !important;
letter-spacing: 0.1em;
text-transform: uppercase;
font-size: 20px !important;
position: relative;
padding-bottom: 8px;
}
body.theme-professional .ws-section-bar-title::after {
content:"";
position:absolute;
left:0; bottom:0;
width:100%; height:1px;
background: linear-gradient(90deg, rgba(255,100,180,.6), rgba(80,120,255,.4), transparent);
}
/* 专业主题：项目卡海报容器 */
body.theme-professional .project-poster-wrap,
body.theme-professional .poster-preview {
border-color: rgba(255,255,255,.15) !important;
border-radius: 2px !important;
}
/* 专业主题：星空 Canvas */
#aimovieStarfield {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
z-index: 1;
pointer-events: none;
}
/* 确保专业主题下，内容在星空之上 */
body.theme-professional .app-header,
body.theme-professional .page-users,
body.theme-professional .page-login,
body.theme-professional .page-workspace {
position: relative;
z-index: 10;
}
/* =========================================================
图标主题化（统一未来/科幻/浪漫/专业四主题的 emoji 与 FA 图标）
========================================================= */
/* 通用：所有 emoji 和 FA 图标的基础样式 */
.logo, h1, h2, h3, .nav-link, .setting-card-title,
.btn, .btn-logout, .btn-ghost, .btn-sm, .btn-xs,
.section-title, .panel-head, .user-info,
.ws-section-bar-title, .ws-tool-icon, .ws-team-title, .ws-script-area-title,
.ws-shooting-area-title, .ws-genre-analysis-label, .ws-team-label,
.ws-eval-image-label, .ws-notes-edit-icon, .ws-tool-btn,
.ws-loading-message,
.badge, .status-tag, .role-tag {
/* emoji 作为图标时对齐 */
vertical-align: middle;
line-height: 1;
}
/* Font Awesome 图标基础尺寸 */
i.fa, i.fab, i.far, i.fas {
vertical-align: middle;
line-height: 1;
display: inline-block;
}
/* emoji 图标与文字之间的间距 */
.logo, h1, h2, h3, .nav-link, .setting-card-title {
letter-spacing: 0.02em;
}
/* =========================================================
主题 1：未来 (theme-future) —— 冰蓝发光
图标风格：emoji 原色 + 青蓝光晕
========================================================= */
body.theme-future .logo,
body.theme-future h1,
body.theme-future h2,
body.theme-future h3 {
/* emoji 轻微发光 */
filter: drop-shadow(0 0 6px rgba(91,200,255,.35));
}
body.theme-future i.fa,
body.theme-future i.fab,
body.theme-future i.far,
body.theme-future i.fas {
color: #5BC8FF;
text-shadow: 0 0 8px rgba(91,200,255,.4);
}
/* 按钮上的图标 */
body.theme-future .btn i.fa,
body.theme-future .btn i.fas {
color: inherit;
text-shadow: none;
}
/* 导航栏图标 */
body.theme-future .nav-link {
filter: drop-shadow(0 0 4px rgba(91,200,255,.25));
}
/* 退出按钮 */
body.theme-future .btn-logout {
filter: drop-shadow(0 0 4px rgba(91,200,255,.3));
}
/* =========================================================
主题 2：科幻 (theme-scifi) —— HUD 青色荧光 + 强发光
图标风格：emoji 青色调 + 光晕 + 边框发光
========================================================= */
body.theme-scifi .logo,
body.theme-scifi h1,
body.theme-scifi h2,
body.theme-scifi h3 {
/* emoji 青色荧光 + 强发光 */
filter: drop-shadow(0 0 10px rgba(57,255,20,.5)) drop-shadow(0 0 4px rgba(91,200,255,.7));
}
body.theme-scifi i.fa,
body.theme-scifi i.fab,
body.theme-scifi i.far,
body.theme-scifi i.fas {
color: #39FF14;
text-shadow: 0 0 12px rgba(57,255,20,.7), 0 0 4px rgba(91,200,255,.5);
filter: brightness(1.2) saturate(1.4);
}
body.theme-scifi .btn i.fa,
body.theme-scifi .btn i.fas {
color: inherit;
text-shadow: 0 0 8px currentColor;
}
body.theme-scifi .btn-logout {
filter: drop-shadow(0 0 6px rgba(57,255,20,.4));
}
body.theme-scifi .nav-link {
filter: drop-shadow(0 0 6px rgba(57,255,20,.5));
}
/* 科幻主题：所有图标元素统一荧光绿 */
body.theme-scifi .setting-card-title i,
body.theme-scifi .section-title i,
body.theme-scifi .badge i {
color: #39FF14 !important;
text-shadow: 0 0 8px rgba(57,255,20,.6);
}
/* =========================================================
主题 3：烂漫 (theme-romance) —— 粉紫柔光
图标风格：emoji 粉色调 + 柔光阴影
========================================================= */
body.theme-romance .logo,
body.theme-romance h1,
body.theme-romance h2,
body.theme-romance h3 {
/* emoji 粉紫光晕 */
filter: drop-shadow(0 0 10px rgba(255,107,157,.45)) drop-shadow(0 0 4px rgba(123,97,255,.5));
}
body.theme-romance i.fa,
body.theme-romance i.fab,
body.theme-romance i.far,
body.theme-romance i.fas {
color: #FF6B9D;
text-shadow: 0 0 10px rgba(255,107,157,.55);
filter: drop-shadow(0 0 3px rgba(123,97,255,.4));
}
body.theme-romance .btn i.fa,
body.theme-romance .btn i.fas {
color: inherit;
text-shadow: 0 0 6px rgba(255,107,157,.5);
}
body.theme-romance .btn-logout {
filter: drop-shadow(0 0 5px rgba(255,107,157,.4));
}
body.theme-romance .nav-link {
filter: drop-shadow(0 0 5px rgba(255,107,157,.4));
}
body.theme-romance .setting-card-title i,
body.theme-romance .section-title i,
body.theme-romance .badge i {
color: #FF6B9D !important;
text-shadow: 0 0 8px rgba(255,107,157,.5);
}
/* =========================================================
主题 4：专业 (theme-professional) —— 胶片白 + 淡粉蓝光晕
图标风格：emoji 银色发光 + 电影片尾字幕感
========================================================= */
body.theme-professional .logo,
body.theme-professional h1,
body.theme-professional h2,
body.theme-professional h3 {
filter: drop-shadow(0 0 30px rgba(232,232,240,.3)) drop-shadow(0 0 60px rgba(255,100,180,.2));
}
body.theme-professional i.fa,
body.theme-professional i.fab,
body.theme-professional i.far,
body.theme-professional i.fas {
color: #E8E8F0;
text-shadow: 0 0 15px rgba(232,232,240,.4), 0 0 5px rgba(255,100,180,.3);
}
body.theme-professional .btn i.fa,
body.theme-professional .btn i.fas {
color: inherit;
text-shadow: 0 0 8px currentColor;
}
body.theme-professional .btn-logout {
filter: drop-shadow(0 0 5px rgba(232,232,240,.3));
}
body.theme-professional .nav-link {
filter: drop-shadow(0 0 5px rgba(80,120,255,.3));
}
body.theme-professional .setting-card-title i,
body.theme-professional .section-title i,
body.theme-professional .badge i {
color: #E8E8F0 !important;
text-shadow: 0 0 10px rgba(232,232,240,.4);
}
/* =========================================================
标题图标统一处理（emoji + FA）
- 确保 emoji 和 FA 图标都与文字对齐
- 三主题下都有一致的视觉效果
========================================================= */
.logo, h1, h2, h3 {
display: inline-flex;
align-items: center;
gap: 8px;
}
/* 标题内第一个字符如果是 emoji/FA，则放大一点 */
.logo:first-letter, h1:first-letter, h2:first-letter {
font-size: 1.1em;
}
/* =========================================================
导航栏图标统一
========================================================= */
.nav-link {
display: inline-flex;
align-items: center;
gap: 6px;
}
/* =========================================================
按钮图标统一
========================================================= */
.btn {
display: inline-flex;
align-items: center;
gap: 6px;
}
/* =========================================================
设置页图标统一
========================================================= */
.setting-card-title {
display: inline-flex;
align-items: center;
gap: 8px;
}
/* =========================================================
标签/徽章图标统一
========================================================= */
.badge, .status-tag, .role-tag {
display: inline-flex;
align-items: center;
gap: 4px;
}
/* =========================================================
工作台工具栏图标统一
========================================================= */
.ws-tool-icon {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.2em;
}
.ws-tool-btn {
display: inline-flex;
align-items: center;
gap: 4px;
}
/* =========================================================
各主题下特定图标的颜色覆盖
========================================================= */
/* 未来主题：蓝色强调图标 */
body.theme-future .fa-user,
body.theme-future .fa-users {
color: #9D4EDD;
text-shadow: 0 0 8px rgba(157,78,221,.45);
}
body.theme-future .fa-gear {
color: #5BC8FF;
text-shadow: 0 0 8px rgba(91,200,255,.5);
}
body.theme-future .fa-film,
body.theme-future .fa-video {
color: #FF6B9D;
text-shadow: 0 0 8px rgba(255,107,157,.45);
}
body.theme-future .fa-folder,
body.theme-future .fa-folder-open {
color: #39FF14;
text-shadow: 0 0 8px rgba(57,255,20,.4);
}
/* 科幻主题：青色荧光强调图标 */
body.theme-scifi .fa-user,
body.theme-scifi .fa-users {
color: #9D4EDD;
text-shadow: 0 0 12px rgba(157,78,221,.7), 0 0 4px rgba(91,200,255,.4);
}
body.theme-scifi .fa-gear {
color: #39FF14;
text-shadow: 0 0 14px rgba(57,255,20,.7);
}
body.theme-scifi .fa-film,
body.theme-scifi .fa-video {
color: #00F5D4;
text-shadow: 0 0 12px rgba(0,245,212,.7), 0 0 4px rgba(91,200,255,.5);
}
body.theme-scifi .fa-folder,
body.theme-scifi .fa-folder-open {
color: #5BC8FF;
text-shadow: 0 0 12px rgba(91,200,255,.7);
}
/* 浪漫主题：粉紫柔光强调图标 */
body.theme-romance .fa-user,
body.theme-romance .fa-users {
color: #7B61FF;
text-shadow: 0 0 10px rgba(123,97,255,.55);
}
body.theme-romance .fa-gear {
color: #FF6B9D;
text-shadow: 0 0 10px rgba(255,107,157,.55);
}
body.theme-romance .fa-film,
body.theme-romance .fa-video {
color: #00F5D4;
text-shadow: 0 0 10px rgba(0,245,212,.55);
}
body.theme-romance .fa-folder,
body.theme-romance .fa-folder-open {
color: #FFD700;
text-shadow: 0 0 10px rgba(255,215,0,.55);
}
/* 错误提示 */
.alert {
padding: 10px 14px;
border-radius: 6px;
font-size: 13px;
margin-bottom: 14px;
text-align: center;
}
.alert-error { background: rgba(255,51,102,0.12); border: 1px solid rgba(255,51,102,0.3); color: var(--red); }
.alert-info { background: rgba(0,200,255,0.1); border: 1px solid rgba(0,200,255,0.3); color: var(--cyan); }
.login-hint { text-align: center; margin-top: 18px; color: var(--text3); font-size: 12px; }
/* ══════�?布局 ══════�?*/
.app-header {
background: var(--bg-panel);
border-bottom: 1px solid var(--border);
padding: 0 24px;
height: 56px;
display: flex;
align-items: center;
justify-content: space-between;
}
.app-header .logo { font-size: 18px; font-weight: bold; color: var(--cyan); }
.app-header nav { display: flex; gap: 4px; }
.app-header .nav-link {
padding: 8px 16px;
border: none;
border-radius: 6px;
background: transparent;
color: var(--text2);
font-size: 13px;
cursor: pointer;
transition: all 0.2s;
font-family: inherit;
text-decoration: none;
}
.app-header .nav-link:hover { background: var(--bg-hover); color: var(--text); }
.app-header .nav-link.active {
background: rgba(0,204,255,0.1);
color: var(--cyan);
box-shadow: inset 0 -2px 0 var(--cyan);
}
.app-header .user-info { display: flex; align-items: center; gap: 14px; }
.app-header .user-info .name { font-size: 14px; }
.app-header .user-info .role-tag { font-size: 12px; color: var(--text3); }
.app-header .btn-logout {
background: none; border: none; color: var(--text2);
font-size: 18px; cursor: pointer; padding: 6px; border-radius: 6px;
}
.app-header .btn-logout:hover { color: var(--red); background: rgba(255,51,102,0.1); }
/* ══════�?工作�?══════�?*/
.story-banner {
background: linear-gradient(180deg, rgba(0,102,255,0.1), var(--bg-panel));
border-bottom: 1px solid var(--border);
padding: 16px 24px;
display: flex;
gap: 18px;
}
.story-cover {
width: 100px; height: 140px; background: var(--bg-card);
border-radius: 4px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
color: var(--text3); font-size: 12px;
}
.story-info h3 { color: var(--cyan); font-size: 14px; margin-bottom: 8px; }
.story-info p { font-size: 13px; line-height: 1.7; }
.dashboard {
display: grid;
grid-template-columns: 260px 1fr 1fr;
height: calc(100vh - 56px);
/* subtract header; story-banner is inside left panel's flow but actually above the grid */
}
/* Actually let me adjust: header 56px, story banner is above the 3 columns */
.main-area { height: calc(100vh - 56px); display: flex; flex-direction: column; }
.dashboard-grid {
display: grid;
grid-template-columns: 260px 1fr 1fr;
flex: 1;
overflow: hidden;
}
.panel {
background: var(--bg-panel);
border-right: 1px solid var(--border);
display: flex;
flex-direction: column;
overflow: hidden;
}
.panel:last-child { border-right: none; }
.panel-head {
padding: 10px 14px;
border-bottom: 1px solid var(--border);
font-size: 13px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: space-between;
}
.panel-head.cyan { color: var(--cyan); }
.panel-head.gold { color: var(--gold); }
.panel-body {
flex: 1;
overflow-y: auto;
padding: 12px;
}
/* 导航面板内容 */
.btn-gen {
display: block;
width: 100%;
padding: 12px;
background: linear-gradient(135deg, var(--cyan), var(--blue));
color: #fff;
border: none;
border-radius: 6px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
margin-bottom: 12px;
font-family: inherit;
}
.btn-gen:hover { opacity: 0.9; }
.section-title {
color: var(--cyan);
font-size: 12px;
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 4px;
}
.suggest-box {
background: var(--bg-dark);
border: 1px solid var(--border);
border-radius: 6px;
padding: 8px;
margin-bottom: 12px;
}
.suggest-box textarea {
width: 100%;
background: transparent;
border: none;
color: var(--text);
font-size: 12px;
resize: none;
outline: none;
font-family: inherit;
}
.suggest-acts {
display: flex;
gap: 4px;
justify-content: flex-end;
padding-top: 8px;
margin-top: 4px;
border-top: 1px solid var(--border);
}
.duration-row {
background: var(--bg-dark);
border: 1px solid var(--border);
border-radius: 6px;
padding: 8px 10px;
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: var(--text2);
margin-bottom: 12px;
}
.duration-row select {
flex: 1;
background: var(--bg-card);
border: 1px solid var(--border);
color: var(--text);
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
outline: none;
font-family: inherit;
}
.chapter-list {
background: var(--bg-dark);
border: 1px solid var(--border);
border-radius: 6px;
overflow: hidden;
}
.chapter-row {
padding: 7px 10px;
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
border-bottom: 1px solid rgba(0,68,170,0.25);
cursor: pointer;
transition: background 0.15s;
}
.chapter-row:hover { background: var(--bg-hover); }
.chapter-row.l2 { padding-left: 26px; }
.chapter-row.l3 { padding-left: 42px; }
.chapter-row input[type="checkbox"] { accent-color: var(--cyan); }
/* 中间原著 */
.novel-title {
color: var(--gold);
font-size: 14px;
font-weight: 600;
margin-bottom: 10px;
padding-bottom: 8px;
border-bottom: 1px dashed var(--border);
}
.novel-text { font-size: 14px; line-height: 1.85; }
/* 右侧剧本 */
.script-tabs {
display: flex;
border-bottom: 1px solid var(--border);
}
.script-tab {
flex: 1;
padding: 8px 6px;
background: none;
border: none;
color: var(--text2);
font-size: 12px;
cursor: pointer;
position: relative;
font-family: inherit;
}
.script-tab:hover { color: var(--text); }
.script-tab.active { color: var(--cyan); }
.script-tab.active::after {
content: ''; position: absolute; bottom: -1px; left: 0; right: 0;
height: 2px; background: var(--cyan);
}
.script-text { font-size: 13px; line-height: 1.7; }
.empty {
display: flex; flex-direction: column; align-items: center; justify-content: center;
height: 100%; color: var(--text3);
}
.empty .icon { font-size: 32px; margin-bottom: 10px; }
.empty p { font-size: 13px; }
/* ══════�?用户管理�?══════�?*/
.page-users {
height: calc(100vh - 56px);
overflow-y: auto;
}
.users-wrap { padding: 24px; max-width: 1400px; margin: 0 auto; }
.users-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}
.users-head h2 { color: var(--cyan); font-size: 18px; font-weight: 600; }
/* 角色卡片网格（用户管理只保留制片人，按可用宽度自适应，单卡时占满整行） */
.role-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 12px;
}
.role-card {
background: var(--bg-panel);
border: 1px solid var(--border);
border-radius: 8px;
display: flex;
flex-direction: column;
overflow: hidden;
}
.role-card-head {
padding: 10px 12px;
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: space-between;
}
.role-card-title { font-size: 13px; font-weight: 600; }
.role-card-right { display: flex; align-items: center; gap: 8px; }
/* 收拢视图：管理区 / 制片人 并排两张小卡，点击任一卡展开该角色用户列表 */
.role-card--compact { cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.role-card--compact:hover { border-color: rgba(91, 200, 255, 0.5); background: var(--bg-hover); }
.role-card--compact .role-card-head { padding: 16px 18px; border-bottom: none; }
.role-card--compact .role-card-title { font-size: 14px; }
.role-card-count {
font-size: 11px;
color: var(--text3);
background: var(--bg-dark);
padding: 2px 8px;
border-radius: 10px;
}
/* 添加图标 + 悬浮提示 */
.add-icon {
width: 24px; height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 4px;
cursor: pointer;
color: var(--text3);
position: relative;
transition: all 0.15s;
}
.add-icon:hover { color: var(--cyan); background: rgba(0,204,255,0.12); }
.role-card-body {
flex: 1;
min-height: 80px;
max-height: 260px;
overflow-y: auto;
}
.role-empty {
padding: 24px;
text-align: center;
color: var(--text3);
font-size: 13px;
}
.role-user-row {
padding: 8px 14px;
border-bottom: 1px solid rgba(0,68,170,0.18);
transition: background 0.15s;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 10px;
}
.role-user-row:last-child { border-bottom: none; }
.role-user-row:hover { background: var(--bg-hover); }
.role-user-row:hover .role-user-icons { opacity: 1; }
.role-user-name { font-size: 12px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.role-user-icons {
display: flex;
gap: 2px;
margin-left: auto;
opacity: 0;
transition: opacity 0.15s;
}
.icon-btn {
width: 26px; height: 26px;
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
border-radius: 4px;
background: transparent;
color: var(--text3);
cursor: pointer;
transition: all 0.15s;
}
.icon-btn:hover { background: var(--bg-hover); color: var(--cyan); }
.icon-btn-del:hover { background: rgba(255,51,102,0.15); color: var(--red); }
/* 项目状态标签（语义 class，不依赖中文，永远稳定）
* 用法: 筹备中
* 同时保留旧的 status-<中文> 选择器作为兼容兜底（已修之前的乱码） */
.status-tag {
display: inline-block;
padding: 2px 10px;
border-radius: 4px;
font-size: 11px;
font-weight: 500;
}
/* 语义 class（主用 — JS 主动加这一类，永远命中，不受编码/文字变化影响） */
.status--idle { background: rgba(0,102,255,0.18); color: var(--blue); } /* 筹备中、未开始、默认 */
.status--scripting { background: rgba(255,170,0,0.18); color: var(--gold); } /* 剧本生成中 / 制作剧本故事 */
.status--preparing { background: rgba(0,204,102,0.18); color: var(--green); } /* 角色选择中 / 拍摄准备 / 制作拍摄剧本 / 道服化 */
.status--directing { background: rgba(153,102,255,0.18); color: var(--purple); }/* 导演选色 / 道、服、化阶段 / 紫色中间态 */
.status--shooting { background: rgba(255,68,68,0.18); color: var(--red); } /* 拍摄阶段 */
.status--editing { background: rgba(0,200,200,0.18); color: #00b8c8; } /* 后期剪辑 */
.status--done { background: rgba(0,200,100,0.18); color: #00a852; } /* 已完成 / 上线 */
.status--locked { background: rgba(255,102,0,0.18); color: #ff851b; } /* 锁定（筹备/剧本/拍摄任意锁定态） */
/* 兼容旧的中文 status 类名（修掉之前的乱码并补齐缺失），避免未升级的旧模板失效 */
.status-筹备中 { background: rgba(0,102,255,0.18); color: var(--blue); }
.status-未开始 { background: rgba(0,102,255,0.18); color: var(--blue); }
.status-剧本生成中 { background: rgba(255,170,0,0.18); color: var(--gold); }
.status-制作剧本故事 { background: rgba(255,170,0,0.18); color: var(--gold); }
.status-角色选择中 { background: rgba(0,204,102,0.18); color: var(--green); }
.status-拍摄准备 { background: rgba(0,204,102,0.18); color: var(--green); }
.status-制作拍摄剧本 { background: rgba(0,204,102,0.18); color: var(--green); }
.status-道、服、化阶段 { background: rgba(153,102,255,0.18); color: var(--purple); }
.status-导演选色 { background: rgba(153,102,255,0.18); color: var(--purple); }
.status-拍摄阶段 { background: rgba(255,68,68,0.18); color: var(--red); }
.status-后期剪辑 { background: rgba(0,200,200,0.18); color: #00b8c8; }
.status-已完成 { background: rgba(0,200,100,0.18); color: #00a852; }
.status-项目完成 { background: rgba(0,200,100,0.18); color: #00a852; }
.status-筹备锁定 { background: rgba(255,102,0,0.18); color: #ff851b; }
.status-剧本锁定 { background: rgba(255,102,0,0.18); color: #ff851b; }
.status-拍摄锁定 { background: rgba(255,102,0,0.18); color: #ff851b; }
.act-btns { display: flex; gap: 4px; }
/* 表格（项目管理） */
.table-box {
background: var(--bg-panel);
border: 1px solid var(--border);
border-radius: 8px;
overflow: hidden;
}
table { width: 100%; border-collapse: collapse; }
thead th {
background: var(--bg-card);
padding: 12px 16px;
text-align: left;
font-size: 11px;
color: var(--cyan);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
border-bottom: 1px solid var(--border);
}
tbody td {
padding: 12px 16px;
font-size: 13px;
border-bottom: 1px solid rgba(0,68,170,0.2);
}
tbody tr:hover { background: var(--bg-hover); }
/* 模态框 */
.avatar-circle {
width: 30px; height: 30px; border-radius: 50%;
background: rgba(0,204,255,0.12);
display: inline-flex; align-items: center; justify-content: center;
color: var(--cyan); font-size: 13px; flex-shrink: 0;
}
.dot { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; }
.dot::before { content: ''; width: 7px; height: 7px; border-radius: 50%; }
.dot.on { color: var(--green); }
.dot.on::before { background: var(--green); }
.dot.off { color: var(--red); }
.dot.off::before { background: var(--red); }
/* 模态框 */
.modal-overlay {
position: fixed; inset: 0;
background: rgba(0,0,0,0.55);
display: flex; align-items: center; justify-content: center;
z-index: 999;
}
.modal {
background: var(--bg-panel);
border: 1px solid var(--border);
border-radius: 8px;
width: 440px;
max-height: 90vh;
overflow-y: auto;
}
.modal-head {
padding: 16px 20px;
border-bottom: 1px solid var(--border);
display: flex; align-items: center; justify-content: space-between;
}
.modal-head h3 { color: var(--cyan); font-size: 16px; }
.modal-close {
background: none; border: none; color: var(--text2); font-size: 20px;
cursor: pointer; padding: 4px;
}
.modal-close:hover { color: var(--text); }
.modal-body { padding: 20px; }
/* 模态框两栏布局 */
.modal-cols { display: flex; gap: 20px; }
.modal-col-left { flex: 1; min-width: 0; }
.modal-col-right { flex-shrink: 0; }
.modal-foot {
padding: 14px 20px;
border-top: 1px solid var(--border);
display: flex; justify-content: flex-end; gap: 8px;
}
/* Toast */
.toast {
position: fixed; top: 20px; right: 20px;
padding: 16px 24px; border-radius: 8px; color: #fff;
font-size: 14px; z-index: 9999;
animation: slide-in 0.3s ease;
max-width: 400px;
word-wrap: break-word;
white-space: pre-wrap;
line-height: 1.6;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.toast.ok { background: var(--green); }
.toast.err { background: var(--red); }
.toast.error { background: var(--red); }
.toast.info { background: var(--blue); }
/* ⭐ 警告：红底白字 + 粗边框 + 震动强调 */
.toast.warn {
background: #d32f2f !important;
color: #fff !important;
font-weight: 700;
border: 2px solid #ff5252;
box-shadow: 0 4px 20px rgba(211, 47, 47, 0.5);
animation: slide-in 0.3s ease, warnPulse 1.2s ease-in-out infinite;
}
.toast.warning {
background: #d32f2f !important;
color: #fff !important;
font-weight: 700;
border: 2px solid #ff5252;
box-shadow: 0 4px 20px rgba(211, 47, 47, 0.5);
}
.toast.flashing {
animation: slide-in 0.3s ease, pulse 1s infinite;
}
/* =========================================================
🪟 自定义 Modal 弹窗（替代 native prompt / alert / confirm）
风格统一：用 CSS 变量，跟 toast 一致；毛玻璃半透明
========================================================= */
.ws-modal-mask {
position: fixed; inset: 0;
background: rgba(0,0,0,0.55);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
z-index: 100000; /* 高于报告弹窗(99999)：wsModal 必须永远在最上层，否则在报告内弹确认框会被盖住形成"无反应" */
display: flex; align-items: center; justify-content: center;
animation: wsModalFadeIn 0.18s ease;
}
.ws-modal-box {
background:
linear-gradient(180deg, rgba(91,200,255,.04), rgba(157,78,221,.03)),
rgba(10,14,23,.92);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid var(--border);
border-radius: 14px;
padding: 24px 28px 20px;
min-width: 360px; max-width: 520px;
box-shadow: 0 16px 50px rgba(0,0,0,0.55), 0 0 0 1px rgba(91,200,255,.08) inset;
animation: wsModalPopIn 0.22s cubic-bezier(.2,.8,.3,1.1);
color: var(--text);
font-size: 14px;
}
.ws-modal-title {
font-size: 15px; font-weight: 600;
color: var(--cyan);
margin-bottom: 12px;
display: flex; align-items: center; gap: 8px;
}
.ws-modal-title::before {
content: ''; display: inline-block; width: 6px; height: 18px;
background: var(--cyan); border-radius: 2px;
}
.ws-modal-body {
color: var(--text2);
line-height: 1.6;
white-space: pre-wrap;
margin-bottom: 18px;
}
.ws-modal-input {
width: 100%; box-sizing: border-box;
background: rgba(0,0,0,0.35);
border: 1px solid var(--border);
border-radius: 8px;
color: var(--text);
padding: 10px 14px;
font-size: 14px;
outline: none;
transition: border-color .15s;
}
.ws-modal-input:focus {
border-color: var(--cyan);
box-shadow: 0 0 0 2px rgba(91,200,255,.15);
}
.ws-modal-actions {
display: flex; justify-content: flex-end; gap: 10px;
margin-top: 18px;
}
.ws-modal-btn {
padding: 8px 20px;
border-radius: 8px;
border: 1px solid var(--border);
background: rgba(91,200,255,.08);
color: var(--text);
font-size: 13px;
cursor: pointer;
transition: all .15s;
}
.ws-modal-btn:hover { background: rgba(91,200,255,.18); border-color: var(--cyan); }
.ws-modal-btn:active { transform: scale(.97); }
.ws-modal-btn-primary {
background: var(--cyan); color: #0A0E17;
border-color: var(--cyan); font-weight: 600;
}
.ws-modal-btn-primary:hover { background: #7DD8FF; border-color: #7DD8FF; }
.ws-modal-btn-danger {
background: rgba(255,77,109,.12); color: var(--red);
border-color: rgba(255,77,109,.35);
}
.ws-modal-btn-danger:hover { background: rgba(255,77,109,.22); }
/* === 主题适配 === */
body.theme-romance .ws-modal-box {
background:
linear-gradient(180deg, rgba(255,107,157,.06), rgba(123,97,255,.05)),
rgba(11,12,26,.94);
border-color: rgba(255,107,157,.3);
}
body.theme-romance .ws-modal-btn-primary {
background: linear-gradient(135deg, #ff6b9d, #7b61ff);
border-color: #ff6b9d; color: #fff;
}
body.theme-professional .ws-modal-box {
background: rgba(10,10,18,.97);
border: 1px solid rgba(255,255,255,.18);
font-family: Consolas, "Courier New", monospace;
}
body.theme-professional .ws-modal-btn-primary {
background: #fff; color: #0A0E17; border-color: #fff;
}
@keyframes wsModalFadeIn {
from { opacity: 0; } to { opacity: 1; }
}
@keyframes wsModalPopIn {
from { opacity: 0; transform: scale(.92) translateY(6px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes slide-in {
from { transform: translateX(100%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.6; }
}
@keyframes warnPulse {
0%, 100% { box-shadow: 0 4px 20px rgba(211, 47, 47, 0.5); transform: translateX(0); }
25% { transform: translateX(-2px); }
75% { transform: translateX(2px); }
50% { box-shadow: 0 4px 30px rgba(211, 47, 47, 0.8); }
}
.ws-confirm-overlay {
position: fixed; inset: 0;
background: rgba(0, 0, 0, 0.7);
display: flex; align-items: center; justify-content: center;
z-index: 1000002; /* 高于无限画布(999999)与试镜等弹窗(1000001)：画布内操作的确认框不被遮挡 */
animation: fade-in 0.2s ease;
}
.ws-confirm-dialog {
background: var(--bg-panel);
border: 1px solid var(--border);
border-radius: 12px;
width: 400px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
animation: scale-in 0.2s ease;
}
.ws-confirm-title {
padding: 20px 24px 12px;
font-size: 18px;
font-weight: 600;
color: var(--text-primary);
border-bottom: 1px solid var(--border);
}
.ws-confirm-content {
padding: 20px 24px;
font-size: 14px;
color: var(--text-secondary);
line-height: 1.6;
}
.ws-confirm-buttons {
display: flex; justify-content: flex-end; gap: 12px;
padding: 16px 24px;
border-top: 1px solid var(--border);
}
.ws-confirm-btn {
padding: 8px 24px;
border-radius: 6px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
border: none;
transition: all 0.2s;
}
.ws-confirm-cancel {
background: transparent;
color: var(--text-secondary);
border: 1px solid var(--border);
}
.ws-confirm-cancel:hover {
background: var(--bg-hover);
}
.ws-confirm-ok {
background: var(--blue);
color: #fff;
}
.ws-confirm-ok:hover {
background: var(--blue-hover);
}
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes scale-in {
from { transform: scale(0.95); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
/* 照片上传 */
.photo-upload {
width: 100px; height: 100px;
border: 2px dashed var(--border);
border-radius: 8px;
overflow: hidden;
position: relative;
cursor: pointer;
}
.photo-upload:hover { border-color: var(--cyan); }
.photo-placeholder {
width: 100%; height: 100%;
display: flex; align-items: center; justify-content: center;
text-align: center; color: var(--text3); font-size: 12px;
}
.photo-placeholder input {
position: absolute; inset: 0; opacity: 0; cursor: pointer;
}
.photo-preview {
width: 100%; height: 100%;
object-fit: cover;
}
.user-thumb {
width: 28px; height: 28px;
border-radius: 50%;
object-fit: cover;
margin-right: 8px;
flex-shrink: 0;
}
.hidden { display: none !important; }
/* 全局加载动画 */
.ws-loading-spinner {
border: 4px solid rgba(255,255,255,0.3);
border-top-color: #00ccff;
border-radius: 50%;
animation: ws-spin 1s linear infinite;
}
@keyframes ws-spin {
to { transform: rotate(360deg); }
}
/* ══════�?管理员区�?══════�?*/
.admin-area {
background: var(--bg-panel);
border: 1px solid var(--border);
border-radius: 8px;
margin-bottom: 14px;
overflow: hidden;
}
.admin-area-head {
padding: 10px 14px;
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: space-between;
}
.admin-area-title { font-size: 13px; font-weight: 600; }
.admin-area-right { display: flex; align-items: center; gap: 8px; }
.admin-area-count {
font-size: 11px;
color: var(--text3);
background: var(--bg-dark);
padding: 2px 8px;
border-radius: 10px;
}
.admin-area-body {
display: flex;
flex-wrap: wrap;
gap: 10px;
padding: 12px 14px;
min-height: 40px;
}
.admin-user-tag {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 6px;
padding: 6px 10px;
font-size: 13px;
transition: background 0.15s;
}
.admin-user-tag:hover { background: var(--bg-hover); }
.admin-user-tag .admin-user-icons {
display: flex;
gap: 2px;
opacity: 0;
transition: opacity 0.15s;
}
.admin-user-tag:hover .admin-user-icons { opacity: 1; }
.admin-empty {
padding: 20px;
text-align: center;
color: var(--text3);
font-size: 13px;
width: 100%;
}
/* 卡片内搜索框 */
.card-search {
display: flex;
align-items: center;
gap: 4px;
padding: 5px 8px;
margin: 0 8px 4px;
background: var(--bg-dark);
border: 1px solid rgba(0,68,170,0.3);
border-radius: 4px;
}
.search-icon-sm { color: var(--text3); flex-shrink: 0; }
.card-search-input {
flex: 1;
background: transparent;
border: none;
color: var(--text);
font-size: 11px;
outline: none;
font-family: inherit;
}
.card-search-input::placeholder { color: var(--text3); }
/* ═══════ 用户信息气泡 ═══════ */
.user-bubble {
position: fixed;
z-index: 9999;
background: var(--bg-panel);
border: 1px solid var(--cyan);
border-radius: 8px;
padding: 14px 16px;
min-width: 220px;
max-width: 300px;
box-shadow: 0 4px 20px rgba(0,0,0,0.5);
/* 关键：气泡永远不拦截鼠标事件，hover/click 直接穿透到下面的卡片/按钮，
避免"mouseenter→气泡出现→mouseleave→气泡消失→mouseenter..."的死循环抖动 */
pointer-events: none;
}
.user-bubble-arrow {
position: absolute;
width: 14px;
height: 14px;
background: var(--bg-panel);
border-color: var(--cyan);
border-style: solid;
border-width: 1px;
/* 默认定位+方向：在左侧（箭头朝左，指向右侧的目标元素） */
top: 20px;
right: -8px;
border-top: none;
border-left: none;
transform: rotate(-45deg);
}
/* 气泡在目标右侧时：箭头朝左指向目标 */
.user-bubble.bubble-on-right .user-bubble-arrow {
left: -8px;
right: auto;
border-top: 1px solid var(--cyan);
border-left: 1px solid var(--cyan);
border-right: none;
border-bottom: none;
}
/* 气泡在目标左侧时：箭头朝右指向目标（即默认样式，保留此类便于JS切换）*/
.user-bubble.bubble-on-left .user-bubble-arrow {
right: -8px;
left: auto;
border-right: 1px solid var(--cyan);
border-bottom: 1px solid var(--cyan);
border-top: none;
border-left: none;
}
.user-bubble-content { font-size: 12px; line-height: 1.6; }
.user-bubble-content .bub-row {
display: flex;
gap: 6px;
padding: 2px 0;
}
.user-bubble-content .bub-label { color: var(--text3); flex-shrink: 0; }
.user-bubble-content .bub-val { color: var(--text); word-break: break-all; }
.user-bubble-content .bub-photo {
width: 48px; height: 48px;
border-radius: 50%;
object-fit: cover;
margin-bottom: 6px;
}
.user-bubble-content .bub-name {
font-size: 14px;
font-weight: 600;
color: var(--cyan);
margin-bottom: 4px;
}
/* ══════�?项目管理卡片 ══════�?*/
.project-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.project-card {
background: var(--bg-panel);
border: 1px solid var(--border);
border-radius: 8px;
overflow: hidden;
display: flex;
flex-direction: row;
transition: border-color 0.2s, box-shadow 0.2s;
min-height: 240px;
}
.project-card:hover {
border-color: var(--cyan);
box-shadow: 0 2px 12px rgba(0,204,255,0.1);
}
.project-card-poster {
width: 100px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
background: #0a0f1a;
border-right: 1px solid var(--border);
overflow: hidden;
}
.project-card-poster img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 0;
}
.project-card-poster-empty {
font-size: 11px;
color: var(--text3);
text-align: center;
padding: 8px;
}
.project-card-content {
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
}
.project-card-head {
padding: 8px 14px 4px;
border-bottom: 1px solid var(--border);
}
.project-card-title-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.project-card-title {
font-size: 15px;
font-weight: 600;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
min-width: 0;
display: flex;
align-items: center;
gap: 6px;
}
.project-card-number {
display: inline-flex;
align-items: center;
font-size: 11px;
font-weight: 700;
padding: 1px 7px;
border-radius: 4px;
background: var(--primary-bg, rgba(64,160,255,0.15));
color: var(--primary, #40a0ff);
letter-spacing: 0.3px;
flex-shrink: 0;
}
.project-card-time {
font-size: 10px;
color: var(--text3);
flex-shrink: 0;
white-space: nowrap;
}
.project-card-body {
flex: 1;
padding: 6px 14px;
display: flex;
flex-direction: column;
gap: 2px;
overflow: hidden;
}
.project-card-row {
display: flex;
align-items: center;
gap: 4px;
font-size: 11px;
line-height: 1.3;
}
.project-card-label {
color: var(--text3);
flex-shrink: 0;
width: 70px;
text-align: justify;
text-align-last: justify;
text-justify: distribute;
letter-spacing: 0;
line-height: 1.3;
}
.project-card-val { color: var(--text2); }
.project-card-val.file-link {
color: var(--cyan);
cursor: pointer;
text-decoration: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 120px;
}
.project-card-val.file-link:hover { text-decoration: underline; }
.project-card-val.no-file { color: var(--text3); }
.project-card-type-row {
margin: 2px 0;
}
.project-card-type-val {
color: var(--gold);
font-weight: 500;
}
.project-card-summary {
flex: 1;
font-size: 11px;1
color: var(--text2);
line-height: 1.4;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
min-height: 46px;
}
.project-card-summary-label {
color: var(--text);
font-weight: 500;
}
/* 故事简介自定义气泡（替代系统原生 tooltip） */
.summary-bubble-trigger {
cursor: default;
}
.project-summary-bubble {
position: fixed;
z-index: 100000;
min-width: 200px;
max-width: 360px;
max-height: 300px;
overflow-y: auto;
background: linear-gradient(135deg, rgba(20, 24, 40, 0.98), rgba(15, 18, 35, 0.98));
border: 1px solid var(--cyan);
border-radius: 10px;
padding: 12px 14px;
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.6), 0 0 12px rgba(0, 204, 255, 0.15);
pointer-events: auto;
word-break: break-word;
}
.project-summary-bubble-title {
font-size: 11px;
font-weight: 600;
color: var(--cyan);
margin-bottom: 6px;
padding-bottom: 4px;
border-bottom: 1px solid rgba(0, 204, 255, 0.2);
letter-spacing: 1px;
}
.project-summary-bubble-text {
font-size: 12px;
color: var(--text2);
line-height: 1.7;
white-space: pre-wrap;
}
.project-card-models {
display: flex;
justify-content: space-between;
gap: 4px;
margin-top: 2px;
}
.model-badge {
font-size: 10px;
font-weight: 600;
flex: 1;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
cursor: pointer;
border: 1px solid;
transition: opacity 0.2s;
line-height: 1;
letter-spacing: 0.3px;
gap: 1px;
white-space: nowrap;
overflow: hidden;
}
.model-badge .model-badge-label {
font-weight: 700;
}
.model-badge .model-badge-type {
font-weight: 400;
font-size: 8px;
opacity: 0.75;
}
.model-badge:hover { opacity: 0.8; }
.model-badge-on {
background: rgba(0,200,100,0.1);
border-color: #00c864;
color: #00c864;
}
.model-badge-off {
/* 未配置 = 中性灰色（不要红，红色是严重告警色） */
background: rgba(140,140,160,0.12);
border-color: #8a8aa0;
color: #8a8aa0;
}
.project-card-foot {
padding: 6px 14px;
border-top: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: space-between;
flex-shrink: 0;
}
.project-card-status { font-size: 11px; }
/* ═══════════════════════════════════════════════════
性能优化：图片骨架屏 + 淡入动画 + CSS containment
═══════════════════════════════════════════════════ */
/* CSS containment：隔离卡片渲染，减少重排重绘 */
.project-card {
contain: layout style paint;
content-visibility: auto;
contain-intrinsic-size: 200px;
}
/* 图片骨架屏背景 */
.project-card-poster {
position: relative;
background: linear-gradient(110deg, #0a0f1a 8%, #131a2a 18%, #0a0f1a 33%);
background-size: 200% 100%;
animation: skeleton-shimmer 1.5s ease-in-out infinite;
}
@keyframes skeleton-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* 图片淡入动画 */
.project-card-poster img {
opacity: 0;
transition: opacity 0.3s ease-in;
}
.project-card-poster img.img-loaded {
opacity: 1;
}
.project-card-poster img.img-error {
opacity: 0;
}
/* 图片加载完成后停止骨架屏动画 */
.project-card-poster.poster-loaded {
animation: none;
background: #0a0f1a;
}
/* 无限滚动哨兵 */
.infinite-scroll-sentinel {
grid-column: 1 / -1;
height: 1px;
/* 不占视觉空间，仅用于触发加载 */
}
.infinite-scroll-loading {
grid-column: 1 / -1;
text-align: center;
padding: 16px;
color: var(--text3);
font-size: 13px;
}
.infinite-scroll-loading::after {
content: '';
display: inline-block;
width: 14px;
height: 14px;
margin-left: 8px;
border: 2px solid var(--border);
border-top-color: var(--cyan);
border-radius: 50%;
animation: spin 0.8s linear infinite;
vertical-align: middle;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* 文件上传�?*/
.file-upload-row {
display: flex;
align-items: center;
gap: 8px;
flex: 1;
}
.field .file-upload-row #projFileName { flex: 1; }
.file-upload-row .btn { white-space: nowrap; flex-shrink: 0; }
/* 项目弹窗分栏布局 */
.proj-form-row {
display: flex;
gap: 28px;
align-items: stretch;
}
.proj-form-left { flex: 1; display: flex; flex-direction: column; gap: 14px; }
.proj-form-right {
flex-shrink: 0;
width: 260px;
display: flex;
flex-direction: column;
align-items: stretch;
}
.proj-poster-wrap {
width: 100%;
aspect-ratio: 9 / 13;
background: var(--bg-dark);
border: 2px dashed var(--border);
border-radius: 8px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
position: relative;
flex-shrink: 0;
}
.proj-poster-actions {
margin-top: auto;
padding-top: 10px;
}
.proj-poster-actions .btn {
width: 100%;
}
.proj-poster-wrap:hover { border-color: var(--cyan); }
.proj-poster-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
}
.proj-poster-placeholder {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
color: var(--text3);
text-align: center;
pointer-events: none;
}
#btnGenPoster {
width: 100%;
margin-top: 0;
flex-shrink: 0;
}
/* 按钮样式移到�?.poster-preview-actions */
.icon-btn-sm {
width: 28px;
height: 28px;
border-radius: 4px;
border: 1px solid var(--border);
background: var(--bg-dark);
color: var(--text);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
text-decoration: none;
}
.icon-btn-sm:hover { border-color: var(--cyan); color: var(--cyan); }
.icon-btn-sm.icon-btn-del:hover { border-color: var(--red); color: var(--red); }
/* 海报预览弹窗 */
.poster-preview-box {
position: relative;
max-width: 80vw;
max-height: 85vh;
}
.poster-preview-box img {
max-width: 80vw;
max-height: 85vh;
object-fit: contain;
border-radius: 8px;
box-shadow: 0 8px 40px rgba(0,0,0,0.6);
}
.poster-preview-close {
position: absolute;
top: -12px;
right: -12px;
width: 32px;
height: 32px;
border-radius: 50%;
border: 2px solid var(--red);
background: var(--bg-panel);
color: var(--red);
font-size: 16px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.poster-preview-close:hover { background: var(--red); color: #fff; }
.poster-preview-actions {
position: absolute;
bottom: -44px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 6px;
}
/* 删除确认密码弹窗 */
.delete-pwd-box {
background: var(--bg-panel);
border: 1px solid var(--cyan);
border-radius: 8px;
padding: 24px;
width: 360px;
box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}
.delete-pwd-box h3 {
margin: 0 0 8px;
color: var(--red);
font-size: 16px;
}
.delete-pwd-err {
color: var(--red);
font-size: 12px;
margin-top: 6px;
}
.delete-pwd-btns {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-top: 16px;
}
/* 确保 .req * 内联 */
.req { color: var(--red); font-weight: bold; display: inline; }
/* ══════�?模型配置�?══════�?*/
.settings-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.setting-card {
background: var(--bg-panel);
border: 1px solid var(--border);
border-radius: 8px;
overflow: hidden;
}
.setting-card-head {
padding: 12px 16px;
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
gap: 12px;
}
.setting-card-title { font-size: 14px; font-weight: 600; }
.setting-card-desc { color: var(--text3); font-size: 12px; flex: 1; }
.provider-badge {
flex-shrink: 0;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--bg-dark);
border: 2px solid var(--cyan);
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
color: var(--cyan);
letter-spacing: 0.5px;
}
.setting-card-body {
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 10px;
}
.setting-row {
display: flex;
align-items: center;
gap: 8px;
}
.setting-label {
font-size: 12px;
color: var(--text2);
flex-shrink: 0;
width: 56px;
}
.setting-select {
padding: 6px 10px;
background: var(--bg-dark);
border: 1px solid var(--border);
border-radius: 4px;
color: var(--text);
font-size: 12px;
outline: none;
font-family: inherit;
flex: 1;
max-width: 360px;
}
.setting-select:focus { border-color: var(--cyan); }
.setting-select option {
background: var(--bg-panel);
color: var(--text);
}
.setting-input {
padding: 6px 10px;
background: var(--bg-dark);
border: 1px solid var(--border);
border-radius: 4px;
color: var(--text);
font-size: 12px;
outline: none;
font-family: inherit;
flex: 1;
max-width: 360px;
}
.setting-input:focus { border-color: var(--cyan); }
.setting-input::placeholder { color: var(--text3); }
.setting-status {
font-size: 12px;
margin-left: 4px;
}
/* ══════�?项目工作�?══════�?*/
.page-workspace {
padding: 0 24px;
}
.ws-topbar {
display: flex;
align-items: center;
gap: 16px;
padding: 16px 0;
border-bottom: 1px solid var(--border);
}
.ws-back {
color: var(--cyan);
text-decoration: none;
font-size: 13px;
}
.ws-back:hover { text-decoration: underline; }
.ws-topbar-toggle {
width: 28px;
height: 28px;
border: 1px solid var(--cyan);
background: rgba(0, 255, 255, 0.1);
color: var(--cyan);
border-radius: 4px;
cursor: pointer;
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
margin-left: auto;
transition: all 0.2s;
}
.ws-topbar-toggle:hover {
color: var(--text1);
border-color: var(--cyan);
background: rgba(0, 255, 255, 0.2);
}
.ws-title {
font-size: 18px;
font-weight: 600;
color: var(--text);
}
.ws-content {
margin-top: 20px;
}
/* 项目筹备横条 */
.ws-section-bar {
display: flex;
align-items: center;
justify-content: space-between;
background: var(--bg-panel);
border: 1px solid var(--border);
border-radius: 8px 8px 0 0;
padding: 10px 16px;
}
.ws-section-bar-title {
font-size: 16px;
font-weight: 600;
color: var(--cyan);
white-space: nowrap;
}
/* 筹备标题栏信息条：项目编号/名称/影视类型 */
.ws-section-bar-meta {
font-size: 12px;
color: var(--text2);
display: inline-flex;
align-items: center;
gap: 8px;
margin-left: 14px;
margin-right: auto; /* 吸收剩余空间，信息条紧跟标题、右侧按钮组保持靠右 */
padding: 3px 10px;
background: rgba(0, 0, 0, 0.25);
border: 1px solid var(--border);
border-radius: 10px;
flex-wrap: wrap; /* 允许折行，避免文字被硬切断 */
min-width: 0; /* flex 子项不撑爆父容器 */
}
.ws-section-bar-meta .ws-bar-meta-sep {
color: var(--text3);
margin: 0 2px;
}
.ws-section-bar-title-group {
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--cyan);
}
.ws-section-bar-title-group .ws-section-count {
font-size: 12px;
color: inherit;
font-weight: normal;
}
.ws-lock-status {
font-size: 12px;
color: var(--red);
/* ★ 固定宽度隔离 (锁定)/(未锁定) 的文字长度差异 — 保证前面播放按钮位置稳定 */
display: inline-block;
min-width: 60px;
text-align: right;
}
.ws-lock-status.locked {
color: var(--green);
}
.ws-section-bar-right {
display: flex;
align-items: center;
gap: 6px;
}
/* ★ 2026-09-27 修复：分镜准备工具条条目过多时，flex-shrink 会把按钮压成竖排窄条，
导致「🎞️ 连续播放」等按钮看似消失 → 允许折行 + 禁止压缩 + 文字禁止换行 */
#wsShotSection .ws-section-bar-right {
flex-wrap: wrap;
justify-content: flex-end;
row-gap: 6px;
}
#wsShotSection .ws-section-bar-right > * {
flex-shrink: 0;
}
#wsShotSection .ws-generate-ref-btn,
#wsShotSection .ws-batch-btn {
white-space: nowrap;
}
.ws-batch-generate-btn {
padding: 4px 12px;
border: 1px solid var(--green);
background: rgba(0, 204, 102, 0.1);
color: var(--green);
border-radius: 4px;
cursor: pointer;
font-size: 12px;
transition: all 0.2s;
margin-right: 4px;
}
.ws-batch-generate-btn:hover {
background: rgba(0, 204, 102, 0.2);
box-shadow: 0 0 8px rgba(0, 204, 102, 0.3);
}
.ws-batch-select-btn {
padding: 4px 12px;
border: 1px solid var(--blue);
background: rgba(0, 153, 255, 0.1);
color: var(--blue);
border-radius: 4px;
cursor: pointer;
font-size: 12px;
transition: all 0.2s;
margin-right: 4px;
}
.ws-batch-select-btn:hover {
background: rgba(0, 153, 255, 0.2);
box-shadow: 0 0 8px rgba(0, 153, 255, 0.3);
}
.ws-batch-generate-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.ws-batch-generate-btn.ws-generating {
background: linear-gradient(135deg, #00ff88, #00cc6a);
color: #000;
animation: pulse-green 1s ease-in-out infinite;
}
@keyframes pulse-green {
0%, 100% {
box-shadow: 0 0 0 0 rgba(0, 255, 136, 0.7);
}
50% {
box-shadow: 0 0 0 8px rgba(0, 255, 136, 0);
}
}
.ws-lock-btn {
width: 28px;
height: 28px;
border: 1px solid rgba(255, 85, 85, 0.5);
background: rgba(255, 85, 85, 0.2);
color: #ff5555;
border-radius: 4px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.ws-lock-btn:hover {
color: var(--cyan);
border-color: var(--cyan);
}
.ws-lock-btn.locked,
.ws-lock-btn.ws-locked {
background: rgba(0, 204, 102, 0.2);
color: #00cc66;
border-color: rgba(0, 204, 102, 0.5);
}
.ws-lock-btn.ws-lock-disabled {
opacity: 0.4;
cursor: not-allowed;
pointer-events: none;
}
.ws-lock-btn.ws-lock-green {
background: rgba(0, 204, 102, 0.2);
color: #00cc66;
border-color: rgba(0, 204, 102, 0.5);
}
.ws-lock-btn.ws-lock-red {
border: 1px solid rgba(255, 85, 85, 0.5);
background: rgba(255, 85, 85, 0.2);
color: #ff5555;
}
.ws-batch-btn {
padding: 4px 10px;
border: 1px solid var(--border);
background: var(--bg-dark);
color: var(--text3);
border-radius: 4px;
font-size: 12px;
cursor: pointer;
margin-right: 6px;
transition: all 0.2s;
}
.ws-batch-btn:hover {
color: var(--green);
border-color: var(--green);
background: rgba(0, 204, 102, 0.1);
}
.ws-batch-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
#wsPropAnalyze {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
color: white !important;
font-weight: bold !important;
border-color: transparent !important;
}
#wsPropAnalyze:hover {
opacity: 0.9;
}
.ws-arrow-btn {
width: 28px;
height: 28px;
border: 1px solid var(--border);
background: var(--bg-dark);
color: var(--text3);
border-radius: 4px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
transition: color 0.2s, border-color 0.2s;
}
.ws-arrow-btn:hover {
color: var(--cyan);
border-color: var(--cyan);
}
.ws-character-locked .ws-character-image-input {
display: none !important;
}
/* 工作条按钮只看锁定状态：锁定才隐藏（不再随折叠态隐藏） */
.ws-character-section.ws-section-locked .ws-batch-generate-btn,
.ws-character-section.ws-section-locked .ws-batch-select-btn {
display: none !important;
}
.ws-character-section.ws-section-locked #wsGenerateCharDescBtn {
display: none !important;
}
.ws-batch-progress {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.9);
border: 1px solid var(--green);
border-radius: 8px;
padding: 12px 20px;
z-index: 1000;
min-width: 300px;
animation: pulse-green 1s ease-in-out infinite;
}
.ws-batch-progress-bar {
width: 100%;
height: 6px;
background: rgba(255, 255, 255, 0.2);
border-radius: 3px;
overflow: hidden;
margin-bottom: 8px;
}
.ws-batch-progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--green), #00ff88);
border-radius: 3px;
transition: width 0.3s ease;
}
.ws-batch-progress-text {
color: var(--green);
font-size: 12px;
text-align: center;
}
.ws-prop-count {
font-size: 12px;
color: var(--text-muted);
font-weight: normal;
}
.ws-prop-section {
margin-top: 8px;
}
.ws-prop-area {
max-height: calc(100vh - 200px);
overflow: auto;
padding: 16px;
border: 1px solid var(--border);
border-radius: 0 0 8px 8px;
}
.ws-prop-locked button:not(.ws-download-btn):not(.ws-export-btn),
.ws-prop-locked input,
.ws-prop-locked textarea,
.ws-prop-locked select {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
.ws-layout-section {
margin-top: 8px;
}
.ws-layout-area {
max-height: calc(100vh - 200px);
overflow: auto;
padding: 16px;
border: 1px solid var(--border);
border-radius: 0 0 8px 8px;
}
.ws-layout-empty {
text-align: center;
color: var(--text3);
padding: 40px;
font-style: italic;
}
.ws-shot-section {
margin-top: 8px;
}
.ws-cutpro-subsection {
margin-top: 12px;
padding: 8px;
background: rgba(0,0,0,0.2);
border: 1px dashed rgba(255,255,255,0.15);
border-radius: 8px;
overflow: visible;
}
.ws-cutpro-subsection .ws-section-bar {
background: linear-gradient(90deg, rgba(57,255,20,0.15), rgba(157,78,221,0.15));
}
.ws-shot-area {
max-height: none;
overflow-x: auto;
overflow-y: visible;
padding: 16px;
border: 1px solid var(--border);
border-radius: 0 0 8px 8px;
}
.ws-shot-grid {
display: flex;
flex-wrap: nowrap;
gap: 12px;
height: auto;
min-height: 400px;
min-width: 900px;
position: relative;
align-items: flex-start;
}
/* 三列容器：左、中、右，均匀分布 */
.ws-shot-col {
display: flex;
flex-direction: column;
gap: 12px;
min-height: 100%;
min-width: 0;
overflow: hidden;
flex: 1 1 0;
}
.ws-shot-col-left {
flex: 1 1 0;
min-width: 200px;
}
.ws-shot-col-mid {
flex: 1 1 0;
min-width: 200px;
gap: 8px;
}
.ws-shot-col-right {
flex: 1.8 1 0;
min-width: 380px;
}
/* 列内面板自适应宽度 */
.ws-shot-col > .ws-shot-panel {
width: 100%;
min-width: 0;
}
/* 左侧列：分场目录和分镜目录并排，分镜剧本在下面 */
.ws-shot-col-left > .ws-shot-dir-row {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
gap: 8px;
flex: 0 0 auto;
width: 100%;
}
.ws-shot-col-left > .ws-shot-dir-row > .ws-shot-panel {
width: auto !important;
min-width: 0;
flex: 1 1 0;
}
.ws-shot-col-left > .ws-shot-dir-row > #wsScenePanel {
flex: 0 0 50% !important;
}
.ws-shot-col-left > .ws-shot-dir-row > #wsShotPanel {
flex: 1 1 50% !important;
}
.ws-shot-col-left > #wsScriptPanel {
flex: 1 1 auto;
min-height: 200px;
}
/* 中间列：分镜项目不填充整个列高度，按内容自适应 */
.ws-shot-col-mid > #wsProjectPanel {
flex: 0 0 auto;
min-height: 300px;
}
/* 右侧列：视频拍摄准备区和视频生成区 */
.ws-shot-col-right > #wsVideoPanel {
flex: 0 0 auto;
min-height: 120px;
}
.ws-shot-col-right > #wsVideoGenPanel {
flex: 0 0 auto;
min-height: 400px;
}
/* 分镜剧本收拢后：绝对定位到分场+分镜目录头部正下方 */
.ws-shot-panel#wsScriptPanel.ws-panel-collapsed.ws-script-below {
width: auto;
min-width: 0;
max-width: none;
height: auto;
min-height: 0;
position: absolute;
left: 0;
z-index: 10;
box-sizing: border-box;
}
.ws-shot-panel#wsScriptPanel.ws-panel-collapsed.ws-script-below .ws-shot-panel-header {
padding: 8px 12px;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 6px;
min-height: 0;
height: auto;
}
.ws-shot-panel#wsScriptPanel.ws-panel-collapsed.ws-script-below .ws-panel-title {
writing-mode: initial;
text-orientation: initial;
font-size: 13px;
letter-spacing: 0;
display: inline-block;
flex: 1 1 auto;
text-align: left;
color: var(--cyan);
}
.ws-shot-panel#wsScriptPanel.ws-panel-collapsed.ws-script-below .ws-panel-icon {
display: inline-block;
font-size: 14px;
}
/* 分镜剧本收拢态 */
.ws-shot-panel#wsScriptPanel.ws-panel-collapsed .ws-shot-panel-content,
.ws-shot-panel#wsScriptPanel.ws-panel-collapsed .ws-shot-panel-content.ws-panel-content-hidden {
display: block !important;
visibility: visible !important;
height: calc(100% - 45px) !important;
max-height: calc(100% - 45px) !important;
min-height: 0 !important;
overflow-y: auto !important;
padding: 8px 12px;
font-size: 12px;
line-height: 1.55;
color: var(--text2);
background: rgba(255,255,255,0.02);
border-top: 1px solid var(--border);
flex: 1 1 auto;
}
/* 基础面板样式 */
.ws-shot-panel {
background: rgba(0, 0, 0, 0.1);
border: 1px solid var(--border);
border-radius: 8px;
display: flex;
flex-direction: column;
overflow: hidden;
}
/* 默认强制所有面板展开（覆盖ws-panel-collapsed的收拢效果） */
.ws-shot-panel.ws-panel-collapsed {
width: auto !important;
min-width: 0 !important;
max-width: none !important;
flex: 1 1 auto !important;
}
.ws-shot-panel.ws-panel-collapsed .ws-shot-panel-content {
display: flex !important;
}
.ws-shot-panel.ws-panel-collapsed .ws-shot-panel-content.ws-panel-content-hidden {
display: flex !important;
}
/* 视频生成区内容区样式 - 不再压缩，保持合理尺寸 */
.ws-video-gen-fixed .ws-shot-panel-content {
resize: none !important;
overflow: visible !important;
flex: 1 1 auto !important;
padding: 8px !important;
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
max-height: none !important;
}
.ws-video-gen-fixed .ws-video-gen-split {
height: 100% !important;
gap: 8px !important;
}
.ws-video-gen-fixed .ws-video-gen-top {
flex: 0 0 auto !important;
}
.ws-video-gen-fixed .ws-video-gen-bottom {
flex: 1 1 auto !important;
margin-top: 4px;
min-height: 300px;
}
.ws-video-gen-fixed .ws-video-frames-row {
flex: 0 0 auto !important;
margin-bottom: 8px !important;
}
.ws-video-gen-fixed .ws-video-frame-cell .ws-frame-card,
.ws-video-gen-fixed .ws-video-frame-cell .ws-video-image-box,
.ws-video-gen-fixed .ws-video-frame-cell img.ws-video-character-img {
width: 100% !important;
height: 100px !important;
object-fit: contain !important;
}
.ws-video-gen-fixed .ws-video-frame-cell {
flex: 1 1 calc(50% - 4px) !important;
min-width: 0 !important;
}
.ws-video-gen-fixed .ws-video-frames-row {
width: 100% !important;
justify-content: stretch !important;
box-sizing: border-box !important;
padding: 6px !important;
}
.ws-video-gen-fixed .ws-video-player-wrapper {
flex: 0 0 auto !important;
padding: 0 !important;
}
.ws-video-gen-fixed .ws-video-player {
resize: none !important;
min-height: auto !important;
max-height: none !important;
height: auto !important;
}
.ws-video-gen-fixed .ws-video-element {
max-height: 200px !important;
height: auto !important;
width: 100% !important;
object-fit: contain !important;
}
.ws-video-gen-fixed .ws-video-controls-bar {
flex: 0 0 auto !important;
}
.ws-video-gen-fixed .ws-video-list {
max-height: 200px !important;
overflow: auto !important;
}
.ws-video-gen-fixed .ws-video-list-item {
flex: 0 0 auto !important;
}
.ws-shot-panel-header {
padding: 10px 12px;
background: var(--bg-panel);
border-bottom: 1px solid var(--border);
font-size: 13px;
font-weight: 500;
color: var(--cyan);
display: flex;
justify-content: space-between;
align-items: center;
gap: 6px;
}
.ws-panel-icon {
font-size: 14px;
}
.ws-panel-title {
flex: 1;
text-align: left;
}
/* 🌐 公网状态指示器 */
.ws-net-indicator {
position: relative;
display: inline-flex;
align-items: center;
gap: 2px;
margin-left: 4px;
cursor: help;
padding: 2px 6px;
border-radius: 10px;
font-size: 11px;
font-weight: 500;
transition: all 0.2s;
user-select: none;
}
.ws-net-globe {
font-size: 13px;
line-height: 1;
}
.ws-net-dot {
width: 7px;
height: 7px;
border-radius: 50%;
display: inline-block;
box-shadow: 0 0 0 1px rgba(255,255,255,0.3);
}
.ws-net-dot-checking {
background: #f5a623;
animation: wsNetPulse 1s infinite;
}
.ws-net-dot-online {
background: #22c55e;
box-shadow: 0 0 6px #22c55e88;
}
.ws-net-dot-offline {
background: #ef4444;
box-shadow: 0 0 6px #ef444488;
}
@keyframes wsNetPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
.ws-panel-collapse-btn {
background: transparent;
border: none;
color: var(--text3);
font-size: 12px;
cursor: pointer;
padding: 2px 6px;
border-radius: 3px;
transition: all 0.2s;
}
.ws-panel-collapse-btn:hover {
background: rgba(0, 0, 0, 0.3);
color: var(--cyan);
}
.ws-shot-panel.ws-panel-collapsed {
width: auto !important;
min-width: 0 !important;
max-width: none !important;
flex: 1 1 auto !important;
}
/* 视频拍摄准备区收拢后：不再压缩，保持展开状态 */
.ws-shot-panel#wsVideoPanel.ws-panel-collapsed {
width: auto !important;
min-width: 0 !important;
max-width: none !important;
flex: 1 1 auto !important;
height: auto !important;
min-height: 0 !important;
}
.ws-shot-panel#wsVideoPanel.ws-panel-collapsed .ws-shot-panel-header {
padding: 6px 10px !important;
flex-direction: row !important;
justify-content: flex-start !important;
align-items: center !important;
gap: 8px !important;
min-height: 0 !important;
height: auto !important;
flex-wrap: nowrap !important;
}
.ws-shot-panel#wsVideoPanel.ws-panel-collapsed .ws-panel-title {
writing-mode: initial !important;
text-orientation: initial !important;
font-size: 13px !important;
letter-spacing: 0 !important;
display: inline-block !important;
flex: 0 0 auto !important;
text-align: left !important;
white-space: nowrap !important;
}
.ws-shot-panel#wsVideoPanel.ws-panel-collapsed .ws-panel-icon {
display: inline-block !important;
font-size: 14px !important;
flex-shrink: 0;
}
.ws-shot-panel#wsVideoPanel.ws-panel-collapsed .ws-panel-collapse-btn {
font-size: 12px !important;
padding: 2px 6px !important;
transform: none !important;
flex-shrink: 0;
}
/* 收拢隐藏内容区，整行只留头部(含灯条) */
.ws-shot-panel#wsVideoPanel.ws-panel-collapsed .ws-shot-panel-content {
display: none !important;
}
/* 五盏灯在头部里右侧，横向排列 */
.ws-shot-panel#wsVideoPanel.ws-panel-collapsed .ws-video-ready-lights {
display: flex !important;
flex-direction: row !important;
justify-content: flex-start !important;
align-items: center !important;
gap: 10px !important;
padding: 0 4px !important;
flex-wrap: nowrap !important;
width: auto !important;
box-sizing: border-box !important;
margin-left: auto !important;
flex: 0 0 auto !important;
}
.ws-shot-panel#wsVideoPanel.ws-panel-collapsed .ws-video-ready-light-wrap {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 2px !important;
flex: 0 0 auto !important;
}
.ws-shot-panel#wsVideoPanel.ws-panel-collapsed .ws-video-ready-light {
width: 38px !important;
height: 38px !important;
font-size: 14px !important;
font-weight: 800 !important;
border-width: 2px !important;
}
.ws-shot-panel#wsVideoPanel.ws-panel-collapsed .ws-video-ready-light-name {
font-size: 10px !important;
}
/* 灯光圈发光加粗匹配截图效果 */
.ws-video-ready-light.ws-ready-yes {
border-color: #00cc66 !important;
background: rgba(0, 40, 20, 0.55) !important;
color: #33ff99 !important;
box-shadow: 0 0 16px rgba(0, 255, 150, 0.85), 0 0 28px rgba(0, 204, 102, 0.45), inset 0 0 10px rgba(0, 255, 150, 0.5) !important;
}
.ws-video-ready-light.ws-ready-no {
border-color: #e64545 !important;
background: rgba(50, 10, 10, 0.55) !important;
color: #ff7070 !important;
box-shadow: 0 0 16px rgba(255, 90, 90, 0.8), 0 0 28px rgba(230, 69, 69, 0.4), inset 0 0 10px rgba(255, 90, 90, 0.45) !important;
}
.ws-shot-panel.ws-panel-collapsed .ws-shot-panel-header {
padding: 8px 2px;
flex-direction: column;
justify-content: flex-start;
align-items: center;
gap: 4px;
min-height: 120px;
}
.ws-shot-panel.ws-panel-collapsed .ws-panel-title {
display: block;
writing-mode: vertical-rl;
text-orientation: mixed;
font-size: 10px;
color: var(--text2);
white-space: nowrap;
letter-spacing: 2px;
}
.ws-shot-panel.ws-panel-collapsed .ws-shot-project-stats {
display: none;
}
.ws-shot-panel.ws-panel-collapsed .ws-panel-icon {
display: block;
font-size: 16px;
}
.ws-shot-panel.ws-panel-collapsed .ws-panel-collapse-btn {
transform: none;
font-size: 14px;
padding: 4px 6px;
cursor: pointer;
color: var(--cyan);
opacity: 1;
}
.ws-shot-panel.ws-panel-collapsed .ws-panel-collapse-btn:hover {
background: rgba(0, 204, 255, 0.2);
color: var(--cyan);
}
/* ===== 防御性样式：非折叠状态下，强制横排显示（防止 collapsed 类被误加时的样式泄漏） ===== */
.ws-shot-panel:not(.ws-panel-collapsed) .ws-shot-panel-header {
flex-direction: row !important;
min-height: 0 !important;
padding: 10px 12px !important;
justify-content: space-between !important;
align-items: center !important;
gap: 6px !important;
}
.ws-shot-panel:not(.ws-panel-collapsed) .ws-panel-title {
writing-mode: initial !important;
text-orientation: initial !important;
font-size: 13px !important;
letter-spacing: 0 !important;
display: inline-block !important;
flex: 1 1 auto !important;
text-align: left !important;
white-space: normal !important;
color: var(--cyan) !important;
}
.ws-shot-panel:not(.ws-panel-collapsed) .ws-panel-icon {
display: inline-block !important;
font-size: 14px !important;
}
.ws-shot-panel:not(.ws-panel-collapsed) .ws-shot-panel-content,
.ws-shot-panel-content,
.ws-shot-project-area,
.ws-shot-project-area-header,
.ws-shot-project-area-content,
.ws-generate-ref-btn,
.ws-video-gen-btn,
.ws-video-gen-split,
.ws-video-gen-top,
.ws-video-gen-bottom {
writing-mode: horizontal-tb !important;
}
.ws-shot-panel.ws-panel-collapsed .ws-shot-panel-content.ws-panel-content-hidden {
display: block !important;
}
/* 折叠状态下，内容区保持可见（默认展开策略） */
.ws-shot-panel.ws-panel-collapsed .ws-shot-panel-content {
display: block !important;
}
/* 例外：分镜剧本收拢到分场/分镜头部下方时，内容区保持可见 */
.ws-shot-panel#wsScriptPanel.ws-panel-collapsed.ws-script-below .ws-shot-panel-content,
.ws-shot-panel#wsScriptPanel.ws-panel-collapsed.ws-script-below .ws-shot-panel-content.ws-panel-content-hidden {
display: block !important;
}
/* ===== 分镜项目区（wsProjectPanel）始终保持展开：CSS 兜底 + 隐藏折叠按钮 ===== */
/* 即使被误加 ws-panel-collapsed 类，也强制恢复为展开的正常宽度与横排样式 */
.ws-shot-panel#wsProjectPanel,
.ws-shot-panel#wsProjectPanel.ws-panel-collapsed {
width: auto !important;
min-width: 0 !important;
max-width: none !important;
flex: 1 1 auto !important;
}
.ws-shot-panel#wsProjectPanel .ws-shot-panel-header,
.ws-shot-panel#wsProjectPanel.ws-panel-collapsed .ws-shot-panel-header {
flex-direction: row !important;
min-height: 0 !important;
padding: 10px 12px !important;
justify-content: space-between !important;
align-items: center !important;
gap: 6px !important;
}
.ws-shot-panel#wsProjectPanel .ws-panel-title,
.ws-shot-panel#wsProjectPanel.ws-panel-collapsed .ws-panel-title {
writing-mode: initial !important;
text-orientation: initial !important;
font-size: 13px !important;
letter-spacing: 0 !important;
display: inline-block !important;
flex: 1 1 auto !important;
text-align: left !important;
white-space: normal !important;
color: var(--cyan) !important;
}
.ws-shot-panel#wsProjectPanel .ws-shot-panel-content,
.ws-shot-panel#wsProjectPanel.ws-panel-collapsed .ws-shot-panel-content,
.ws-shot-panel#wsProjectPanel .ws-shot-panel-content.ws-panel-content-hidden,
.ws-shot-panel#wsProjectPanel.ws-panel-collapsed .ws-shot-panel-content.ws-panel-content-hidden {
display: block !important;
}
/* 隐藏分镜项目区的折叠按钮，避免用户点击产生困惑（因为禁止折叠） */
.ws-shot-panel#wsProjectPanel .ws-panel-collapse-btn,
#wsProjectCollapseBtn {
display: none !important;
}
.ws-panel-content-hidden {
display: none;
}
.ws-video-grid {
display: flex;
flex-direction: column;
gap: 8px;
flex: 1 1 auto;
min-height: 0;
}
.ws-audience-section {
display: flex;
flex-direction: column;
gap: 4px;
}
.ws-video-section.ws-video-row {
flex-direction: row;
}
.ws-video-section {
flex: 0 0 auto;
}
.ws-video-subsection {
flex: 1;
background: rgba(0, 0, 0, 0.15);
border-radius: 6px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.ws-video-subsection-full {
background: rgba(0, 0, 0, 0.15);
border-radius: 6px;
overflow: hidden;
display: flex;
flex-direction: column;
}
/* 角色参考图双格布局（主图 + 原图占位符） */
.ws-video-char-dual {
display: flex;
flex-direction: row;
gap: 14px;
align-items: flex-start;
justify-content: center;
width: 100%;
flex-wrap: wrap;
}
.ws-video-char-cell {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 4px;
flex: 0 0 auto;
min-width: 160px;
}
.ws-video-char-cell .ws-video-image-box,
.ws-video-char-cell img.ws-video-character-img {
width: 150px !important;
height: 150px !important;
}
/* 占位符：醒目虚线青色轮廓 + 45°斜纹底 + 双层图形占位符号（视觉锚） */
.ws-video-image-box.ws-char-slot {
border: 2.5px dashed #22d3ee !important;
background:
repeating-linear-gradient(45deg, rgba(34,211,238,0.05) 0 8px, transparent 8px 16px),
var(--bg-dark);
color: var(--cyan);
position: relative;
flex-direction: column;
padding: 8px;
gap: 4px;
}
.ws-video-image-box.ws-char-slot::before {
content: "";
position: absolute;
inset: 4px;
border: 1px dashed rgba(34,211,238,0.35);
border-radius: 6px;
pointer-events: none;
}
.ws-video-image-box.ws-char-slot .ws-char-slot-symbol {
font-size: 56px;
line-height: 1;
text-shadow: 0 0 10px rgba(34,211,238,0.55);
filter: drop-shadow(0 2px 3px rgba(0,0,0,0.5));
}
.ws-video-image-box.ws-char-slot .ws-char-slot-caption {
font-size: 10px;
color: var(--cyan);
letter-spacing: 2px;
font-weight: 600;
}
.ws-video-image-box.ws-char-slot:hover {
border-color: #fff !important;
background:
repeating-linear-gradient(45deg, rgba(34,211,238,0.12) 0 8px, transparent 8px 16px),
rgba(0, 204, 255, 0.15);
}
.ws-video-image-label.ws-char-main-label,
.ws-video-image-label.ws-char-slot-label,
.ws-video-image-label.ws-char-orig-label {
margin-top: 4px !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 160px;
}
.ws-video-image-label.ws-char-slot-label {
color: var(--cyan) !important;
font-weight: 600;
}
.ws-video-image-label.ws-char-orig-label {
color: #9ae6b4 !important;
}
/* 固定分镜面板双格布局不被拉伸变形（保持占位符/主图 150 等大） */
.ws-shot-panel.ws-video-gen-fixed .ws-video-char-cell .ws-video-image-box,
.ws-shot-panel.ws-video-gen-fixed .ws-video-char-cell img.ws-video-character-img {
width: 150px !important;
height: 150px !important;
object-fit: contain !important;
}
.ws-shot-panel.ws-video-gen-fixed .ws-video-char-dual {
align-items: flex-start !important;
justify-content: center !important;
}
.ws-video-subheader {
padding: 3px 6px;
background: rgba(0, 0, 0, 0.2);
font-size: 11px;
font-weight: 500;
color: var(--cyan);
border-bottom: 1px solid var(--border);
display: flex;
justify-content: space-between;
align-items: center;
}
.ws-video-subheader-next {
margin-top: 0 !important;
border-top: none;
padding-top: 4px;
padding-bottom: 4px;
}
.ws-video-toggle-label {
font-size: 11px;
color: var(--text2);
margin-left: 8px;
margin-right: 4px;
}
.ws-video-toggle-switch {
position: relative;
display: inline-block;
width: 36px;
height: 20px;
vertical-align: middle;
}
.ws-video-toggle-switch input {
opacity: 0;
width: 0;
height: 0;
}
.ws-video-toggle-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #444;
transition: 0.3s;
border-radius: 20px;
}
.ws-video-toggle-slider:before {
position: absolute;
content: "";
height: 16px;
width: 16px;
left: 2px;
bottom: 2px;
background-color: white;
transition: 0.3s;
border-radius: 50%;
}
.ws-video-toggle-switch input:checked + .ws-video-toggle-slider {
background-color: var(--cyan);
}
.ws-video-toggle-switch input:checked + .ws-video-toggle-slider:before {
transform: translateX(16px);
}
.ws-sort-toggle-label {
display: flex;
align-items: center;
gap: 6px;
cursor: pointer;
user-select: none;
}
.ws-sort-toggle {
opacity: 0;
width: 0;
height: 0;
position: absolute;
}
.ws-sort-toggle-slider {
position: relative;
display: inline-block;
width: 36px;
height: 20px;
background-color: #444;
transition: 0.3s;
border-radius: 20px;
cursor: pointer;
}
.ws-sort-toggle-slider:before {
position: absolute;
content: "";
height: 16px;
width: 16px;
left: 2px;
bottom: 2px;
background-color: white;
transition: 0.3s;
border-radius: 50%;
}
.ws-sort-toggle:checked + .ws-sort-toggle-slider {
background-color: var(--cyan);
}
.ws-sort-toggle:checked + .ws-sort-toggle-slider:before {
transform: translateX(16px);
}
.ws-shooting-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 15px;
background: rgba(0, 30, 60, 0.9);
border: 1px solid var(--border);
border-radius: 8px;
margin-bottom: 12px;
}
/* 剧本评估报告区域样式 */
.ws-script-eval-section {
padding: 0;
overflow: hidden;
width: 100%;
margin-left: -12px;
margin-right: -12px;
margin-bottom: -12px;
}
.ws-script-eval-tabs {
display: flex;
border-bottom: 1px solid var(--border);
background: rgba(0, 30, 60, 0.5);
}
.ws-eval-tab {
flex: 1;
padding: 10px 16px;
background: transparent;
border: none;
color: var(--text2);
font-size: 13px;
font-weight: 500;
cursor: pointer;
border-bottom: 2px solid transparent;
transition: all 0.2s;
}
.ws-eval-tab:hover {
color: var(--text1);
background: rgba(255, 255, 255, 0.05);
}
.ws-eval-tab.active {
color: var(--gold);
border-bottom-color: var(--gold);
background: rgba(255, 215, 0, 0.1);
}
/* 标签页生成状态指示器 */
.ws-eval-tab.tab-generating {
color: var(--cyan);
position: relative;
}
.ws-eval-tab.tab-generating::before {
content: '⏳';
margin-right: 4px;
animation: spin 2s linear infinite;
display: inline-block;
}
.ws-eval-tab.tab-generating::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2px;
background: var(--cyan);
animation: progress-bar 1.5s ease-in-out infinite;
}
.ws-eval-tab.tab-done {
color: var(--green);
position: relative;
}
.ws-eval-tab.tab-done::before {
content: '✅';
margin-right: 4px;
}
.ws-eval-tab.tab-failed {
color: var(--red);
position: relative;
}
.ws-eval-tab.tab-failed::before {
content: '❌';
margin-right: 4px;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes progress-bar {
0%, 100% { opacity: 0.3; transform: scaleX(0.3); }
50% { opacity: 1; transform: scaleX(1); }
}
/* 评估报告图片选择器 */
.ws-eval-title-row {
margin-bottom: 8px;
display: flex;
align-items: center;
justify-content: space-between;
}
.ws-eval-collapse-btn {
background: transparent;
border: 1px solid var(--border);
color: var(--text2);
width: 26px;
height: 26px;
border-radius: 4px;
cursor: pointer;
font-size: 13px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
padding: 0;
line-height: 1;
}
.ws-eval-collapse-btn:hover {
border-color: var(--gold);
color: var(--gold);
}
/* 收起状态：仅隐藏报告内容区，整体下边缘贴近图片按钮区下边缘 */
.ws-shooting-script.ws-eval-collapsed .ws-script-eval-section {
display: none !important;
}
.ws-shooting-script.ws-eval-collapsed {
min-height: 0 !important;
}
.ws-shooting-script.ws-eval-collapsed .ws-eval-controls-row {
margin-bottom: 0 !important;
}
.ws-eval-controls-row {
display: flex !important;
align-items: flex-start;
gap: 12px;
}
.ws-eval-controls-row .ws-generate-btn {
flex-shrink: 0;
}
.ws-eval-controls-row .ws-script-eval-image-tabs {
flex: 1;
min-width: 0;
}
/* 正方形评估按钮 */
.ws-eval-square-btn {
flex-shrink: 0;
align-self: stretch;
border: 2px solid var(--gold);
border-radius: 8px;
background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 165, 0, 0.1));
color: var(--gold);
font-size: 14px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s;
display: flex;
align-items: center;
justify-content: center;
padding: 4px;
}
.ws-eval-square-btn:hover:not(:disabled) {
background: linear-gradient(135deg, rgba(255, 215, 0, 0.3), rgba(255, 165, 0, 0.2));
box-shadow: 0 0 12px rgba(255, 215, 0, 0.3);
transform: translateY(-1px);
}
.ws-eval-square-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.ws-eval-square-btn span.ws-eval-btn-text {
letter-spacing: 1px;
line-height: 1.3;
font-size: 13px;
text-align: center;
display: inline-block;
}
/* 图片下方文字+箭头按钮行 */
.ws-eval-image-bottom {
display: flex;
align-items: stretch;
}
.ws-eval-image-bottom .ws-eval-image-label {
flex: 1;
}
/* 每个图片的向右箭头按钮（生成该图片对应报告） */
.ws-eval-image-arrow {
flex-shrink: 0;
border: none;
border-left: 1px solid var(--border);
border-radius: 0;
background: rgba(0, 30, 60, 0.6);
color: var(--cyan);
cursor: pointer;
font-size: 14px;
padding: 0 10px;
transition: all 0.2s;
display: flex;
align-items: center;
justify-content: center;
}
.ws-eval-image-arrow:hover:not(:disabled) {
color: var(--gold);
background: rgba(255, 215, 0, 0.15);
}
.ws-eval-image-arrow:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* 报告工具栏（右上角下载按钮） */
.ws-eval-report-toolbar {
display: flex;
justify-content: flex-end;
padding: 6px 10px;
border-bottom: 1px solid var(--border);
background: rgba(0, 30, 60, 0.4);
}
.ws-eval-download-btn {
padding: 4px 14px;
border: 1px solid var(--cyan);
border-radius: 4px;
background: rgba(0, 30, 60, 0.6);
color: var(--cyan);
cursor: pointer;
font-size: 12px;
transition: all 0.2s;
}
.ws-eval-download-btn:hover {
background: rgba(0, 204, 204, 0.15);
color: var(--gold);
border-color: var(--gold);
}
/* 拍摄剧本创作横条 */
.ws-creation-bar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 16px;
background: rgba(0, 30, 60, 0.5);
border: 1px solid var(--border);
border-radius: 6px;
margin-top: 8px;
margin-bottom: 8px;
}
.ws-creation-bar-label {
font-size: 16px;
color: var(--cyan);
font-weight: bold;
}
.ws-creation-arrow-btn {
border: 1px solid var(--border);
border-radius: 4px;
background: transparent;
color: var(--text2);
cursor: pointer;
font-size: 14px;
padding: 4px 10px;
transition: all 0.2s;
}
.ws-creation-arrow-btn:hover {
color: var(--gold);
border-color: var(--gold);
}
.ws-script-eval-image-tabs {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.ws-eval-image-tab {
cursor: pointer;
border-radius: 8px;
overflow: hidden;
border: 2px solid transparent;
transition: all 0.3s;
background: rgba(0, 0, 0, 0.2);
position: relative;
}
.ws-eval-image-tab:hover {
border-color: rgba(255, 215, 0, 0.4);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.ws-eval-image-tab.active {
border-color: var(--gold);
box-shadow: 0 0 16px rgba(255, 215, 0, 0.3);
}
.ws-eval-image-wrapper {
width: 100%;
aspect-ratio: 21 / 9;
overflow: hidden;
background: linear-gradient(135deg, #1a1a2e, #16213e);
display: flex;
align-items: center;
justify-content: center;
}
.ws-eval-image-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.ws-eval-image-label {
padding: 8px 4px;
text-align: center;
font-size: 13px;
font-weight: 500;
color: var(--text2);
background: rgba(0, 0, 0, 0.3);
transition: color 0.2s;
}
.ws-eval-image-tab.active .ws-eval-image-label {
color: var(--gold);
}
/* 图片选择器生成状态指示器 */
.ws-eval-image-tab.tab-generating {
border-color: var(--cyan);
opacity: 0.85;
}
.ws-eval-image-tab.tab-generating .ws-eval-image-label {
color: var(--cyan);
}
.ws-eval-image-tab.tab-generating .ws-eval-image-label::before {
content: '⏳ ';
animation: spin 2s linear infinite;
display: inline-block;
}
.ws-eval-image-tab.tab-done {
border-color: var(--green);
}
.ws-eval-image-tab.tab-done .ws-eval-image-label {
color: var(--green);
}
.ws-eval-image-tab.tab-done .ws-eval-image-label::before {
content: '✅ ';
}
.ws-eval-image-tab.tab-failed {
border-color: var(--red);
}
.ws-eval-image-tab.tab-failed .ws-eval-image-label {
color: var(--red);
}
.ws-eval-image-tab.tab-failed .ws-eval-image-label::before {
content: '❌ ';
}
/* 已有报告的绿勾指示（常态显示：仅控制勾，不影响边框/文字颜色） */
.ws-eval-image-tab.has-report .ws-eval-image-label::before {
content: '✓';
display: inline-block;
color: #fff;
background: #00cc44;
border-radius: 50%;
width: 16px;
height: 16px;
line-height: 16px;
text-align: center;
font-size: 12px;
font-weight: bold;
margin-right: 4px;
vertical-align: middle;
box-shadow: 0 0 4px rgba(0, 204, 68, 0.6);
}
.ws-script-eval-content {
padding: 0;
width: 100%;
overflow: visible;
}
.ws-eval-tab-content {
display: none;
max-height: none;
overflow: visible;
width: 100%;
height: auto;
}
.ws-eval-tab-content.active {
display: block;
width: 100%;
height: auto;
}
/* iframe样式占满整个宽度 */
.ws-eval-tab-content iframe {
width: 100% !important;
display: block;
border: none;
background: var(--bg-card);
min-height: 600px;
height: 3000px; /* 足够高以显示完整内容 */
max-height: none;
border-radius: 0 0 8px 8px;
}
.ws-eval-tab-content::-webkit-scrollbar {
width: 6px;
}
.ws-eval-tab-content::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.05);
}
.ws-eval-tab-content::-webkit-scrollbar-thumb {
background: rgba(255, 215, 0, 0.3);
border-radius: 3px;
}
.ws-eval-tab-content::-webkit-scrollbar-thumb:hover {
background: rgba(255, 215, 0, 0.5);
}
#wsEvalProfessionalContent,
#wsEvalInvestmentContent {
padding: 16px;
line-height: 1.8;
font-size: 13px;
color: var(--text1);
word-break: break-word;
overflow-x: auto;
}
#wsEvalProfessionalContent .eval-report,
#wsEvalInvestmentContent .eval-report {
font-size: 13px;
}
#wsEvalProfessionalContent .eval-report table,
#wsEvalInvestmentContent .eval-report table {
font-size: 12px;
}
#wsEvalProfessionalContent .eval-report th,
#wsEvalInvestmentContent .eval-report th {
font-size: 13px;
}
#wsEvalProfessionalContent .eval-report td,
#wsEvalInvestmentContent .eval-report td {
font-size: 12px;
}
#wsEvalProfessionalContent h3,
#wsEvalInvestmentContent h3 {
color: var(--gold);
margin: 16px 0 8px 0;
font-size: 14px;
}
#wsEvalProfessionalContent h4,
#wsEvalInvestmentContent h4 {
color: var(--cyan);
margin: 12px 0 6px 0;
font-size: 13px;
}
#wsEvalProfessionalContent strong,
#wsEvalInvestmentContent strong {
color: var(--text1);
}
#wsEvalProfessionalContent .eval-report::-webkit-scrollbar,
#wsEvalInvestmentContent .eval-report::-webkit-scrollbar {
width: 8px;
height: 8px;
}
#wsEvalProfessionalContent .eval-report::-webkit-scrollbar-track,
#wsEvalInvestmentContent .eval-report::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.1);
border-radius: 4px;
}
#wsEvalProfessionalContent .eval-report::-webkit-scrollbar-thumb,
#wsEvalInvestmentContent .eval-report::-webkit-scrollbar-thumb {
background: rgba(255, 215, 0, 0.4);
border-radius: 4px;
}
#wsEvalProfessionalContent .eval-report::-webkit-scrollbar-thumb:hover,
#wsEvalInvestmentContent .eval-report::-webkit-scrollbar-thumb:hover {
background: rgba(255, 215, 0, 0.6);
}
.ws-eval-loading {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 40px;
color: var(--cyan);
}
.ws-eval-loading::after {
content: '';
display: inline-block;
width: 16px;
height: 16px;
border: 2px solid var(--cyan);
border-top-color: transparent;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.ws-shot-auto-prepare {
display: flex;
align-items: center;
gap: 6px;
margin-right: 12px;
padding: 4px 10px;
background: rgba(0, 0, 0, 0.3);
border-radius: 20px;
}
.ws-shot-auto-prepare-label {
font-size: 12px;
color: var(--cyan);
font-weight: 500;
}
.ws-shot-auto-prepare-switch {
position: relative;
display: inline-block;
width: 36px;
height: 20px;
vertical-align: middle;
}
.ws-shot-auto-prepare-switch input {
opacity: 0;
width: 0;
height: 0;
}
.ws-shot-auto-prepare-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #444;
transition: 0.3s;
border-radius: 20px;
}
.ws-shot-auto-prepare-slider:before {
position: absolute;
content: "";
height: 16px;
width: 16px;
left: 2px;
bottom: 2px;
background-color: white;
transition: 0.3s;
border-radius: 50%;
}
.ws-shot-auto-prepare-switch input:checked + .ws-shot-auto-prepare-slider {
background-color: var(--cyan);
}
.ws-shot-auto-prepare-switch input:checked + .ws-shot-auto-prepare-slider:before {
transform: translateX(16px);
}
.ws-single-mode-switch {
display: flex;
align-items: center;
gap: 6px;
margin-right: 12px;
padding: 4px 10px;
background: rgba(0, 0, 0, 0.3);
border-radius: 20px;
}
.ws-single-mode-switch.ws-single-mode-disabled {
opacity: 0.5;
pointer-events: none;
}
/* 项目筹备区域锁定样式 - 使用通用方式锁定所有交互控件 */
.ws-locked-content .ws-genre-item,
.ws-locked-content .ws-subgenre-item,
.ws-locked-content .ws-single-mode-switch,
.ws-locked-content .ws-genre-item img,
.ws-locked-content .ws-genre-item input,
.ws-locked-content .ws-subgenre-item input,
.ws-locked-content .ws-subgenre-circle,
.ws-locked-content .ws-genre-scroll {
pointer-events: none !important;
cursor: not-allowed !important;
}
.ws-locked-content .ws-genre-item,
.ws-locked-content .ws-subgenre-item {
opacity: 0.7;
}
.ws-locked-content .ws-genre-item:hover,
.ws-locked-content .ws-subgenre-item:hover {
transform: none !important;
opacity: 0.7;
}
.ws-locked-content input[type="radio"],
.ws-locked-content input[type="checkbox"] {
pointer-events: none !important;
cursor: not-allowed !important;
}
/* 锁定时隐藏子类型选择器的悬停效果 */
.ws-locked-content .ws-subgenre-item:hover .ws-subgenre-circle {
box-shadow: 0 0 8px rgba(255, 170, 0, 0.3);
transform: none;
}
/* 锁定时禁用所有子类型选择器区域 */
.ws-locked-content .ws-movie-subgenres,
.ws-locked-content .ws-subgenres-grid {
pointer-events: none !important;
}
/* 锁定时禁用类型滚动区域的所有交互 */
.ws-locked-content .ws-genre-scroll {
pointer-events: none !important;
cursor: not-allowed !important;
}
/* 锁定时禁用整个类型卡片的交互 */
.ws-locked-content .ws-author-card {
pointer-events: none !important;
}
/* 锁定时单人模式开关区域 */
.ws-locked-content .ws-single-mode-switch {
pointer-events: none !important;
}
.ws-single-mode-label {
font-size: 12px;
color: var(--gold);
font-weight: 500;
}
.ws-single-mode-toggle {
position: relative;
display: inline-block;
width: 36px;
height: 20px;
vertical-align: middle;
}
.ws-single-mode-toggle input {
opacity: 0;
width: 0;
height: 0;
}
.ws-single-mode-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #444;
transition: 0.3s;
border-radius: 20px;
}
.ws-single-mode-slider:before {
position: absolute;
content: "";
height: 16px;
width: 16px;
left: 2px;
bottom: 2px;
background-color: white;
transition: 0.3s;
border-radius: 50%;
}
.ws-single-mode-toggle input:checked + .ws-single-mode-slider {
background-color: var(--gold);
}
.ws-single-mode-toggle input:checked + .ws-single-mode-slider:before {
transform: translateX(16px);
}
.ws-shot-global-settings {
display: flex;
align-items: center;
gap: 6px;
margin-right: 12px;
padding: 4px 10px;
background: rgba(0, 0, 0, 0.3);
border-radius: 20px;
}
.ws-shot-global-select {
padding: 2px 8px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 4px;
color: white;
font-size: 10px;
cursor: pointer;
outline: none;
}
.ws-shot-global-select option {
background: #1a1a2e;
color: white;
}
.ws-shot-avoid-human {
display: flex;
align-items: center;
gap: 6px;
margin-right: 12px;
padding: 4px 10px;
background: rgba(0, 0, 0, 0.3);
border-radius: 20px;
}
.ws-shot-avoid-human-label {
font-size: 12px;
color: var(--cyan);
font-weight: 500;
}
.ws-shot-avoid-human-switch {
position: relative;
display: inline-block;
width: 36px;
height: 20px;
vertical-align: middle;
}
.ws-shot-avoid-human-switch input {
opacity: 0;
width: 0;
height: 0;
}
.ws-shot-avoid-human-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #444;
transition: 0.3s;
border-radius: 20px;
}
.ws-shot-avoid-human-slider:before {
position: absolute;
content: "";
height: 16px;
width: 16px;
left: 2px;
bottom: 2px;
background-color: white;
transition: 0.3s;
border-radius: 50%;
}
.ws-shot-avoid-human-switch input:checked + .ws-shot-avoid-human-slider {
background-color: var(--cyan);
}
.ws-shot-avoid-human-switch input:checked + .ws-shot-avoid-human-slider:before {
transform: translateX(16px);
}
#wsServerVideoList {
flex: 0 0 auto;
max-height: 50%;
}
#wsTempVideoList {
margin-top: 0;
padding-top: 0;
flex: 1;
min-height: 0;
}
.ws-video-subheader-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 6px 8px;
background: rgba(0, 0, 0, 0.2);
font-size: 11px;
font-weight: 500;
color: var(--cyan);
border-bottom: 1px solid var(--border);
}
.ws-video-aspect-selector {
position: relative;
}
.ws-video-aspect-selector select {
background: linear-gradient(135deg, rgba(30, 41, 59, 0.9) 0%, rgba(15, 23, 42, 0.95) 100%);
border: 1px solid var(--border);
border-radius: 6px;
padding: 4px 24px 4px 10px;
color: var(--cyan);
font-size: 11px;
font-weight: 500;
cursor: pointer;
outline: none;
appearance: none;
min-width: 60px;
}
.ws-video-aspect-selector select:hover {
border-color: var(--cyan);
box-shadow: 0 0 8px rgba(0, 204, 255, 0.2);
}
.ws-video-aspect-selector select:focus {
border-color: var(--cyan);
box-shadow: 0 0 8px rgba(0, 204, 255, 0.3);
}
.ws-video-aspect-selector::after {
content: '�?;
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
color: var(--text3);
font-size: 8px;
pointer-events: none;
}
.ws-video-aspect-selector select option {
background: var(--bg-panel);
color: var(--text1);
padding: 4px 8px;
}
.ws-video-aspect-selector select option:hover {
background: rgba(0, 204, 255, 0.2);
color: var(--cyan);
}
.ws-video-subcontent {
flex: 1;
padding: 8px;
overflow: auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.ws-video-section .ws-video-subcontent .ws-video-image-box {
width: 150px !important;
height: 150px !important;
border: 2px dashed var(--border);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 48px;
cursor: pointer;
background: var(--bg-dark);
contain: layout style paint;
overflow: hidden;
}
.ws-video-image-box img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.ws-video-image-box:hover {
border-color: var(--cyan);
background: rgba(0, 204, 255, 0.1);
}
.ws-video-image-label {
margin-top: 8px;
font-size: 11px;
color: var(--text3);
}
.ws-video-section .ws-video-subcontent img.ws-video-character-img {
width: 150px !important;
height: 150px !important;
object-fit: contain;
object-position: center;
border-radius: 8px;
cursor: pointer;
border: 2px solid transparent;
background: var(--bg-dark);
contain: layout style paint;
}
/* 场地参考图容器：固定尺寸，确保占位符和图片完全一样大 */
#wsVideoLocation {
min-width: 150px;
min-height: 190px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#wsVideoLocation .ws-video-image-box,
#wsVideoLocation img.ws-video-character-img {
width: 150px !important;
height: 150px !important;
}
/* 道具参考图容器：同样固定 */
#wsVideoProps {
min-width: 150px;
min-height: 190px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#wsVideoProps .ws-video-image-box,
#wsVideoProps img.ws-video-character-img {
width: 150px !important;
height: 150px !important;
}
.ws-video-character-img:hover {
border-color: var(--cyan);
box-shadow: 0 0 8px rgba(0, 204, 255, 0.3);
}
.ws-video-empty {
text-align: center;
color: var(--text3);
font-size: 11px;
padding: 10px;
}
.ws-video-prompt-input {
width: 100%;
height: 100%;
min-height: 160px;
background: rgba(0, 0, 0, 0.2);
border: 1px solid var(--border);
border-radius: 4px;
padding: 8px;
color: var(--text1);
font-size: 12px;
resize: none;
box-sizing: border-box;
}
.ws-video-prompt-input::placeholder {
color: var(--text3);
}
.ws-video-gen-prompt-btn {
padding: 4px 12px;
background: linear-gradient(135deg, var(--cyan), var(--purple));
border: none;
border-radius: 4px;
color: white;
font-size: 11px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.ws-video-gen-prompt-btn:hover {
opacity: 0.9;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0, 204, 255, 0.3);
}
.ws-video-watercolor-btn {
padding: 4px 12px;
background: linear-gradient(135deg, #ff6b9d, #c44fff);
border: none;
border-radius: 4px;
color: white;
font-size: 11px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
margin-left: 8px;
}
.ws-video-watercolor-btn:hover {
opacity: 0.9;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(255, 107, 157, 0.3);
}
.ws-video-gen-options {
display: flex;
gap: 6px;
margin-left: 8px;
}
/* ===== 视频拍摄准备区收拢后 - 五盏灯 ===== */
.ws-video-ready-lights {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding: 14px 8px;
}
.ws-video-ready-light-wrap {
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
}
.ws-video-ready-light-wrap.ws-light-hidden { display: none !important; }
.ws-video-ready-light {
width: 44px;
height: 44px;
border-radius: 50%;
border: 3px solid;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 700;
transition: box-shadow 0.2s, background 0.2s, border-color 0.2s, color 0.2s;
}
.ws-video-ready-light span { display: block; line-height: 1; }
.ws-video-ready-light.ws-ready-yes {
border-color: #00cc66;
background: rgba(0, 204, 102, 0.2);
color: #00cc66;
box-shadow: 0 0 12px rgba(0, 204, 102, 0.7), inset 0 0 8px rgba(0, 204, 102, 0.4);
}
.ws-video-ready-light.ws-ready-no {
border-color: #e64545;
background: rgba(230, 69, 69, 0.18);
color: #e64545;
box-shadow: 0 0 12px rgba(230, 69, 69, 0.65), inset 0 0 8px rgba(230, 69, 69, 0.35);
}
.ws-video-ready-light-name {
font-size: 11px;
color: var(--text-sub);
}
.ws-video-gen-select {
padding: 2px 8px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 4px;
color: white;
font-size: 10px;
cursor: pointer;
outline: none;
}
.ws-video-gen-select option {
background: #1a1a2e;
color: white;
}
.ws-video-gen-select:disabled {
opacity: 0.6;
cursor: not-allowed;
background: rgba(255, 255, 255, 0.05);
}
.ws-video-progress-wrapper {
padding: 8px 12px;
background: rgba(0, 0, 0, 0.3);
border-bottom: 1px solid var(--border);
}
.ws-video-progress-bar-container {
height: 6px;
background: rgba(255, 255, 255, 0.1);
border-radius: 3px;
overflow: hidden;
margin-bottom: 6px;
}
.ws-video-progress-bar {
height: 100%;
background: linear-gradient(90deg, var(--cyan), var(--purple));
border-radius: 3px;
width: 0%;
transition: width 0.5s ease;
}
.ws-video-progress-text {
font-size: 11px;
color: var(--text2);
text-align: center;
}
.ws-video-gen-btn {
padding: 4px 12px;
background: linear-gradient(135deg, #ff6b6b, #ee5a5a);
border: none;
border-radius: 4px;
color: white;
font-size: 11px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
margin-right: 8px;
}
.ws-video-gen-btn:hover {
opacity: 0.9;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(238, 90, 90, 0.3);
}
.ws-video-gen-split {
display: flex;
flex-direction: column;
gap: 0;
flex: 1 1 auto;
min-height: 0;
}
.ws-video-prompt-section {
flex: 0 0 auto;
display: flex;
flex-direction: column;
}
.ws-video-prompt-subsection {
flex: 1;
display: flex;
flex-direction: column;
}
.ws-video-prompt-content {
flex: 1;
padding: 8px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.ws-video-prompt-content .ws-video-prompt-input {
min-height: auto;
flex: 1;
}
.ws-video-gen-top {
display: flex;
flex-direction: column;
gap: 0;
}
.ws-video-gen-bottom {
flex: 1;
display: flex;
flex-direction: column;
gap: 0;
}
.ws-video-player-wrapper {
display: flex;
justify-content: center;
padding: 2px;
background: rgba(0, 0, 0, 0.2);
border-radius: 0 0 6px 6px;
}
.ws-video-frames-row {
display: flex;
gap: 8px;
justify-content: stretch;
align-items: stretch;
padding: 8px;
background: rgba(0, 0, 0, 0.2);
border-radius: 6px 6px 0 0;
border: 1px solid var(--border);
margin-bottom: 0;
border-bottom: none;
width: 100%;
box-sizing: border-box;
}
.ws-video-frame-cell {
flex: 1 1 calc(50% - 4px);
display: flex;
flex-direction: column;
align-items: stretch;
gap: 4px;
min-width: 0;
}
.ws-video-frame-cell .ws-video-subheader {
margin: 0;
font-size: 12px;
color: var(--text2);
padding-left: 2px;
}
.ws-video-frame-cell .ws-video-subcontent {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
width: 100%;
}
.ws-video-frame-cell .ws-frame-card,
.ws-video-frame-cell .ws-video-image-box {
width: 100% !important;
height: 100px !important;
}
/* 首尾帧里的图片：横放占满卡片宽度 */
.ws-video-frame-cell img.ws-video-character-img {
width: 100% !important;
height: 100px !important;
object-fit: contain;
}
.ws-video-frame-cell .ws-video-image-label {
margin-top: 2px;
font-size: 11px;
color: var(--text3);
text-align: center;
line-height: 1.2;
}
.ws-video-subheader-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 3px 6px;
background: rgba(0, 0, 0, 0.2);
border-left: 1px solid var(--border);
border-right: 1px solid var(--border);
margin: 0;
font-size: 11px;
color: var(--text2);
}
.ws-video-subheader-row span {
line-height: 1;
}
.ws-video-player {
background: rgba(0, 0, 0, 0.4);
border-radius: 0 0 4px 4px;
overflow: visible;
display: flex;
flex-direction: column;
max-width: 100%;
min-height: auto;
width: 100%;
min-width: 0;
flex-shrink: 0;
border: 1px solid var(--border);
border-top: none;
box-sizing: border-box;
}
.ws-video-element {
width: 100%;
height: auto;
max-height: 200px;
object-fit: contain;
background: #000;
display: block;
flex: 0 0 auto;
overflow: hidden;
max-width: 100%;
}
.ws-video-placeholder {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
color: var(--text3);
min-height: 60px;
}
.ws-video-empty {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
color: var(--text3);
font-size: 14px;
min-height: 60px;
}
.ws-video-icon {
font-size: 28px;
opacity: 0.6;
}
.ws-video-text {
font-size: 11px;
}
.ws-video-controls-bar {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 8px;
background: rgba(0, 0, 0, 0.3);
border-top: 1px solid var(--border);
flex-shrink: 0;
flex-wrap: nowrap;
min-height: 40px;
box-sizing: border-box;
overflow: visible;
}
.ws-video-play-btn {
width: 26px;
height: 26px;
border-radius: 50%;
border: none;
background: var(--cyan);
color: var(--bg);
cursor: pointer;
font-size: 11px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.ws-video-capture-btn {
flex: 1 1 0;
min-width: 0;
background: linear-gradient(135deg, var(--cyan), var(--purple));
color: white;
border: none;
padding: 6px 8px;
border-radius: 4px;
cursor: pointer;
font-size: 11px;
font-weight: 600;
white-space: nowrap;
line-height: 1.3;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
gap: 2px;
transition: all 0.3s ease;
}
.ws-video-capture-btn:hover:not(.ws-btn-disabled):not([disabled]) {
opacity: 0.92;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0, 204, 255, 0.3);
}
.ws-video-capture-btn.ws-btn-disabled,
.ws-video-capture-btn[disabled] {
background: linear-gradient(135deg, #555, #333) !important;
color: #999 !important;
cursor: not-allowed !important;
opacity: 0.65;
transform: none !important;
box-shadow: none !important;
}
/* ===== 视频生成区：取消收放箭头 ===== */
#wsVideoGenCollapseBtn {
display: none !important;
}
/* ===== 截取预览浮层（可拖拽 + 可钉住） ===== */
.ws-video-preview-frame {
position: absolute;
top: 8px;
right: 8px;
width: 200px;
background: rgba(0, 0, 0, 0.9);
border: 2px solid var(--cyan);
border-radius: 6px;
padding: 0;
z-index: 9999;
box-shadow: 0 4px 16px rgba(0, 204, 255, 0.5);
display: flex;
flex-direction: column;
}
.ws-video-preview-frame.ws-pinned {
border-color: #ffcc00;
box-shadow: 0 4px 16px rgba(255, 204, 0, 0.6);
}
.ws-video-preview-frame.ws-dragging {
opacity: 0.9;
cursor: grabbing;
}
.ws-video-preview-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 4px 8px;
background: linear-gradient(135deg, rgba(0, 204, 255, 0.3), rgba(0, 119, 182, 0.3));
border-bottom: 1px solid var(--cyan);
cursor: grab;
user-select: none;
flex-shrink: 0;
}
.ws-video-preview-frame.ws-pinned .ws-video-preview-header {
background: linear-gradient(135deg, rgba(255, 204, 0, 0.3), rgba(204, 153, 0, 0.3));
border-bottom-color: #ffcc00;
}
.ws-video-preview-header:active {
cursor: grabbing;
}
.ws-video-preview-title {
font-size: 11px;
color: #fff;
font-weight: 600;
}
.ws-video-preview-actions {
display: flex;
gap: 4px;
}
.ws-video-preview-pin-btn,
.ws-video-preview-close-btn {
background: rgba(255, 255, 255, 0.15);
border: none;
color: #fff;
cursor: pointer;
font-size: 12px;
width: 22px;
height: 22px;
border-radius: 3px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
transition: background 0.2s;
}
.ws-video-preview-pin-btn:hover,
.ws-video-preview-close-btn:hover {
background: rgba(255, 255, 255, 0.3);
}
.ws-video-preview-pin-btn.ws-pinned-active {
background: rgba(255, 204, 0, 0.4);
color: #ffcc00;
}
.ws-video-preview-frame img {
width: 100%;
display: block;
border-radius: 0;
}
.ws-video-preview-caption {
display: block;
padding: 4px 6px;
font-size: 10px;
color: var(--cyan);
line-height: 1.3;
text-align: center;
word-break: break-all;
background: rgba(0, 0, 0, 0.5);
border-top: 1px solid rgba(0, 204, 255, 0.2);
}
.ws-video-preview-frame.ws-pinned .ws-video-preview-caption {
color: #ffcc00;
border-top-color: rgba(255, 204, 0, 0.2);
}
/* ===== 首帧/尾帧卡片角标 ===== */
.ws-frame-card {
position: relative;
width: 150px;
height: 150px;
border-radius: 8px;
overflow: hidden;
border: 2px solid var(--border);
background: var(--bg-dark);
}
.ws-frame-card img {
width: 100%;
height: 100%;
object-fit: cover;
cursor: pointer;
}
.ws-frame-badge {
position: absolute;
top: 4px;
right: 4px;
font-size: 10px;
padding: 2px 6px;
border-radius: 3px;
color: #fff;
font-weight: 600;
z-index: 5;
}
.ws-frame-badge-auto {
background: #2a9d8f; /* 绿色=自动 */
box-shadow: 0 0 6px rgba(42,157,143,0.6);
}
.ws-frame-badge-manual {
background: #e76f51; /* 橙色=手动 */
box-shadow: 0 0 6px rgba(231,111,81,0.6);
}
.ws-frame-tip {
display: inline-block;
margin-left: 6px;
padding: 1px 5px;
font-size: 10px;
background: rgba(150, 150, 150, 0.2);
color: var(--text3);
border-radius: 3px;
}
.ws-video-progress {
flex: 1;
height: 6px;
background: rgba(255, 255, 255, 0.2);
border-radius: 3px;
overflow: hidden;
}
.ws-video-progress-bar {
height: 100%;
width: 0%;
background: var(--cyan);
border-radius: 3px;
}
.ws-video-time {
font-size: 10px;
color: var(--text3);
min-width: 80px;
text-align: right;
}
.ws-video-list {
overflow: auto;
display: flex;
flex-direction: column;
gap: 3px;
padding: 4px;
max-height: 200px;
}
.ws-video-list-empty {
text-align: center;
color: var(--text3);
font-size: 10px;
padding: 6px;
}
.ws-video-list-item {
display: flex;
align-items: center;
gap: 6px;
padding: 3px 6px;
background: rgba(0, 0, 0, 0.2);
border-radius: 3px;
cursor: pointer;
transition: all 0.2s;
}
.ws-video-list-item:hover {
background: rgba(0, 204, 255, 0.1);
}
.ws-video-list-item.active {
background: rgba(0, 204, 255, 0.2);
}
.ws-video-list-thumb {
width: 36px;
height: 22px;
background: rgba(0, 0, 0, 0.3);
border-radius: 3px;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
flex-shrink: 0;
}
.ws-video-list-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 1px;
}
.ws-video-list-info .ws-video-list-name {
font-size: 10px;
line-height: 1.2;
color: var(--text2);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ws-video-list-info .ws-video-list-meta {
font-size: 9px;
line-height: 1.1;
color: var(--text3);
}
.ws-video-radio {
width: 14px;
height: 14px;
cursor: pointer;
accent-color: var(--cyan);
flex-shrink: 0;
}
.ws-video-url-tooltip {
display: none;
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.9);
color: white;
padding: 6px 10px;
border-radius: 4px;
font-size: 10px;
white-space: nowrap;
z-index: 100;
margin-bottom: 4px;
border: 1px solid rgba(0, 204, 255, 0.3);
}
.ws-video-url-tooltip::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
border-top-color: rgba(0, 204, 255, 0.3);
}
.ws-video-list-item:hover .ws-video-url-tooltip,
.ws-video-list-item:focus-within .ws-video-url-tooltip {
display: block;
}
.ws-video-list-tag {
font-size: 9px;
color: #00ff88;
background: rgba(0, 255, 136, 0.15);
padding: 1px 4px;
border-radius: 3px;
display: inline-block;
width: fit-content;
}
.ws-video-list-tag.temp {
color: #ffaa00;
background: rgba(255, 170, 0, 0.15);
}
.ws-video-list-tag.saved {
color: #00ff88;
background: rgba(0, 255, 136, 0.15);
}
.ws-video-list-item-saved {
background: rgba(0, 255, 136, 0.1) !important;
}
.ws-video-list-item-saved:hover {
background: rgba(0, 255, 136, 0.15) !important;
}
.ws-video-list-name {
font-size: 11px;
color: var(--text1);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ws-video-list-meta {
font-size: 9px;
color: var(--text3);
}
.ws-video-list-actions {
display: flex;
gap: 4px;
}
.ws-video-list-btn {
width: 20px;
height: 20px;
border: none;
background: transparent;
color: var(--text3);
cursor: pointer;
font-size: 12px;
border-radius: 3px;
display: flex;
align-items: center;
justify-content: center;
}
.ws-video-list-btn:hover {
background: rgba(255, 255, 255, 0.1);
color: var(--cyan);
}
.ws-video-list-delete:hover {
color: #ff4444;
background: rgba(255, 68, 68, 0.1);
}
.ws-video-list-download:hover {
color: #44ff44;
background: rgba(68, 255, 68, 0.1);
}
.ws-shot-project-stats {
font-size: 12px;
font-weight: normal;
color: var(--text3);
margin-left: 8px;
}
.ws-shot-panel-content {
flex: 1 1 auto;
padding: 12px;
overflow: auto;
contain: layout style paint;
min-height: 0; /* 允许 flex:1 的内容收缩，从而max-height生效（防止被兄弟Video列flex-stretch的父容器无限撑大） */
}
.ws-scene-item {
padding: 8px 10px;
margin-bottom: 4px;
background: rgba(0, 0, 0, 0.1);
border-radius: 4px;
cursor: pointer;
transition: all 0.2s;
display: flex;
align-items: center;
gap: 8px;
}
.ws-scene-item:hover {
background: rgba(0, 204, 255, 0.1);
}
.ws-scene-item.active {
background: rgba(0, 204, 255, 0.2);
border-left: 3px solid var(--cyan);
}
/* ===== 目录常态化状态色（绿色系） ===== */
/* 分镜/场景 已准备好 → 背景绿，字色不变 */
.ws-shot-item.ws-shot-ready {
background: rgba(80, 200, 120, 0.18) !important;
}
.ws-scene-item.ws-scene-ready {
background: rgba(80, 200, 120, 0.18) !important;
}
/* 当 active 与 ready 同时存在：保留 active 的左边框，背景色用 ready 优先 */
.ws-shot-item.active.ws-shot-ready,
.ws-scene-item.active.ws-scene-ready {
background: rgba(80, 200, 120, 0.25) !important;
}
/* 分镜/场景 已产生视频 → 字色变绿，背景不变（ready 的背景仍可叠加） */
.ws-shot-item.ws-shot-has-video,
.ws-shot-item.ws-shot-has-video .ws-shot-number,
.ws-shot-item.ws-shot-has-video .ws-shot-time {
color: #34c759 !important;
}
.ws-scene-item.ws-scene-has-video,
.ws-scene-item.ws-scene-has-video .ws-scene-name,
.ws-scene-item.ws-scene-has-video .ws-scene-number {
color: #34c759 !important;
}
.ws-scene-number {
font-size: 11px;
color: var(--cyan);
font-weight: bold;
width: 24px;
text-align: center;
}
.ws-scene-name {
font-size: 12px;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ws-shot-item {
padding: 8px 10px;
margin-bottom: 4px;
background: rgba(0, 0, 0, 0.1);
border-radius: 4px;
cursor: pointer;
transition: all 0.2s;
display: flex;
align-items: center;
gap: 10px;
}
.ws-shot-item:hover {
background: rgba(102, 153, 255, 0.1);
}
.ws-shot-item.active {
background: rgba(102, 153, 255, 0.2);
border-left: 3px solid var(--blue);
}
.ws-shot-time {
font-size: 11px;
color: var(--text2);
margin-left: auto;
}
.ws-shot-number {
font-size: 11px;
color: var(--blue);
font-weight: bold;
width: 28px;
text-align: center;
}
.ws-shot-type {
font-size: 11px;
color: var(--text2);
}
.ws-shot-script-header {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 1px solid var(--border);
}
.ws-shot-script-scene {
font-size: 12px;
color: var(--cyan);
font-weight: bold;
}
.ws-shot-script-number {
font-size: 12px;
color: var(--blue);
}
.ws-shot-script-type {
font-size: 11px;
color: var(--gold);
padding: 2px 6px;
background: rgba(255, 204, 0, 0.1);
border-radius: 4px;
}
.ws-shot-script-content {
font-size: 12px;
line-height: 1.6;
color: var(--text2);
white-space: pre-wrap;
word-break: break-word;
}
.ws-script-tag {
color: var(--cyan);
font-weight: bold;
}
.ws-script-prop {
color: var(--green);
font-style: italic;
}
.ws-script-location {
color: var(--purple);
font-style: italic;
}
.ws-script-character {
color: var(--gold);
font-style: italic;
}
.ws-script-dialogue-label {
color: var(--red);
font-weight: bold;
}
#wsShotProject {
display: flex;
flex-direction: column;
gap: 10px;
}
.ws-shot-project-area {
background: rgba(0, 0, 0, 0.2);
border: 1px solid var(--border);
border-radius: 6px;
overflow: visible;
}
.ws-shot-project-area-header {
padding: 8px 10px;
background: var(--bg-panel);
font-size: 11px;
font-weight: bold;
color: var(--cyan);
border-bottom: 1px solid var(--border);
display: flex;
justify-content: space-between;
align-items: center;
border-radius: 5px 5px 0 0;
}
.ws-shot-project-area-content {
padding: 10px;
font-size: 11px;
color: var(--text2);
display: flex;
flex-direction: column;
gap: 8px;
overflow: visible;
}
.ws-generate-ref-btn {
padding: 4px 12px;
font-size: 11px;
border: 1px solid var(--cyan);
background: rgba(0, 204, 255, 0.1);
color: var(--cyan);
border-radius: 4px;
cursor: pointer;
}
.ws-generate-ref-btn:hover {
background: rgba(0, 204, 255, 0.2);
box-shadow: 0 0 8px rgba(0, 204, 255, 0.3);
}
.ws-shot-project-area-content {
padding: 10px;
font-size: 11px;
color: var(--text2);
display: flex;
flex-direction: column;
gap: 8px;
}
.ws-location-item {
background: rgba(0, 0, 0, 0.2);
border-radius: 4px;
padding: 8px;
margin-bottom: 8px;
}
.ws-location-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
.ws-location-number {
font-size: 12px;
font-weight: bold;
color: var(--cyan);
padding: 2px 6px;
background: rgba(0, 255, 255, 0.1);
border-radius: 3px;
}
.ws-location-desc {
font-size: 11px;
color: var(--text2);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
}
.ws-location-images-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
}
.ws-location-image-item {
min-width: 0;
}
.ws-location-pano-item {
grid-column: 2 / span 2;
}
/* ===== 场地准备 - 场地图片外框 ===== */
:root {
/* ↓ 统一的对齐基准：图片框和视频列表共享这两个变量 */
--loc-radio-col-w: 22px;
--loc-gap: 6px;
}
.ws-location-item {
display: flex;
align-items: stretch;
gap: var(--loc-gap);
margin-top: 6px;
/* ↓ 清掉上面 L6003 旧定义的 padding/background/margin-bottom/border-radius */
padding: 0 !important;
background: transparent !important;
border-radius: 0 !important;
margin-bottom: 0 !important;
}
.ws-location-radio-col {
width: var(--loc-radio-col-w);
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.ws-location-body {
flex: 1;
min-width: 0;
}
/* ===== 场地图片外框：把所有图片包起来 ===== */
.ws-location-images-wrap {
border: 2px solid rgba(0, 200, 255, 0.45);
border-radius: 5px;
padding: 14px 10px 10px;
margin-top: 4px;
background: rgba(0, 0, 0, 0.22);
transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.ws-location-images-wrap:hover {
border-color: rgba(0, 200, 255, 0.7);
background: rgba(0, 0, 0, 0.35);
}
.ws-location-item.active .ws-location-images-wrap {
border: 2px solid var(--green, #39FF14);
box-shadow: 0 0 6px rgba(57, 255, 20, 0.25);
background: rgba(57, 255, 20, 0.06);
}
/* source-ref 态：当选中"用参考图"时，在图片框顶部加一条绿色内边色带 */
.ws-location-item.active.source-ref .ws-location-images-wrap {
box-shadow: 0 2px 0 0 var(--green, #39FF14) inset, 0 0 6px rgba(57, 255, 20, 0.25);
}
.ws-location-card-radio,
.ws-location-video-radio {
width: 16px;
height: 16px;
cursor: pointer;
margin: 0;
padding: 0;
box-sizing: border-box;
opacity: 0.75;
transition: opacity 0.15s, transform 0.15s;
appearance: none; /* ← 自绘，去掉浏览器默认 */
-webkit-appearance: none;
border-radius: 50%;
border: 2px solid var(--cyan, #00c8ff); /* 未选中 = 青色边框 */
background: transparent;
position: relative;
flex-shrink: 0;
}
.ws-location-card-radio:checked,
.ws-location-video-radio:checked {
border-color: var(--green, #39FF14); /* 选中 = 绿色边框 */
background: var(--green, #39FF14); /* 绿色实心 */
box-shadow: 0 0 6px rgba(57, 255, 20, 0.4);
opacity: 1;
}
/* 选中时中心点白点 */
.ws-location-card-radio:checked::after,
.ws-location-video-radio:checked::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 6px;
height: 6px;
background: #fff;
border-radius: 50%;
transform: translate(-50%, -50%);
}
/* ===== 场地准备 - 场地视频列表 ===== */
.ws-location-video-section {
margin-top: 6px;
padding-top: 0;
border-top: none;
}
.ws-location-video-title {
font-size: 11px;
color: var(--cyan, #00c8ff);
font-weight: bold;
margin-bottom: 6px;
padding-left: var(--loc-radio-col-w); /* ← 和上面图片框 radio-col 对齐 */
}
.ws-location-video-content {
display: flex;
flex-direction: column;
gap: 4px;
}
.ws-location-video-row {
display: flex;
align-items: stretch;
gap: var(--loc-gap); /* ← 和图片框 gap 统一 */
}
.ws-location-video-radio-col {
width: var(--loc-radio-col-w); /* ← 和图片框 radio-col 宽度统一 */
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.ws-location-video-item {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
gap: 8px;
padding: 6px 8px;
background: rgba(0, 0, 0, 0.22);
border-radius: 5px;
border: 2px solid rgba(0, 200, 255, 0.45);
transition: background 0.15s, border-color 0.15s;
font-size: 11px;
}
.ws-location-video-row:hover .ws-location-video-item {
background: rgba(0, 0, 0, 0.35);
border-color: rgba(0, 200, 255, 0.7);
}
.ws-location-video-row.active .ws-location-video-item {
border: 2px solid var(--green, #39FF14);
box-shadow: 0 0 6px rgba(57, 255, 20, 0.25);
background: rgba(57, 255, 20, 0.06);
}
.ws-location-video-radio {
accent-color: var(--cyan, #00c8ff);
width: 14px;
height: 14px;
cursor: pointer;
opacity: 0.55;
transition: opacity 0.15s, transform 0.15s;
}
.ws-location-video-row:hover .ws-location-video-radio,
.ws-location-video-radio:checked {
opacity: 1;
}
.ws-location-video-radio:checked {
transform: scale(1.15);
}
.ws-location-video-lid {
color: var(--cyan, #00c8ff);
font-weight: bold;
font-size: 11px;
flex-shrink: 0;
min-width: 48px;
}
.ws-location-video-name {
color: var(--text2, #aaa);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
min-width: 0;
}
.ws-location-video-count {
color: #888;
font-size: 10px;
flex-shrink: 0;
}
.ws-location-video-play {
background: rgba(0, 200, 255, 0.15);
border: 1px solid rgba(0, 200, 255, 0.4);
color: var(--cyan, #00c8ff);
width: 26px;
height: 20px;
border-radius: 3px;
cursor: pointer;
font-size: 10px;
line-height: 1;
flex-shrink: 0;
transition: background 0.15s, box-shadow 0.15s;
}
.ws-location-video-play:hover {
background: rgba(0, 200, 255, 0.3);
box-shadow: 0 0 6px rgba(0, 200, 255, 0.4);
}
.ws-location-image-label {
font-size: 11px;
color: #e0e0e0;
text-align: center;
margin-bottom: 4px;
margin-top: 2px;
padding: 2px 4px;
background: rgba(0, 0, 0, 0.6);
border-radius: 3px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: 500;
}
.ws-location-image-box {
width: 100%;
height: 50px;
border-radius: 4px;
overflow: hidden;
background: rgba(0, 0, 0, 0.3);
display: flex;
align-items: center;
justify-content: center;
contain: layout style paint;
cursor: pointer;
transition: all 0.2s;
}
.ws-location-image-box:hover {
background: rgba(0, 0, 0, 0.5);
transform: scale(1.02);
}
.ws-location-image-box img {
width: 100%;
height: 100%;
object-fit: cover;
}
.ws-no-image {
font-size: 18px;
opacity: 0.5;
}
.ws-location-image {
width: 100%;
height: 60px;
border-radius: 4px;
overflow: hidden;
background: rgba(0, 0, 0, 0.3);
display: flex;
align-items: center;
justify-content: center;
}
.ws-location-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.ws-image-placeholder {
font-size: 24px;
opacity: 0.5;
}
.ws-empty {
text-align: center;
color: var(--text3);
padding: 10px;
}
.ws-props-list {
display: flex;
flex-direction: column;
gap: 6px;
}
.ws-props-list .ws-prop-item {
background: linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.9) 100%);
border-radius: 8px;
padding: 10px;
display: flex;
flex-direction: column;
gap: 8px;
align-items: stretch;
border: 1px solid rgba(148, 163, 184, 0.1);
transition: all 0.2s ease;
}
/* ★ 图1布局：上排=三视图(左)+编号/名称/标签(右) */
.ws-props-list .ws-prop-top {
display: flex;
gap: 12px;
align-items: center;
}
/* ★ 图1布局：下排三列描述（每列与上方正/侧/反视角图对应，均分宽度） */
.ws-props-list .ws-prop-desc-cols {
display: flex;
gap: 8px;
}
.ws-props-list .ws-prop-desc-col {
flex: 1;
min-width: 0;
font-size: 11px;
color: var(--text3);
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
word-break: break-word;
}
.ws-props-list .ws-prop-item:hover {
border-color: rgba(34, 211, 238, 0.3);
box-shadow: 0 4px 12px rgba(34, 211, 238, 0.1);
transform: translateY(-1px);
}
/* ═══════════════════════════════════════════════════════════════
* 🆕 画外音准备区（voiceover）
* ═══════════════════════════════════════════════════════════════ */
.ws-voiceover-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 10px;
}
.ws-voiceover-card {
background: linear-gradient(135deg, rgba(79, 70, 229, 0.18) 0%, rgba(55, 48, 163, 0.25) 100%);
border: 1px solid rgba(139, 92, 246, 0.35);
border-radius: 10px;
padding: 10px;
display: flex;
gap: 10px;
transition: all 0.2s ease;
}
.ws-voiceover-card:hover {
border-color: rgba(168, 85, 247, 0.65);
box-shadow: 0 4px 14px rgba(168, 85, 247, 0.2);
transform: translateY(-1px);
}
.ws-voiceover-image-wrap {
width: 72px;
height: 72px;
flex-shrink: 0;
border-radius: 8px;
overflow: hidden;
background: rgba(0, 0, 0, 0.4);
border: 1px solid rgba(139, 92, 246, 0.3);
display: flex;
align-items: center;
justify-content: center;
}
.ws-voiceover-image {
width: 100%;
height: 100%;
object-fit: cover;
cursor: pointer;
}
.ws-voiceover-body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.ws-voiceover-header {
display: flex;
align-items: center;
gap: 6px;
}
.ws-voiceover-id {
font-size: 11px;
font-weight: 700;
color: #c4b5fd;
background: rgba(139, 92, 246, 0.25);
padding: 1px 6px;
border-radius: 4px;
border: 1px solid rgba(139, 92, 246, 0.4);
letter-spacing: 0.5px;
}
.ws-voiceover-name {
font-size: 13px;
font-weight: 600;
color: #e9d5ff;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ws-voiceover-desc {
font-size: 11px;
color: #c4b5fd;
line-height: 1.35;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
word-break: break-word;
}
.ws-voiceover-voice-desc {
font-size: 11px;
color: #a78bfa;
line-height: 1.35;
max-height: 28px;
overflow: hidden;
text-overflow: ellipsis;
}
.ws-voiceover-voice-file {
display: flex;
align-items: center;
gap: 6px;
margin-top: auto;
}
.ws-voiceover-audio {
width: 100%;
height: 24px;
border-radius: 4px;
}
.ws-voiceover-upload-btn {
font-size: 11px;
padding: 2px 8px;
background: rgba(139, 92, 246, 0.2);
border: 1px solid rgba(139, 92, 246, 0.4);
color: #d8b4fe;
border-radius: 4px;
cursor: pointer;
transition: all 0.15s;
white-space: nowrap;
}
.ws-voiceover-upload-btn:hover {
background: rgba(139, 92, 246, 0.4);
color: #fff;
}
.ws-voiceover-badge {
font-size: 11px;
background: rgba(139, 92, 246, 0.25);
color: #c4b5fd;
padding: 1px 8px;
border-radius: 10px;
border: 1px solid rgba(139, 92, 246, 0.4);
margin-left: auto;
}
/* ★ 分镜准备道具卡：橙色(非跨分镜)/黄色(锁定) 背景 */
.ws-props-list .ws-prop-item.ws-prop-single-bg {
background: linear-gradient(135deg, rgba(180, 83, 9, 0.25) 0%, rgba(120, 53, 15, 0.35) 100%);
border: 1px solid rgba(245, 158, 11, 0.4);
}
.ws-props-list .ws-prop-item.ws-prop-locked-bg {
background: linear-gradient(135deg, rgba(202, 138, 4, 0.25) 0%, rgba(161, 98, 7, 0.35) 100%);
border: 1px solid rgba(250, 204, 21, 0.5);
}
/* ★ 正侧反三张小图容器 */
.ws-props-list .ws-prop-three-views {
display: flex;
gap: 3px;
flex-shrink: 0;
width: 156px;
}
.ws-props-list .ws-prop-view-item {
width: 50px;
height: 50px;
border-radius: 6px;
background: rgba(0, 0, 0, 0.4);
overflow: hidden;
border: 1px solid rgba(148, 163, 184, 0.2);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s;
contain: layout style paint;
}
.ws-props-list .ws-prop-view-item:hover {
border-color: rgba(34, 211, 238, 0.6);
transform: scale(1.05);
}
.ws-props-list .ws-prop-view-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
.ws-props-list .ws-prop-no-view {
font-size: 10px;
color: #64748b;
}
/* ★ 状态标签 */
.ws-props-list .ws-prop-tags {
display: flex;
gap: 4px;
margin-top: 3px;
flex-wrap: wrap;
}
.ws-props-list .ws-prop-tag {
font-size: 10px;
padding: 1px 6px;
border-radius: 3px;
line-height: 1.4;
}
.ws-props-list .ws-prop-tag-locked {
background: rgba(250, 204, 21, 0.2);
color: #fbbf24;
border: 1px solid rgba(250, 204, 21, 0.4);
}
.ws-props-list .ws-prop-tag-single {
background: rgba(245, 158, 11, 0.2);
color: #f59e0b;
border: 1px solid rgba(245, 158, 11, 0.4);
}
.ws-props-list .ws-prop-tag-cross {
background: rgba(34, 211, 238, 0.15);
color: #22d3ee;
border: 1px solid rgba(34, 211, 238, 0.35);
}
.ws-props-list .ws-prop-tag-combined {
background: rgba(168, 85, 247, 0.15);
color: #a855f7;
border: 1px solid rgba(168, 85, 247, 0.35);
}
.ws-props-list .ws-prop-image-container {
width: 50px;
height: 50px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
background: rgba(0, 0, 0, 0.4);
contain: layout style paint;
overflow: hidden;
border: 1px solid rgba(148, 163, 184, 0.2);
}
.ws-props-list .ws-prop-image {
max-width: 100%;
max-height: 100%;
object-fit: contain;
cursor: pointer;
}
.ws-props-list .ws-prop-content {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.ws-props-list .ws-prop-header {
display: flex;
align-items: center;
gap: 6px;
}
.ws-prop-scene-search-btn {
margin-left: auto;
width: 24px;
height: 24px;
border: 1px solid rgba(255,255,255,0.2);
background: rgba(255,255,255,0.05);
color: #aaa;
border-radius: 4px;
cursor: pointer;
font-size: 13px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s;
padding: 0;
line-height: 1;
}
.ws-prop-scene-search-btn:hover {
background: rgba(34,211,238,0.2);
border-color: #22d3ee;
color: #22d3ee;
}
/* 道具出现分镜对话框 */
.ws-prop-shot-modal {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.6);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
}
.ws-prop-shot-modal .ws-prop-shot-dialog {
width: 900px;
max-width: 92vw;
height: 600px;
max-height: 85vh;
background: #1a1a2e;
border: 1px solid rgba(255,255,255,0.15);
border-radius: 8px;
display: flex;
flex-direction: column;
box-shadow: 0 10px 40px rgba(0,0,0,0.5);
color: #e0e0e0;
}
.ws-prop-shot-modal .ws-prop-shot-header {
padding: 12px 16px;
border-bottom: 1px solid rgba(255,255,255,0.1);
display: flex;
align-items: center;
justify-content: space-between;
font-weight: 600;
}
.ws-prop-shot-modal .ws-prop-shot-header button {
background: none;
border: none;
color: #888;
cursor: pointer;
font-size: 18px;
padding: 0 4px;
}
.ws-prop-shot-modal .ws-prop-shot-header button:hover { color: #fff; }
.ws-prop-shot-modal .ws-prop-shot-body {
flex: 1;
display: flex;
overflow: hidden;
}
.ws-prop-shot-modal .ws-prop-shot-list {
width: 240px;
border-right: 1px solid rgba(255,255,255,0.1);
overflow-y: auto;
padding: 8px;
background: rgba(0,0,0,0.2);
flex-shrink: 0;
}
.ws-prop-shot-modal .ws-prop-shot-list-item {
padding: 8px 10px;
margin-bottom: 4px;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
border: 1px solid transparent;
transition: all 0.15s;
}
.ws-prop-shot-modal .ws-prop-shot-list-item:hover {
background: rgba(34,211,238,0.1);
border-color: rgba(34,211,238,0.3);
}
.ws-prop-shot-modal .ws-prop-shot-list-item.active {
background: rgba(34,211,238,0.2);
border-color: #22d3ee;
color: #22d3ee;
}
.ws-prop-shot-modal .ws-prop-shot-list-item .shot-label {
font-weight: 600;
color: #fff;
}
.ws-prop-shot-modal .ws-prop-shot-list-item .shot-scene {
font-size: 10px;
color: #888;
margin-top: 2px;
}
.ws-prop-shot-modal .ws-prop-shot-content {
flex: 1;
padding: 16px;
overflow-y: auto;
font-size: 13px;
line-height: 1.8;
white-space: pre-wrap;
color: #d0d0d0;
}
.ws-prop-shot-modal .ws-prop-shot-empty {
text-align: center;
color: #666;
padding: 40px;
font-size: 13px;
}
.ws-prop-shot-modal mark.prop-hit {
background: rgba(34,211,238,0.4);
color: #fff;
padding: 0 2px;
border-radius: 2px;
}
/* 【属性】标签：红色 + 加粗 + 占一行 */
.ws-prop-shot-modal .ws-prop-tag {
color: #ff6b6b;
font-weight: 700;
display: inline-block;
margin: 4px 0 2px 0;
letter-spacing: 0.5px;
}
/* 分镜标题行：保持 inline，加底色区分 */
.ws-prop-shot-modal .ws-prop-shot-title {
display: inline;
color: #22d3ee;
font-weight: 600;
}
/* 本道具编号/名称：绿色背景高亮 */
.ws-prop-shot-modal mark.prop-hit-green {
background: rgba(74, 222, 128, 0.45);
color: #fff;
padding: 0 3px;
border-radius: 3px;
font-weight: 600;
}
.ws-props-list .ws-prop-id {
font-size: 10px;
font-weight: 600;
color: var(--cyan);
padding: 2px 6px;
background: rgba(34, 211, 238, 0.1);
border-radius: 3px;
letter-spacing: 0.5px;
}
.ws-props-list .ws-prop-name {
font-size: 13px;
font-weight: 600;
color: var(--text1);
}
.ws-props-list .ws-prop-desc {
font-size: 11px;
color: var(--text3);
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.ws-props-list .ws-prop-no-image {
font-size: 24px;
color: rgba(148, 163, 184, 0.3);
}
.ws-actor-item {
background: rgba(0, 0, 0, 0.2);
border-radius: 4px;
padding: 8px;
margin: 0 !important; /* ← 清掉可能的额外 margin，保证右边界与场地视频项对齐 */
width: 100%;
box-sizing: border-box;
}
.ws-actor-number {
font-size: 12px;
font-weight: bold;
color: var(--gold);
margin-bottom: 4px;
}
.ws-actor-name {
font-size: 11px;
color: var(--text2);
margin-bottom: 6px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ws-actor-image {
width: 50px;
height: 50px;
border-radius: 50%;
overflow: hidden;
background: linear-gradient(135deg, var(--cyan), var(--purple));
display: flex;
align-items: center;
justify-content: center;
border: 2px solid var(--border);
flex-shrink: 0;
}
.ws-actor-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.ws-actor-desc {
font-size: 10px;
color: var(--text3);
margin-top: 6px;
padding-top: 6px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.ws-actor-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
flex-wrap: wrap;
}
.ws-actor-costume-images-inline {
display: flex;
gap: 4px;
}
.ws-actor-info {
display: flex;
flex-direction: column;
}
.ws-actor-section {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px;
border: 1px solid var(--border);
border-radius: 4px;
background: rgba(255, 255, 255, 0.02);
margin-bottom: 8px;
}
.ws-actor-section-left {
display: flex;
flex-direction: column;
gap: 4px;
}
.ws-actor-section-right {
position: relative;
}
.ws-actor-main-image {
width: 100px;
height: 100px;
border-radius: 50%;
border: 2px solid var(--border);
overflow: hidden;
}
.ws-actor-main-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* 🎬 角色照片外右上角试镜播放按钮（和场地准备视频项播放键样式完全一致） */
.ws-actor-audition-play {
position: absolute;
top: -4px;
right: -4px;
background: rgba(0, 200, 255, 0.15);
border: 1px solid rgba(0, 200, 255, 0.4);
color: var(--cyan, #00c8ff);
width: 26px;
height: 20px;
border-radius: 3px;
cursor: pointer;
font-size: 10px;
line-height: 1;
z-index: 5;
padding: 0;
transition: background 0.15s, box-shadow 0.15s;
}
.ws-actor-audition-play:hover {
background: rgba(0, 200, 255, 0.3);
box-shadow: 0 0 6px rgba(0, 200, 255, 0.4);
}
.ws-actor-add-btn {
width: 36px;
height: 36px;
border-radius: 50%;
background: linear-gradient(135deg, #00d4ff 0%, #0099ff 100%);
border: 2px solid #00d4ff;
color: white;
font-size: 24px;
font-weight: bold;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 12px rgba(0, 212, 255, 0.5);
transition: all 0.2s;
z-index: 10;
align-self: flex-start;
}
.ws-actor-add-btn:hover {
transform: scale(1.1);
box-shadow: 0 0 20px rgba(0, 212, 255, 0.8);
}
.ws-actor-images-section {
display: flex;
gap: 8px;
flex: 1;
}
.ws-actor-costume-container,
.ws-actor-makeup-container {
flex: 1;
border: 1px solid var(--border);
border-radius: 4px;
background: rgba(255, 255, 255, 0.02);
display: flex;
flex-direction: column;
padding: 8px;
}
.ws-actor-label {
font-size: 11px;
color: var(--text2);
margin-bottom: 6px;
display: flex;
align-items: center;
justify-content: space-between;
}
/* 👔 形象照右上角定妆视频播放键 —— 和场地准备视频项播放键完全一致 */
.ws-costume-showcase-play {
background: rgba(0, 200, 255, 0.15);
border: 1px solid rgba(0, 200, 255, 0.4);
color: var(--cyan, #00c8ff);
width: 26px;
height: 20px;
border-radius: 3px;
cursor: pointer;
font-size: 10px;
line-height: 1;
padding: 0;
transition: background 0.15s, box-shadow 0.15s;
}
.ws-costume-showcase-play:hover {
background: rgba(0, 200, 255, 0.3);
box-shadow: 0 0 6px rgba(0, 200, 255, 0.4);
}
.ws-actor-costume-images {
display: flex;
gap: 4px;
flex: 1;
overflow: hidden;
}
.ws-actor-costume-image {
width: 100%;
height: 150px;
border-radius: 4px;
background: rgba(0, 0, 0, 0.3);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
contain: layout style paint;
}
.ws-actor-costume-image img {
max-width: 100%;
max-height: 150px;
width: auto;
height: auto;
object-fit: contain;
}
.ws-actor-makeup-images {
display: flex;
gap: 4px;
flex-wrap: wrap;
flex: 1;
}
.ws-actor-makeup-image {
width: 100%;
min-height: 150px;
border-radius: 4px;
background: rgba(0, 0, 0, 0.3);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.ws-actor-makeup-image img {
max-width: 100%;
max-height: 200px;
width: auto;
height: auto;
object-fit: contain;
}
.ws-actor-main-row {
display: flex;
gap: 8px;
width: 100%;
min-height: 300px;
}
.ws-actor-left-panel {
flex: 2;
display: flex;
flex-direction: column;
gap: 8px;
min-height: 100%;
}
.ws-actor-right-panel {
flex: 1;
border: 1px solid var(--border);
border-radius: 4px;
background: rgba(255, 255, 255, 0.02);
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 8px;
gap: 8px;
}
.ws-actor-card-container {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.ws-actor-card-image {
max-width: 100%;
min-height: 120px;
contain: layout style paint;
max-height: 150px;
border-radius: 4px;
overflow: hidden;
background: rgba(0, 0, 0, 0.3);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.ws-actor-card-image img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.ws-actor-card-label {
font-size: 11px;
color: var(--text3);
text-align: center;
}
.ws-actor-right-top,
.ws-actor-right-bottom {
flex: 1;
display: flex;
flex-direction: column;
border: 1px solid var(--border);
border-radius: 4px;
overflow: hidden;
}
.ws-actor-right-image-upload {
flex: 1;
min-height: 180px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.3);
position: relative;
}
.ws-actor-right-image-upload img {
max-width: 100%;
max-height: 200px;
width: auto;
height: auto;
object-fit: contain;
cursor: pointer;
}
.ws-image-upload-placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: var(--text3);
gap: 6px;
}
.ws-upload-icon {
font-size: 24px;
}
.ws-upload-text {
font-size: 12px;
}
.ws-image-upload-input {
display: none;
}
.ws-actor-right-label {
font-size: 10px;
color: var(--text3);
padding: 6px;
background: rgba(0, 0, 0, 0.2);
text-align: center;
}
.ws-shot-list {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 12px;
}
.ws-shot-empty {
text-align: center;
color: var(--text3);
padding: 40px;
font-style: italic;
}
.ws-layout-list {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 12px;
/* 🔥 不再强制 grid-auto-rows:1fr — JS 已经给 desc/ana/la 设了固定高度,
卡高 = 所有块之和,同行卡自然等高,不会出现底部大空白 */
}
.ws-layout-card {
background: rgba(255, 255, 255, 0.05);
border-radius: 8px;
padding: 10px;
border: 1px solid var(--border);
cursor: pointer;
transition: all 0.2s ease;
display: flex;
flex-direction: column;
gap: 3px;
/* 🔥 去掉 min-height — JS 对齐后块高已经统一,卡高自然贴合内容 */
}
.ws-layout-card .ws-layout-header {
flex-shrink: 0;
}
.ws-layout-card .ws-layout-desc-container {
flex-shrink: 0;
max-height: none;
overflow-y: visible;
min-height: 0;
}
.ws-layout-desc-input {
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 4px;
padding: 6px 8px;
color: var(--text1);
font-size: 13px;
font-family: inherit;
resize: none;
outline: none;
line-height: 1.5;
}
.ws-layout-desc-input:focus {
border-color: var(--primary);
background: rgba(255, 255, 255, 0.08);
}
.ws-layout-card .ws-layout-analysis {
/* 🔥 flex:0 让高度完全由内容决定,不参与三等分 */
flex: 0 0 auto;
overflow: visible;
}
.ws-layout-card .ws-layout-images {
flex-shrink: 0;
}
.ws-layout-card .ws-layout-generate-btn {
flex-shrink: 0;
}
.ws-layout-card:hover {
background: rgba(255, 255, 255, 0.08);
transform: translateY(-2px);
}
.ws-layout-cross-scene {
background: rgba(100, 149, 237, 0.15);
border-color: rgba(100, 149, 237, 0.3);
}
.ws-layout-single-scene {
background: rgba(50, 205, 50, 0.15);
border-color: rgba(50, 205, 50, 0.3);
}
.ws-layout-header {
display: flex;
align-items: flex-start;
gap: 8px;
position: relative;
}
/* 🔥 敏感词检查开关按钮 — 场地卡 header */
.ws-sensitive-toggle-btn {
position: absolute;
top: 2px;
right: 28px; /* 🔄 按钮在 right:2px, 这个在它左边 */
width: 22px;
height: 22px;
border: none;
border-radius: 50%;
cursor: pointer;
font-size: 13px;
line-height: 22px;
text-align: center;
padding: 0;
flex-shrink: 0;
transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
z-index: 5;
}
/* 🔴 默认: 红色 = 未开启 */
.ws-sensitive-toggle-btn.off {
background: rgba(239, 68, 68, 0.15);
color: #ef4444;
box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.3);
}
.ws-sensitive-toggle-btn.off:hover {
background: rgba(239, 68, 68, 0.35);
transform: scale(1.1);
}
/* 🟢 点击后: 绿色 = 已开启 */
.ws-sensitive-toggle-btn.on {
background: rgba(34, 197, 94, 0.15);
color: #22c55e;
box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.35);
}
.ws-sensitive-toggle-btn.on:hover {
background: rgba(34, 197, 94, 0.35);
transform: scale(1.1);
}
.ws-loc-refresh-btn {
position: absolute;
top: 2px;
right: 2px;
width: 22px;
height: 22px;
border: none;
background: rgba(58, 123, 213, 0.12);
color: #3a7bd5;
border-radius: 50%;
cursor: pointer;
font-size: 13px;
line-height: 22px;
text-align: center;
padding: 0;
flex-shrink: 0;
transition: background 0.2s, transform 0.3s;
z-index: 5;
}
.ws-loc-refresh-btn:hover {
background: rgba(58, 123, 213, 0.3);
transform: scale(1.1);
}
.ws-loc-refresh-btn:active {
transform: scale(0.95);
}
.ws-loc-refresh-btn.loading {
animation: ws-spin 1s linear infinite;
background: rgba(58, 123, 213, 0.4);
cursor: not-allowed;
}
@keyframes ws-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.ws-layout-checkbox {
width: 16px;
height: 16px;
cursor: pointer;
accent-color: var(--primary);
flex-shrink: 0;
}
.ws-layout-id {
font-weight: bold;
color: var(--primary);
font-size: 14px;
min-width: 60px;
}
.ws-layout-name {
font-size: 13px;
color: var(--text2);
font-weight: 500;
flex: 1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.ws-layout-desc-container {
/* 🔥 JS _alignLayoutCardRows 已经用 scrollHeight 设了固定 height,
overflow-y:auto 没用还可能裁掉敏感词的删除线 + padding — 改成 visible */
overflow: visible !important;
font-size: 13px;
color: var(--text1);
line-height: 1.55;
}
.ws-layout-desc-container::-webkit-scrollbar {
width: 4px;
}
.ws-layout-desc-container::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.05);
border-radius: 2px;
}
.ws-layout-desc-container::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.2);
border-radius: 2px;
}
.ws-layout-desc-container::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.3);
}
.ws-layout-desc {
word-break: break-all;
}
.ws-layout-scenes {
display: flex;
align-items: center;
gap: 4px;
font-size: 12px;
color: var(--text2);
}
.ws-scenes-label {
opacity: 0.7;
}
.ws-scenes-list {
font-size: 11px;
background: rgba(255, 255, 255, 0.1);
padding: 2px 6px;
border-radius: 4px;
}
.ws-bubble-trigger {
position: relative;
cursor: pointer;
}
.ws-bubble {
position: absolute;
top: 100%;
left: 0;
margin-top: 4px;
padding: 8px 12px;
background: #1a1a2e;
border: 1px solid #3a3a5e;
border-radius: 6px;
min-width: 200px;
max-width: 300px;
z-index: 100;
display: none;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
opacity: 1;
}
.ws-bubble-trigger:hover .ws-bubble {
display: block;
}
.ws-bubble-item {
padding: 4px 0;
font-size: 12px;
color: var(--text1);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 🔥 清理旧 grid 固定行高,让 template 注入的 flex column + 自然撑高生效 */
.ws-layout-analysis {
display: flex;
flex-direction: column;
gap: 4px;
padding: 4px 0;
overflow: visible;
}
.ws-layout-analysis::-webkit-scrollbar {
width: 4px;
}
.ws-layout-analysis::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.05);
border-radius: 2px;
}
.ws-layout-analysis::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.2);
border-radius: 2px;
}
.ws-layout-analysis-item {
display: flex;
align-items: flex-start;
background: rgba(255, 255, 255, 0.1);
padding: 0 5px 2px 5px; /* 🔥 上 0 — 文字顶格 */
border-radius: 4px;
border: 1px solid rgba(255, 255, 255, 0.15);
min-height: 32px;
overflow: visible;
}
.ws-layout-analysis-item:empty {
background: transparent;
border: none;
border-radius: 0;
padding: 0;
}
.ws-layout-analysis-item::-webkit-scrollbar {
width: 4px;
}
.ws-layout-analysis-item::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.05);
border-radius: 2px;
}
.ws-layout-analysis-item::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.2);
border-radius: 2px;
}
.ws-layout-analysis-label {
color: var(--text2);
margin-right: 6px;
flex-shrink: 0;
white-space: nowrap;
font-weight: 500;
}
.ws-layout-analysis-value {
color: var(--text1);
font-weight: 500;
flex: 1;
word-break: break-all;
}
.ws-layout-analysis-input {
flex: 1;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 3px;
padding: 2px 6px;
color: var(--text1);
font-size: 13px;
font-weight: 500;
outline: none;
word-break: break-all;
}
.ws-layout-analysis-input:focus {
border-color: var(--primary);
background: rgba(255, 255, 255, 0.15);
}
.ws-layout-images {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: auto;
gap: 8px 6px;
padding-top: 8px;
padding-bottom: 4px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
/* 2行2列共4图：行高自适应wrapper */
min-height: 0;
}
/* ★ 全景图展示位：宽度 = 2 张切片的宽度（占满两列） */
.ws-layout-panorama-wrapper {
width: 100%;
margin-top: 6px;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.ws-layout-panorama-box {
width: 100%;
/* 2:1 全景比例 */
aspect-ratio: 2 / 1;
border: 2px dashed var(--border);
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
cursor: default;
transition: all 0.2s ease;
overflow: hidden;
background: rgba(255, 255, 255, 0.02);
}
.ws-layout-panorama-wrapper.has-panorama .ws-layout-panorama-box {
border-style: solid;
border-color: rgba(59, 130, 246, 0.4);
cursor: pointer;
}
.ws-layout-panorama-wrapper.has-panorama .ws-layout-panorama-box:hover {
border-color: rgba(59, 130, 246, 0.8);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
}
.ws-layout-panorama-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.ws-layout-panorama-placeholder {
color: #888;
font-size: 12px;
text-align: center;
line-height: 1.3;
}
.ws-layout-panorama-label {
font-size: 10px;
color: #888;
text-align: center;
}
.ws-layout-image-box {
width: 100%;
/* 保持与wrapper宽度一致的正方形（每张图大小一致、均匀分布） */
aspect-ratio: 1 / 1;
border: 2px dashed var(--border);
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
overflow: hidden;
background: rgba(255, 255, 255, 0.02);
}
.ws-layout-image-wrapper {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
min-width: 0;
}
.ws-layout-image-checkbox-label {
display: flex;
align-items: center;
justify-content: center;
gap: 2px;
cursor: pointer;
font-size: 10px;
color: var(--text3);
width: 100%;
text-align: center;
line-height: 1.1;
}
.ws-layout-image-checkbox-label span {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ws-layout-image-checkbox-label input[type="checkbox"] {
width: 12px;
height: 12px;
accent-color: var(--accent);
margin: 0;
}
.ws-layout-generate-btn {
width: 100%;
padding: 8px 12px;
border: 1px solid var(--border);
border-radius: 4px;
background: transparent;
color: var(--text2);
font-size: 12px;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
height: 40px;
}
.ws-layout-generate-btn:hover:not(:disabled) {
border-color: var(--primary);
color: var(--primary);
}
.ws-layout-generate-btn:disabled {
opacity: 0.7;
cursor: not-allowed;
}
.ws-progress-bar-container {
width: 100%;
height: 8px;
background: rgba(255, 255, 255, 0.1);
border-radius: 4px;
overflow: hidden;
}
.ws-progress-track {
width: 100%;
height: 100%;
background: linear-gradient(90deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 50%, rgba(255,255,255,0.1) 100%);
border-radius: 4px;
overflow: hidden;
position: relative;
}
.ws-progress-bar {
height: 100%;
background: linear-gradient(90deg, var(--primary), #00ff88, var(--primary));
background-size: 200% 100%;
border-radius: 4px;
transition: width 0.3s ease;
position: relative;
}
.ws-progress-bar.ws-progress-animated {
animation: progressScroll 1s linear infinite;
}
@keyframes progressScroll {
0% { background-position: 0% 50%; }
100% { background-position: 200% 50%; }
}
.ws-progress-text {
font-size: 11px;
color: var(--text3);
}
.ws-progress-time {
font-size: 10px;
color: var(--text4);
opacity: 0.7;
}
.ws-progress-flash {
animation: progressFlash 0.5s ease;
}
@keyframes progressFlash {
0%, 100% { opacity: 1; }
50% { opacity: 0.6; }
}
.ws-progress-complete {
color: #00ff88;
font-weight: bold;
}
.ws-progress-error {
color: #ff4444;
font-weight: bold;
}
.ws-layout-image-box:hover {
border-color: var(--primary);
background: rgba(255, 255, 255, 0.05);
}
.ws-layout-image-placeholder {
color: var(--text3);
font-size: 18px;
text-align: center;
padding: 4px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
}
.ws-layout-image-placeholder small {
font-size: 10px;
color: #888;
line-height: 1.2;
}
.ws-layout-image {
width: 100%;
height: 100%;
object-fit: cover;
}
/* 场地卡片：一致性生成按钮行 */
.ws-layout-btn-row {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: 2px;
}
.ws-layout-generate-consistent-btn {
width: 100%;
padding: 8px 12px;
border-radius: 6px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
height: 40px;
border: 1px solid transparent;
background: linear-gradient(135deg, #3a7bd5 0%, #00d2ff 100%);
color: #fff;
box-shadow: 0 2px 8px rgba(58,123,213,0.25);
}
.ws-layout-generate-consistent-btn:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 4px 14px rgba(58,123,213,0.4);
}
.ws-layout-generate-consistent-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
/* 场地卡片：布局分析摘要 */
.ws-layout-la {
margin: 6px 0 2px;
padding: 8px 10px;
border: 1px dashed rgba(58,123,213,0.35);
border-radius: 6px;
background: rgba(58,123,213,0.06);
font-size: 11px;
color: var(--text2);
line-height: 1.55;
}
.ws-layout-la-title {
font-weight: 600;
color: var(--text1);
margin-bottom: 4px;
font-size: 11.5px;
}
.ws-layout-la-desc {
color: var(--text2);
margin-bottom: 3px;
}
.ws-layout-la-meta {
color: var(--text3);
font-size: 10.5px;
}
/* 🚨 场地卡敏感词高亮 — 只改背景色, 不划线不偏移, 保证正文对齐 */
.ws-card-sensitive {
background: rgba(239, 68, 68, 0.45) !important;
color: inherit !important;
border-radius: 2px;
padding: 0;
margin: 0;
text-decoration: none !important; /* ✅ 去掉删除线 */
cursor: pointer;
transition: background 0.15s, box-shadow 0.15s;
user-select: none;
line-height: inherit !important;
vertical-align: baseline;
}
/* 🚨 desc 区敏感词 — 允许换行,nowrap 在 199px 窄卡里会溢出 */
.ws-layout-desc-container .ws-card-sensitive {
white-space: normal !important;
word-break: break-all !important;
font-weight: 600;
}
/* 🚨 analysis value 里的敏感词 — 保持 nowrap(和 label 在同一行) */
.ws-layout-analysis-value .ws-card-sensitive {
white-space: nowrap !important;
}
/* 🚨 desc 内层 — 隔开 flex container,让敏感词 span 恢复 inline */
.ws-layout-desc-inner {
display: block; /* 普通 block, 子孙 span 都是 inline */
width: 100%;
line-height: 1.5;
/* 在 flex column 父容器里贴顶,不被 stretch */
align-self: flex-start;
flex: 0 0 auto;
}
.ws-card-sensitive:hover {
background: rgba(239, 68, 68, 0.7);
box-shadow: 0 0 0 1.5px rgba(239, 68, 68, 0.9);
/* 🚨 去掉 color: #fff —— hover 也只有背景+阴影变化 */
}
/* 🚨 已修改敏感词 — 绿色背景, 点击恢复原词 */
.ws-card-sensitive.ws-fixed {
background: rgba(34, 197, 94, 0.4) !important;
/* 🚨 去掉 color: #bbf7d0 —— 文字保持深色,只有背景变绿 */
color: inherit !important;
text-decoration: none !important; /* 去掉删除线 */
}
.ws-card-sensitive.ws-fixed:hover {
background: rgba(34, 197, 94, 0.65) !important;
box-shadow: 0 0 0 1.5px rgba(34, 197, 94, 0.85);
/* 🚨 去掉 color: #fff */
}
/* 描述区的已修改词也加粗 */
.ws-layout-desc-container .ws-card-sensitive.ws-fixed {
font-weight: 600;
}
/* 描述区的敏感词稍微大一点 */
.ws-layout-desc-container .ws-card-sensitive {
font-weight: 600;
}
/* 🔒 布景设置锁定 — GUI 与无限画布共用：
拦截 div 型点击入口（描述/属性气泡、空图上传、空全景上传），
按钮类控件由 applyLayoutLockToCards 统一 disabled。
图片预览、下载、场景视频播放保持可用。 */
.ws-layout-card.ws-layout-card-locked .ws-layout-desc-container,
.ws-layout-card.ws-layout-card-locked .ws-layout-analysis,
.ws-layout-card.ws-layout-card-locked .ws-layout-image-wrapper.no-image .ws-layout-image-box,
.ws-layout-card.ws-layout-card-locked .ws-layout-panorama-wrapper.no-panorama .ws-layout-panorama-box,
.ws-layout-card.ws-layout-card-locked .ws-bubble-trigger {
pointer-events: none !important;
opacity: 0.55;
cursor: not-allowed;
}
/* 视角标签：按类型微调（视觉上区分） */
.ws-vp-item.ws-vp-topview .ws-layout-image-box {
border: 1.5px solid #3a7bd5;
}
.ws-vp-item.ws-vp-eye_level .ws-layout-image-box {
border: 1.5px solid #00d2ff;
}
.ws-vp-item.ws-vp-high_angle .ws-layout-image-box {
border: 1.5px solid #6be585;
}
.ws-vp-item.ws-vp-wide .ws-layout-image-box {
border: 1.5px solid #f093fb;
}
.ws-vp-item.ws-vp-detail .ws-layout-image-box {
border: 1.5px solid #f5576c;
}
.ws-vp-item.ws-vp-special .ws-layout-image-box {
border: 1.5px solid #ffa751;
}
.ws-preview-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.8);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}
.ws-preview-container {
background: var(--bg2);
border-radius: 8px;
max-width: 90vw;
max-height: 90vh;
overflow: hidden;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
.ws-preview-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
border-bottom: 1px solid var(--border);
}
.ws-preview-title {
font-weight: bold;
color: var(--text1);
}
.ws-preview-close {
background: none;
border: none;
color: var(--text2);
font-size: 24px;
cursor: pointer;
padding: 0 8px;
}
.ws-preview-content {
padding: 16px;
max-height: 70vh;
overflow: auto;
}
.ws-preview-image {
max-width: 100%;
max-height: 60vh;
display: block;
margin: 0 auto;
}
.ws-preview-actions {
display: flex;
gap: 12px;
padding: 12px 16px;
border-top: 1px solid var(--border);
}
.ws-preview-btn {
flex: 1;
padding: 8px 16px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
transition: all 0.2s ease;
white-space: nowrap;
}
.ws-download-btn {
background: var(--primary);
color: white;
}
.ws-download-btn:hover {
background: var(--primary-dark);
}
.ws-upload-btn {
background: rgba(50, 205, 50, 0.2);
color: #32cd32;
border: 1px solid rgba(50, 205, 50, 0.3);
}
.ws-upload-btn:hover {
background: rgba(50, 205, 50, 0.3);
}
.ws-delete-btn {
background: rgba(255, 99, 71, 0.2);
color: #ff6347;
border: 1px solid rgba(255, 99, 71, 0.3);
}
.ws-delete-btn:hover {
background: rgba(255, 99, 71, 0.3);
}
.ws-prop-list {
width: 100%;
}
.ws-prop-empty {
text-align: center;
color: var(--text3);
padding: 40px;
font-style: italic;
}
.ws-prop-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 10px;
}
.ws-prop-grid > * {
min-width: 0;
}
.ws-prop-card {
display: grid;
grid-template-rows: 40px 1px 48px auto 120px auto auto auto;
grid-template-columns: minmax(0, 1fr);
gap: 6px;
padding: 8px;
background: rgba(0, 0, 0, 0.15);
border: 1px solid var(--border);
border-radius: 10px;
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
transition: all 0.2s;
position: relative;
min-height: 280px;
overflow: hidden;
}
.ws-prop-card * {
max-width: 100%;
min-width: 0;
box-sizing: border-box;
overflow-wrap: break-word;
}
.ws-prop-card img {
max-width: 100%;
width: 100%;
height: auto;
object-fit: contain;
display: block;
}
.ws-prop-card .ws-prop-slots {
flex-wrap: nowrap;
}
.ws-prop-card .ws-prop-slots > div {
min-width: 0;
max-width: 100%;
}
.ws-prop-card .ws-prop-actions {
flex-wrap: wrap;
gap: 4px;
}
.ws-prop-card .ws-prop-actions button {
font-size: 10px;
padding: 3px 6px;
white-space: nowrap;
}
.ws-prop-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.ws-prop-card-single {
background: color-mix(in srgb, var(--gold) 12%, var(--bg-card));
border-color: color-mix(in srgb, var(--gold) 40%, transparent);
}
.ws-prop-card-multi {
background: color-mix(in srgb, var(--blue) 12%, var(--bg-card));
border-color: color-mix(in srgb, var(--blue) 40%, transparent);
}
.ws-prop-card-single:hover {
background: color-mix(in srgb, var(--gold) 20%, var(--bg-hover));
border-color: color-mix(in srgb, var(--gold) 60%, transparent);
}
.ws-prop-card-multi:hover {
background: color-mix(in srgb, var(--blue) 20%, var(--bg-hover));
border-color: var(--blue);
}
.ws-prop-header {
display: flex;
align-items: center;
gap: 6px;
min-height: 0;
overflow: visible; /* ← 允许子元素溢出（prop-id 气泡是 fixed 定位，不受影响，但这里保持一致） */
}
.ws-prop-checkbox {
margin: 0;
width: 16px;
height: 16px;
cursor: pointer;
flex-shrink: 0;
}
.ws-prop-icon {
font-size: 20px;
flex-shrink: 0;
opacity: 0.8;
}
.ws-prop-main {
flex: 1;
min-width: 0;
overflow: hidden;
}
.ws-prop-id-row {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.ws-prop-id {
font-size: 11px;
color: var(--cyan);
letter-spacing: 1px;
margin-bottom: 1px;
}
.ws-prop-name {
font-size: 13px;
color: var(--text);
font-weight: 500;
word-break: break-word;
line-height: 1.4;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ws-prop-description {
font-size: 12px;
color: var(--text3);
margin-top: 2px;
padding: 4px 8px;
background: rgba(0, 0, 0, 0.2);
border-radius: 4px;
line-height: 1.4;
word-break: break-word;
cursor: text;
min-height: 0;
max-height: 48px;
overflow-y: auto;
}
.ws-prop-description[contenteditable="true"]:focus {
outline: 1px solid var(--blue);
background: rgba(0, 0, 0, 0.3);
}
.ws-prop-save-btn {
padding: 4px 12px;
background: var(--green);
color: var(--bg-dark);
border: none;
border-radius: 4px;
font-size: 12px;
cursor: pointer;
}
.ws-prop-save-btn:hover {
filter: brightness(0.85);
}
.ws-prop-restore-btn {
padding: 4px 12px;
background: var(--text3);
color: var(--bg-dark);
border: none;
border-radius: 4px;
font-size: 12px;
cursor: pointer;
}
.ws-prop-restore-btn:hover {
filter: brightness(0.85);
}
.ws-prop-restore-small {
display: inline-block;
width: 16px;
height: 16px;
line-height: 14px;
font-size: 12px;
background: transparent;
border: none;
color: #e74c3c;
cursor: pointer;
padding: 0;
margin-left: 4px;
border-radius: 2px;
vertical-align: middle;
}
.ws-prop-restore-small:hover {
background: rgba(231, 76, 60, 0.15);
}
.ws-prop-name {
display: flex;
align-items: center;
gap: 4px;
}
.ws-prop-scenes {
font-size: 11px;
color: var(--text3);
margin-top: 4px;
line-height: 1.4;
}
.ws-prop-scenes-label {
font-size: 11px;
color: var(--text3);
margin-top: 4px;
}
.ws-prop-locations {
margin-top: 2px;
}
.ws-prop-location {
font-size: 11px;
color: var(--text3);
line-height: 1.4;
padding-left: 8px;
}
.ws-prop-id {
font-size: 11px;
color: var(--cyan);
letter-spacing: 1px;
margin-bottom: 1px;
cursor: help;
position: relative;
display: inline-block;
}
.ws-prop-id:hover::after {
content: attr(data-locations);
position: absolute;
top: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.85);
color: var(--text);
padding: 12px 16px;
border-radius: 8px;
font-size: 12px;
white-space: pre-wrap;
word-wrap: break-word;
max-width: 320px;
min-width: 200px;
width: max-content;
max-width: 320px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
border: 1px solid rgba(0, 0, 0, 0.3);
z-index: 1000;
line-height: 1.6;
opacity: 1;
}
.ws-prop-id:hover::before {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.3);
}
.ws-prop-desc {
font-size: 12px;
color: var(--text3);
line-height: 1.5;
padding: 8px 10px;
background: rgba(0, 0, 0, 0.1);
border-radius: 6px;
word-break: break-word;
}
.ws-prop-divider {
height: 100%;
background: var(--border);
width: 100%;
}
.ws-prop-image-box {
padding: 0;
height: 130px;
background: transparent;
display: block;
flex-shrink: 0;
flex-grow: 0;
border: none;
border-radius: 0;
}
/* ===== 道具卡片图片外框 + 黑色编号条（F1） ===== */
.ws-prop-image-frame {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: 2px dashed #999;
border-radius: 4px;
overflow: hidden;
background: #FAFAFA;
cursor: pointer;
transition: border-color .2s;
}
.ws-prop-image-frame:hover {
border-color: #1E90FF;
}
.ws-prop-image-frame .ws-prop-image-wrapper {
flex: 1;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 4px;
min-height: 0;
border: none;
border-radius: 0;
background: transparent;
max-width: none;
max-height: none;
}
.ws-prop-image-frame .ws-prop-image-wrapper img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.ws-prop-image-frame .ws-prop-image-placeholder {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
color: #888;
padding: 8px;
}
.ws-prop-image-frame .ws-prop-image-id-label {
width: 100%;
padding: 3px 0;
background: #111;
color: #FFF;
font-size: 13px;
font-weight: 700;
font-family: 'Consolas', 'Courier New', monospace;
text-align: center;
letter-spacing: 2px;
border-top: 1px solid #333;
flex-shrink: 0;
}
/* ===== 道具卡片尺寸信息行（F5） ===== */
.ws-prop-dimension-line {
margin-top: 4px;
padding: 3px 6px;
font-size: 11px;
color: #2B7FC6;
background: #F0FAFF;
border: 1px solid #B3E0FF;
border-radius: 3px;
display: inline-block;
}
.ws-prop-dimension-line small { color: #888; margin-left: 4px; }
/* ===== 三视图进度条（F2） ===== */
.ws-prop-threeviews-progress {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
gap: 10px;
}
.ws-prop-threeviews-step {
font-size: 13px;
color: #2B7FC6;
font-weight: 600;
}
.ws-prop-image-container {
display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
}
.ws-prop-image-wrapper {
border: 2px solid var(--blue);
border-radius: 6px;
padding: 4px;
background: white;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
max-width: 200px;
max-height: 100px;
box-sizing: border-box;
}
.ws-prop-image-wrapper img {
max-width: 100%;
max-height: 100%;
display: block;
object-fit: contain;
}
.ws-prop-actions {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 4px;
margin-top: auto;
padding-bottom: 0;
min-height: auto;
}
.ws-prop-image-placeholder {
text-align: center;
color: var(--text3);
font-size: 12px;
padding: 20px 0;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.ws-prop-status {
font-size: 14px;
font-weight: bold;
color: var(--green);
transition: opacity 0.5s ease;
}
.ws-prop-flash {
animation: propFlash 1s ease-in-out;
}
@keyframes propFlash {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
.ws-prop-image-upload-hidden {
display: none;
}
.ws-prop-image-grid {
display: flex;
gap: 8px;
justify-content: center;
flex-wrap: wrap;
}
.ws-prop-image-item {
border: 2px solid var(--blue);
border-radius: 4px;
padding: 4px;
background: white;
}
.ws-prop-image-item img {
max-width: 80px;
max-height: 80px;
display: block;
}
.ws-prop-image-label {
text-align: center;
font-size: 10px;
color: var(--text3);
margin-top: 4px;
}
.ws-prop-image-caption {
text-align: center;
font-size: 11px;
color: var(--cyan);
font-weight: 500;
margin-top: 8px;
}
.ws-prop-generate-btn {
width: 100%;
padding: 6px 12px;
background: var(--blue);
color: var(--bg-dark);
border: none;
border-radius: 6px;
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;
}
.ws-prop-generate-btn:hover {
background: var(--cyan);
}
.ws-prop-generate-btn:disabled {
background: var(--text3);
cursor: not-allowed;
}
.ws-prop-video-row {
display: flex;
gap: 4px;
width: 100%;
}
.ws-prop-video-btn,
.ws-prop-clip-btn {
flex: 1;
background: var(--blue);
color: var(--bg-dark);
border: none;
border-radius: 6px;
padding: 5px 8px;
font-size: 11px;
font-weight: 500;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
transition: background 0.2s;
white-space: nowrap;
min-width: 0;
}
.ws-prop-video-btn:hover,
.ws-prop-clip-btn:hover {
background: var(--cyan);
}
.ws-prop-video-btn:disabled,
.ws-prop-clip-btn:disabled {
background: var(--text3);
cursor: not-allowed;
}
.ws-prop-video-dot {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
flex-shrink: 0;
position: relative;
}
.ws-prop-video-dot.on {
background: #4caf50;
box-shadow: 0 0 4px #4caf50, 0 0 8px rgba(76,175,80,0.6);
}
.ws-prop-video-dot.off {
background: #c62828;
box-shadow: 0 0 3px rgba(198,40,40,0.5);
}
/* 抽帧预览 grid */
.ws-prop-spatial-frames {
background: rgba(0,0,0,0.4);
border-radius: 6px;
padding: 10px;
margin-top: 10px;
}
.ws-prop-spatial-frames-title {
font-size: 12px;
color: #fff;
margin-bottom: 8px;
}
.ws-prop-spatial-frames-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
.ws-prop-spatial-frame-cell {
text-align: center;
font-size: 10px;
color: #aaa;
}
.ws-prop-spatial-frame-cell img {
width: 100%;
border-radius: 4px;
background: #fff;
}
.ws-prop-spatial-frame-cell.big {
grid-column: span 1;
font-size: 9px;
}
.ws-prop-clip-apply-btn {
background: linear-gradient(135deg, #43a047, #1b5e20);
color: #fff; border: none; border-radius: 4px;
padding: 6px 12px; font-size: 12px; cursor: pointer;
}
.ws-prop-clip-apply-btn:disabled { background: var(--text3); cursor: not-allowed; }
.ws-prop-clip-cancel-btn {
background: #555; color: #fff; border: none; border-radius: 4px;
padding: 6px 12px; font-size: 12px; cursor: pointer;
}
/* ⭐ 抽帧预览框（正/侧/反 + 三视图大卡） */
.ws-prop-spatial-frames {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 6px;
padding: 8px;
flex-shrink: 0;
width: 100%;
box-sizing: border-box;
overflow: hidden;
}
.ws-prop-spatial-frames-title {
color: #ccc; font-size: 12px; font-weight: 600;
}
.ws-prop-spatial-frames-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 6px;
margin-bottom: 6px;
width: 100%;
position: relative;
}
.ws-prop-spatial-frame-cell {
display: flex; flex-direction: column; gap: 2px;
min-width: 0;
}
.ws-prop-spatial-frame-cell.big {
grid-column: 1 / -1;
}
.ws-prop-spatial-frame-box {
background: transparent;
border: 1px solid #444;
border-radius: 4px;
aspect-ratio: 1/1;
overflow: hidden;
display: flex; align-items: center; justify-content: center;
min-height: 60px;
width: 100%;
box-sizing: border-box;
}
.ws-prop-spatial-threeviews-box {
margin-top: 0;
}
.ws-prop-spatial-threeviews-box .ws-prop-spatial-frame-box {
aspect-ratio: 1600 / 480; /* 和三视图大卡实际比例一致（3 图横排） */
background: transparent;
border: 1px solid #444;
border-radius: 4px;
}
.ws-prop-spatial-frame-box img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
border-radius: 3px;
}
.ws-prop-frame-empty {
color: #666; font-size: 10px; text-align: center; padding: 4px;
}
.ws-prop-spatial-frame-label {
color: #888; font-size: 9px; text-align: center;
padding-bottom: 2px;
}
.ws-prop-spatial-frame-label.big-label {
color: #aaa; font-size: 10px; font-weight: 500;
padding-bottom: 2px;
}
/* 剪切按钮：inline 小按钮，跟在标签后面 */
.ws-spatial-clip-btn-inline {
background: linear-gradient(135deg, #667eea, #4a5fd6);
color: #fff; border: none; border-radius: 4px;
padding: 2px 10px; font-size: 11px; font-weight: 500; cursor: pointer;
line-height: 16px;
}
.ws-spatial-clip-btn-inline:hover { background: linear-gradient(135deg, #7b8ff0, #5a6fe0); }
.ws-spatial-clip-btn-inline:disabled { background: #444; color: #888; cursor: not-allowed; }
.ws-prop-spatial-gen-btn {
background: linear-gradient(135deg, #1976d2, #0d47a1);
color: #fff; border: none; border-radius: 4px;
padding: 8px 12px; font-size: 12px; cursor: pointer;
display: flex; align-items: center; gap: 6px; justify-content: center;
}
.ws-prop-card-combined {
border-color: var(--gold);
border-width: 2px;
}
/* 扩展道具卡（如 D0122-1、D0122-2）：黄色背景标识 */
.ws-prop-card-expanded {
background: color-mix(in srgb, #FFEB3B 18%, var(--bg-card)) !important;
border-color: #FBC02D !important;
border-width: 2px;
}
.ws-prop-card-expanded:hover {
background: color-mix(in srgb, #FFEB3B 28%, var(--bg-hover)) !important;
}
.ws-prop-analysis {
display: flex;
flex-direction: column;
gap: 4px;
padding: 0;
font-size: 12px;
}
.ws-prop-analysis-item {
display: flex;
align-items: center;
background: rgba(255, 255, 255, 0.1);
padding: 4px 8px;
border-radius: 4px;
border: 1px solid rgba(255, 255, 255, 0.15);
min-height: 32px;
}
.ws-prop-analysis-item:empty {
background: transparent;
border: none;
padding: 0;
min-height: 0;
}
.ws-prop-analysis-label {
color: var(--text2);
margin-right: 6px;
flex-shrink: 0;
white-space: nowrap;
font-weight: 500;
font-size: 12px;
}
.ws-prop-analysis-input {
flex: 1;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 3px;
padding: 2px 6px;
color: var(--text);
font-size: 12px;
font-weight: 500;
outline: none;
word-break: break-all;
min-width: 0;
}
.ws-prop-analysis-input:focus {
border-color: var(--blue);
background: rgba(255, 255, 255, 0.15);
}
.ws-prop-analysis-actions {
display: flex;
gap: 8px;
margin-top: 6px;
justify-content: flex-end;
padding-top: 6px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.ws-prop-combine-btn {
width: 100%;
padding: 6px 12px;
background: var(--gold);
color: var(--bg-dark);
border: none;
border-radius: 6px;
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
}
.ws-prop-combine-btn:hover {
filter: brightness(0.85);
}
.ws-prop-combined-list {
margin-top: 12px;
padding: 10px;
background: rgba(0, 0, 0, 0.2);
border-radius: 6px;
border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
}
.ws-prop-combined-header {
font-size: 12px;
font-weight: 600;
color: var(--gold);
margin-bottom: 8px;
}
.ws-prop-combined-items {
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 10px;
}
.ws-prop-combined-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 4px 8px;
background: rgba(0, 0, 0, 0.3);
border-radius: 4px;
}
.ws-prop-combined-item span {
font-size: 12px;
color: var(--text2);
}
.ws-prop-separate-btn {
padding: 2px 8px;
background: color-mix(in srgb, var(--red) 20%, transparent);
color: var(--red);
border: 1px solid color-mix(in srgb, var(--red) 50%, transparent);
border-radius: 3px;
font-size: 11px;
cursor: pointer;
transition: all 0.2s;
}
.ws-prop-separate-btn:hover {
background: color-mix(in srgb, var(--red) 30%, transparent);
border-color: var(--red);
}
.ws-prop-combined-locations {
padding-top: 8px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.ws-prop-combined-label {
font-size: 11px;
color: var(--text3);
margin-bottom: 4px;
}
.ws-prop-combined-location-list {
font-size: 11px;
color: var(--text2);
word-break: break-all;
}
.ws-combined-bubble-backdrop {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
z-index: 1000;
opacity: 0;
transition: opacity 0.3s ease;
}
.ws-combined-bubble-backdrop.show {
opacity: 1;
}
.ws-combined-bubble {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.9);
background: var(--bg-card);
border-radius: 12px;
padding: 20px;
width: 90%;
max-width: 500px;
max-height: 80vh;
overflow-y: auto;
z-index: 1001;
opacity: 0;
transition: all 0.3s ease;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
border: 1px solid var(--gold);
}
.ws-combined-bubble.show {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
.ws-combined-bubble-header {
font-size: 16px;
font-weight: 600;
color: var(--gold);
margin-bottom: 16px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(255, 204, 0, 0.2);
}
.ws-combined-bubble-content {
display: flex;
flex-direction: column;
gap: 12px;
}
.ws-combined-bubble-item {
background: rgba(0, 0, 0, 0.2);
border-radius: 8px;
padding: 12px;
}
.ws-combined-bubble-item-id {
font-size: 14px;
font-weight: 600;
color: var(--text);
margin-bottom: 4px;
}
.ws-combined-bubble-item-desc {
font-size: 12px;
color: var(--text2);
margin-bottom: 8px;
word-break: break-all;
}
.ws-combined-bubble-item-locations {
margin-bottom: 8px;
}
.ws-combined-bubble-item-locations-label {
font-size: 11px;
color: var(--text3);
margin-bottom: 2px;
}
.ws-combined-bubble-item-locations-list {
font-size: 11px;
color: var(--text2);
word-break: break-all;
}
.ws-combined-bubble-separate-btn {
padding: 4px 10px;
background: rgba(255, 51, 102, 0.2);
color: var(--red);
border: 1px solid rgba(255, 51, 102, 0.5);
border-radius: 4px;
font-size: 12px;
cursor: pointer;
transition: all 0.2s;
}
.ws-combined-bubble-separate-btn:hover {
background: rgba(255, 51, 102, 0.3);
border-color: var(--red);
}
.ws-combined-bubble-close {
position: absolute;
top: 10px;
right: 10px;
width: 28px;
height: 28px;
background: rgba(255, 255, 255, 0.1);
border: none;
border-radius: 50%;
color: var(--text2);
font-size: 14px;
cursor: pointer;
transition: all 0.2s;
}
.ws-combined-bubble-close:hover {
background: rgba(255, 255, 255, 0.2);
color: var(--text);
}
.ws-prop-preview-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.8);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}
.ws-prop-preview-container {
background: var(--bg-panel);
border-radius: 12px;
padding: 20px;
min-width: 400px;
min-height: 300px;
max-width: 95vw;
max-height: 95vh;
width: 70%;
height: 80vh;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
display: flex;
flex-direction: column;
}
.ws-prop-preview-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
padding-bottom: 10px;
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
.ws-prop-preview-title {
font-size: 18px;
font-weight: 600;
color: var(--text);
}
.ws-prop-preview-close {
background: none;
border: none;
font-size: 20px;
cursor: pointer;
color: var(--text-muted);
padding: 4px 8px;
border-radius: 4px;
transition: background 0.2s;
}
.ws-prop-preview-close:hover {
background: rgba(255, 255, 255, 0.1);
}
.ws-prop-preview-content {
flex: 1;
overflow: hidden;
display: flex;
justify-content: center;
align-items: stretch;
position: relative;
margin-bottom: 12px;
min-height: 0;
}
.ws-prop-preview-wrapper {
border: 2px solid var(--blue);
border-radius: 8px;
padding: 10px;
background: white;
overflow: hidden;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
}
.ws-prop-preview-wrapper img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
display: block;
}
.ws-prop-preview-grid {
display: flex;
gap: 20px;
justify-content: center;
align-items: center;
flex-wrap: wrap;
width: 100%;
height: 100%;
overflow: auto;
padding: 10px;
box-sizing: border-box;
}
.ws-prop-preview-item {
border: 2px solid var(--blue);
border-radius: 8px;
padding: 10px;
background: white;
text-align: center;
box-sizing: border-box;
}
.ws-prop-preview-item img {
max-width: 100%;
max-height: 300px;
object-fit: contain;
display: block;
}
.ws-prop-preview-label {
font-size: 12px;
color: var(--text-muted);
margin-top: 8px;
}
.ws-prop-preview-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
justify-content: center;
flex-shrink: 0;
}
.ws-prop-preview-btn {
padding: 8px 16px;
background: var(--border);
color: var(--text);
border: none;
border-radius: 6px;
font-size: 13px;
cursor: pointer;
transition: background 0.2s;
}
.ws-prop-preview-btn:hover {
background: var(--cyan);
color: white;
}
.ws-prop-preview-btn-primary {
background: var(--blue);
color: white;
}
.ws-prop-preview-btn-danger {
background: var(--red);
color: white;
}
.ws-prop-preview-btn-danger:hover {
background: #cc0000;
}
.ws-prop-image-upload {
display: none;
}
.ws-prop-desc {
font-size: 11px;
color: var(--text3);
margin-top: 4px;
line-height: 1.4;
word-break: break-word;
}
.ws-arrow-hidden {
display: none !important;
}
.ws-section-hidden {
display: none !important;
}
/* 可折叠内容 */
.ws-collapse-content {
margin-top: 12px;
}
.ws-collapse-content.collapsed {
display: none !important;
}
/* 点击分场项目卡后『强制展开+滚动』阶段：临时禁掉 section/collapse 的所有过渡/高度动画
→ 保证从 collapsed 展开时，高度 + 任何 bar 动画不导致"先滚到一半、又被容器撑开、再往回抖"的可见抖动 */
#wsCutProSection.ws-cutpro-notrans {
/* 最关键：section 根节点可能自带 style="display:none;" 或 .ws-section-hidden → 这里 ID 选择器优先级碾压 .ws-section-hidden 的 class 选择器
→ 只要锁在，section 一定 display:block，不会出现"我删了 collapsed，但父级 section 还是 none 导致展开区完全看不见"。 */
display: block !important;
height: auto !important;
visibility: visible !important;
max-height: none !important;
overflow: visible !important;
}
#wsCutProSection.ws-cutpro-notrans,
#wsCutProSection.ws-cutpro-notrans *,
#wsCutProCollapseContent.ws-cutpro-notrans,
#wsCutProCollapseContent.ws-cutpro-notrans * {
transition: none !important;
-webkit-transition: none !important;
animation: none !important;
-webkit-animation: none !important;
transform: none !important;
}
#wsCutProCollapseContent.ws-cutpro-notrans {
/* 碾压 .ws-collapse-content.collapsed { display:none } */
display: block !important;
height: auto !important;
max-height: none !important;
overflow: visible !important;
visibility: visible !important;
}
.ws-cards {
display: flex;
gap: 16px;
align-items: flex-start;
flex-wrap: nowrap;
}
.ws-cards.ws-single-mode {
align-items: stretch;
}
.ws-right-stack {
flex: 0 0 300px;
width: 300px;
display: flex;
flex-direction: column;
gap: 12px;
min-width: 300px;
max-width: 320px;
}
.ws-right-stack > .ws-card {
min-width: 0;
padding: 12px;
}
.ws-card {
flex: 1;
background: var(--bg-panel);
border: 1px solid var(--border);
border-radius: 8px;
padding: 16px;
}
.ws-left-stack {
flex: 1 1 0;
display: flex;
flex-direction: column;
gap: 16px;
min-width: 0;
overflow: hidden;
}
.ws-left-stack > .ws-card {
min-width: 0;
}
.ws-poster-card {
display: flex;
flex-direction: row;
gap: 16px;
}
.ws-poster {
height: 200px;
width: 160px;
flex-shrink: 0;
border-radius: 6px;
overflow: hidden;
background: #0a0f1a;
border: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
}
.ws-poster img {
width: 100%;
height: 100%;
object-fit: contain;
}
.ws-poster-empty {
font-size: 13px;
color: var(--text3);
text-align: center;
padding: 12px;
}
.ws-poster-summary {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
}
.ws-summary {
flex: 1;
min-height: 0;
border: 1px solid var(--border);
border-radius: 6px;
padding: 8px;
margin-top: 8px;
overflow: hidden;
}
.ws-summary-title {
color: var(--cyan);
font-size: 12px;
font-weight: 600;
margin-bottom: 4px;
cursor: pointer;
user-select: none;
display: flex;
align-items: center;
gap: 4px;
transition: text-shadow .15s;
}
.ws-summary-title:hover {
text-shadow: 0 0 6px rgba(91,200,255,.4);
}
.ws-summary-title::after {
content: '⤢';
font-size: 11px;
opacity: .5;
margin-left: 2px;
}
.ws-summary-text {
flex: 1;
font-size: 12px;
color: var(--text2);
line-height: 1.6;
overflow-y: auto;
cursor: pointer;
transition: color .15s;
}
.ws-summary-text:hover { color: var(--text); }
/* ═══════ 故事简介阅读气泡（可拖拽 + 可调整大小） ═══════ */
.ws-summary-bubble {
position: fixed;
z-index: 10001;
width: 520px; height: 380px;
min-width: 300px; min-height: 200px;
max-width: 90vw; max-height: 85vh;
background:
linear-gradient(180deg, rgba(91,200,255,.04), rgba(157,78,221,.03)),
rgba(10,14,23,.96);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid var(--cyan);
border-radius: 10px;
box-shadow: 0 12px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(91,200,255,.1) inset;
display: flex;
flex-direction: column;
animation: wsModalPopIn 0.2s cubic-bezier(.2,.8,.3,1.1);
pointer-events: auto;
}
.ws-sb-header {
display: flex;
align-items: center;
gap: 14px;
padding: 10px 16px;
border-bottom: 1px solid var(--border);
flex-shrink: 0;
cursor: move; /* 🖱️ header 可拖拽 */
user-select: none;
background: rgba(0,0,0,.2);
border-radius: 10px 10px 0 0;
}
.ws-sb-title {
font-size: 13px;
font-weight: 600;
color: var(--cyan);
flex: 1;
}
.ws-sb-zoom {
display: flex; align-items: center; gap: 6px;
background: rgba(0,0,0,.3);
border-radius: 6px;
padding: 3px 6px;
}
.ws-sb-btn {
width: 24px; height: 20px;
border: 1px solid var(--border);
background: transparent;
color: var(--text2);
font-size: 11px; font-weight: 600;
border-radius: 4px;
cursor: pointer;
line-height: 1;
transition: all .15s;
}
.ws-sb-btn:hover { border-color: var(--cyan); color: var(--cyan); }
.ws-sb-size-label {
font-size: 11px; color: var(--text3);
min-width: 22px; text-align: center; font-variant-numeric: tabular-nums;
}
.ws-sb-close {
width: 24px; height: 24px;
border: none; background: transparent;
color: var(--text3); font-size: 14px;
cursor: pointer; border-radius: 4px;
transition: all .15s;
line-height: 1;
}
.ws-sb-close:hover { background: rgba(255,77,109,.15); color: var(--red); }
.ws-sb-body {
padding: 16px 20px;
color: var(--text);
flex: 1;
overflow-y: auto;
user-select: text;
white-space: pre-wrap;
word-break: break-word;
}
/* 🖱️ 右下角 resize handle */
.ws-sb-resize {
position: absolute;
right: 2px; bottom: 2px;
width: 16px; height: 16px;
cursor: nwse-resize;
background:
linear-gradient(135deg, transparent 50%, var(--cyan) 50%);
opacity: .6;
border-bottom-right-radius: 8px;
}
.ws-sb-resize:hover { opacity: 1; }
/* 主题适配 */
body.theme-romance .ws-summary-bubble {
background:
linear-gradient(180deg, rgba(255,107,157,.06), rgba(123,97,255,.05)),
rgba(11,12,26,.96);
border-color: rgba(255,107,157,.4);
}
body.theme-professional .ws-summary-bubble {
background: rgba(10,10,18,.98);
border: 1px solid rgba(255,255,255,.2);
font-family: Consolas, "Courier New", monospace;
}
.ws-right-content {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
}
.ws-info-rows {
display: flex;
flex-direction: column;
gap: 4px;
}
/* 原著作者卡�?*/
.ws-author-card {
display: flex;
flex-direction: column;
}
.ws-author-title {
color: var(--gold);
font-size: 14px;
font-weight: 600;
margin-bottom: 12px;
}
.ws-author {
display: flex;
align-items: center;
gap: 14px;
}
.ws-author-photo {
width: 64px;
height: 64px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--gold);
flex-shrink: 0;
}
.ws-author-avatar {
width: 64px;
height: 64px;
border-radius: 50%;
background: rgba(255,170,0,0.1);
color: var(--gold);
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-weight: 600;
flex-shrink: 0;
}
.ws-team-input {
display: flex;
flex-direction: column;
gap: 4px;
}
.ws-author-name {
font-size: 15px;
color: var(--text);
font-weight: 600;
}
.ws-author-role {
font-size: 12px;
color: var(--gold);
}
.ws-genre-scroll {
display: flex;
gap: 10px;
overflow-x: auto;
padding: 8px 0;
scrollbar-width: thin;
scrollbar-color: var(--gold) transparent;
}
.ws-genre-scroll::-webkit-scrollbar {
height: 6px;
}
.ws-genre-scroll::-webkit-scrollbar-track {
background: transparent;
}
.ws-genre-scroll::-webkit-scrollbar-thumb {
background: var(--gold);
border-radius: 3px;
}
/* 类型介绍卡片样式（在右侧） */
.ws-genre-intro-card {
display: flex;
flex-direction: column;
gap: 4px;
flex: 1;
min-height: 0;
height: 100%;
overflow: hidden;
padding: 10px !important;
font-size: 11px;
}
.ws-genre-intro-card .ws-genre-intro-title {
font-size: 13px;
font-weight: 600;
color: var(--cyan);
margin-bottom: 6px;
padding-bottom: 4px;
border-bottom: 1px solid var(--border);
}
.ws-genre-intro-card .ws-genre-intro-content {
font-size: 11px;
line-height: 1.5;
color: var(--text2);
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
}
/* 主类型介绍样式 */
.ws-genre-intro-card .ws-genre-intro-row {
display: flex;
gap: 12px;
align-items: flex-start;
margin-bottom: 6px;
}
.ws-genre-intro-card .ws-genre-intro-img {
flex: 0 0 72px;
width: 72px;
height: 72px;
border-radius: 10px;
overflow: hidden;
background: var(--bg-panel);
border: 2px solid var(--cyan);
display: flex;
align-items: center;
justify-content: center;
}
.ws-genre-intro-card .ws-genre-intro-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.ws-genre-intro-card .ws-genre-intro-img.ws-img-fallback {
background: var(--bg-hover);
}
.ws-genre-intro-card .ws-genre-intro-text {
flex: 1;
min-width: 0;
}
.ws-genre-intro-card .ws-genre-intro-text h4 {
margin-top: 0;
}
/* 子类型介绍样式 */
.ws-genre-intro-card .ws-subgenre-intro-row {
display: flex;
gap: 10px;
align-items: flex-start;
margin-top: 4px;
}
.ws-genre-intro-card .ws-subgenre-intro-img {
flex: 0 0 60px;
width: 60px;
height: 60px;
border-radius: 8px;
overflow: hidden;
background: var(--bg-panel);
border: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
}
.ws-genre-intro-card .ws-subgenre-intro-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.ws-genre-intro-card .ws-subgenre-intro-img.ws-img-fallback {
background: var(--bg-hover);
}
.ws-genre-intro-card .ws-subgenre-intro-text {
flex: 1;
min-width: 0;
}
.ws-genre-intro-card .ws-subgenre-intro-text h4 {
margin-top: 0;
}
.ws-genre-intro-card h4, .ws-genre-intro-card h5 {
color: var(--gold);
font-size: 12px;
margin: 6px 0 3px 0;
}
.ws-genre-intro-card ul {
padding-left: 14px;
margin: 3px 0;
}
.ws-genre-intro-card li {
margin: 1px 0;
font-size: 11px;
}
/* 类型选择与介绍左右布局 */
.ws-genre-container {
display: flex;
gap: 16px;
align-items: flex-start;
}
.ws-genre-left {
flex: 1;
min-width: 0;
}
.ws-genre-right {
flex: 0 0 320px;
max-width: 320px;
}
/* 类型介绍区域 */
.ws-genre-intro {
padding: 16px;
background: rgba(0, 204, 255, 0.05);
border: 1px solid rgba(0, 204, 255, 0.2);
border-radius: 8px;
height: 100%;
min-height: 200px;
}
.ws-genre-intro-title {
font-size: 14px;
font-weight: 600;
color: var(--cyan);
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 1px solid rgba(0, 204, 255, 0.2);
}
.ws-genre-intro-content {
font-size: 13px;
color: var(--text2);
line-height: 1.6;
overflow-y: auto;
flex: 1 1 auto;
min-height: 0;
}
.ws-genre-intro-content h4 {
margin-top: 0;
}
.ws-genre-intro-content ul {
margin: 8px 0;
}
.ws-genre-intro-content li {
margin: 4px 0;
}
.ws-genre-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
min-width: 130px;
cursor: pointer;
}
.ws-genre-image {
width: 120px;
height: 120px;
border-radius: 8px;
object-fit: cover;
border: 1px solid var(--gold);
transition: all 0.3s ease;
}
.ws-genre-item:hover .ws-genre-image {
transform: scale(1.05);
border-color: var(--gold);
box-shadow: 0 0 10px rgba(255,170,0,0.3);
}
.ws-genre-name {
font-size: 11px;
color: var(--text3);
text-align: center;
white-space: nowrap;
}
.ws-genre-scroll-bottom {
border-top: 1px dashed var(--gold);
min-height: 80px;
}
.ws-genre-item input[type="radio"] {
display: none;
}
.ws-genre-selected .ws-genre-image {
border: 3px solid var(--gold);
box-shadow: 0 0 20px 8px rgba(255,170,0,0.6), 0 0 40px 15px rgba(255,170,0,0.3);
transform: scale(1.08);
}
.ws-genre-selected .ws-genre-name {
color: var(--gold);
font-weight: 600;
}
/* 电影分类子选择器 */
.ws-movie-subgenres {
margin-top: 0;
padding: 16px 10px 10px 10px;
position: relative;
}
/* 虚线分隔线 - 在子选择器上面 */
.ws-movie-subgenres::before {
content: '';
position: absolute;
top: 0;
left: 10px;
right: 10px;
border-top: 1px dashed var(--gold);
}
.ws-subgenres-title {
display: none; /* 隐藏标题，直接显示分类 */
}
.ws-subgenres-grid {
display: flex;
flex-wrap: nowrap; /* 单行排列 */
gap: 12px;
justify-content: flex-start;
overflow-x: auto;
scrollbar-width: thin;
scrollbar-color: var(--gold) transparent;
padding: 8px 0;
}
.ws-subgenres-grid::-webkit-scrollbar {
height: 4px;
}
.ws-subgenres-grid::-webkit-scrollbar-thumb {
background: var(--gold);
border-radius: 2px;
}
.ws-subgenre-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
cursor: pointer;
padding: 3px;
border-radius: 8px;
transition: all 0.2s ease;
flex-shrink: 0;
}
.ws-subgenre-item:hover {
transform: scale(1.05);
}
.ws-subgenre-circle {
width: 76px;
height: 76px;
border-radius: 50%;
overflow: hidden;
border: 2px solid var(--gold);
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-card);
box-shadow: 0 0 8px rgba(255, 170, 0, 0.3);
}
.ws-subgenre-circle img {
width: 100%;
height: 100%;
object-fit: cover;
}
.ws-subgenre-fallback {
font-size: 11px;
color: var(--text3);
text-align: center;
}
.ws-subgenre-name {
font-size: 11px;
color: var(--text3);
text-align: center;
white-space: nowrap;
}
.ws-subgenre-item.ws-subgenre-selected .ws-subgenre-circle {
border-color: var(--gold);
box-shadow: 0 0 20px 8px rgba(255, 170, 0, 0.6), 0 0 40px 15px rgba(255, 170, 0, 0.3);
transform: scale(1.05);
}
.ws-subgenre-item.ws-subgenre-selected .ws-subgenre-name {
color: var(--gold);
font-weight: 600;
}
/* 子分类单选按钮样式 */
.ws-subgenre-item input[type="radio"] {
width: 14px;
height: 14px;
margin: 3px 0 0 0;
padding: 0;
cursor: pointer;
accent-color: #FFAA00;
-webkit-appearance: none;
appearance: none;
border: 2px solid #666;
border-radius: 50%;
background: transparent;
transition: all 0.2s ease;
}
.ws-subgenre-item input[type="radio"]:checked {
border-color: #FFAA00;
background: radial-gradient(circle, #FFAA00 40%, transparent 41%);
box-shadow: 0 0 8px rgba(255, 170, 0, 0.8);
}
.ws-subgenre-item input[type="radio"]:disabled {
cursor: not-allowed;
opacity: 0.5;
}
.ws-subgenre-item input[type="radio"]:not(:checked):hover {
border-color: #FFAA00;
box-shadow: 0 0 4px rgba(255, 170, 0, 0.4);
}
/* 选中类型下面的金色小圆点 */
.ws-genre-item.ws-genre-selected::after {
content: '';
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--gold);
box-shadow: 0 0 8px rgba(255, 170, 0, 0.8);
margin-top: 2px;
}
/* 未选中类型下面的空心圆圈 */
.ws-genre-item:not(.ws-genre-selected)::after {
content: '';
width: 10px;
height: 10px;
border-radius: 50%;
border: 1px solid var(--text3);
background: transparent;
margin-top: 2px;
}
.ws-author-contact {
font-size: 12px;
color: var(--text3);
}
.ws-detail {
flex: 1;
display: flex;
flex-direction: column;
gap: 6px;
}
.ws-row {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
}
.ws-label {
color: var(--text3);
flex-shrink: 0;
width: 70px;
}
.ws-val { color: var(--text2); }
.ws-name { color: var(--text); font-weight: 600; font-size: 15px; }
.ws-filelink {
color: var(--cyan);
text-decoration: none;
}
.ws-filelink:hover { text-decoration: underline; }
.ws-nofile { color: var(--text3); }
.ws-summary-row { align-items: flex-start; }
.ws-summary {
flex: 1;
line-height: 1.6;
max-height: 100px;
overflow-y: auto;
}
.ws-row .model-badge { margin-right: 4px; }
.ws-tools {
margin-top: 24px;
}
.ws-section-title {
color: var(--cyan);
font-size: 16px;
margin: 0 0 16px;
}
.ws-tool-cards {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
gap: 14px;
padding-bottom: 8px;
overflow-x: auto; /* 卡片固定宽度，窄屏时可横向滚动，不再被拉伸 */
}
/* 项目工具 / 电影拍摄 两个页签 */
.ws-tools-tabs {
display: flex;
gap: 0;
margin: 0 0 14px;
}
.ws-tools-tab {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-width: 132px;
padding: 9px 22px;
border-radius: 0;
border: 1px solid rgba(91, 200, 255, 0.25);
background: var(--bg-card, #161D30);
color: var(--text-dim, #9FB3C8);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.5px;
cursor: pointer;
transition: all 0.2s ease;
}
.ws-tools-tab:hover {
color: #E8F4FF;
border-color: rgba(91, 200, 255, 0.55);
box-shadow: 0 0 12px rgba(91, 200, 255, 0.18);
}
.ws-tools-tab + .ws-tools-tab {
margin-left: -1px; /* 相邻页签共边，形成分割控件 */
}
.ws-tools-tabs .ws-tools-tab:first-child {
border-radius: 10px 0 0 10px;
}
.ws-tools-tabs .ws-tools-tab:last-child {
border-radius: 0 10px 10px 0;
}
.ws-tools-tab-active {
color: #0A0E17;
background: linear-gradient(135deg, #5BC8FF, #9D4EDD);
border-color: transparent;
box-shadow: 0 0 16px rgba(91, 200, 255, 0.35);
position: relative;
z-index: 1;
}
/* 🎥 画布工具打开期间：项目工具与所有工作区不再显示（保留 DOM 与收放状态，关闭后原样恢复） */
body.ws-canvas-mode #wsContent {
display: none !important;
}
.ws-tool-card {
/* 固定为全部 8 张工具卡铺开时每张的宽度：(容器宽 - 7×14px 间隙) / 8，不随显示张数拉伸 */
flex: 0 0 auto;
width: calc((100% - 98px) / 8);
min-width: 100px;
background: var(--bg-panel);
border: 1px solid var(--border);
border-radius: 8px;
padding: 8px 12px;
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
cursor: pointer;
transition: border-color 0.2s, box-shadow 0.2s;
}
.ws-tool-card:hover {
border-color: var(--cyan);
box-shadow: 0 2px 12px rgba(0,204,255,0.1);
}
.ws-tool-card.active {
background: rgba(0, 204, 102, 0.2) !important;
border-color: var(--green) !important;
box-shadow: 0 0 0 2px rgba(0, 204, 102, 0.3) !important;
}
.ws-tool-icon { font-size: 16px; }
.ws-tool-name {
font-size: 13px;
font-weight: 600;
color: var(--text);
white-space: nowrap;
}
.ws-tool-desc {
font-size: 11px;
color: var(--text3);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 角色设定区域 */
.ws-character-section {
margin-top: 16px;
border-radius: 8px;
overflow: hidden;
position: relative;
z-index: 100;
}
.ws-character-area {
max-height: calc(100vh - 200px);
overflow: auto;
padding: 16px;
border: 1px solid var(--border);
border-radius: 0 0 8px 8px;
}
.ws-character-list {
background: var(--bg-panel);
border: 1px solid var(--border);
border-radius: 8px;
margin-bottom: 16px;
overflow: hidden;
}
.ws-character-count,
.ws-section-count {
font-size: 12px;
color: var(--text-muted);
font-weight: normal;
}
.ws-character-list-header {
padding: 10px 14px;
background: var(--bg-card);
border-bottom: 1px solid var(--border);
font-size: 13px;
font-weight: 600;
color: var(--cyan);
}
.ws-character-list-body {
padding: 8px;
max-height: 120px;
overflow-y: auto;
}
.ws-character-list-item {
display: flex;
align-items: center;
gap: 12px;
padding: 6px 10px;
border-radius: 4px;
cursor: pointer;
transition: background 0.15s;
}
.ws-character-list-item:hover {
background: var(--bg-hover);
}
.ws-character-list-id {
font-size: 11px;
color: var(--cyan);
font-weight: 500;
width: 50px;
flex-shrink: 0;
}
.ws-character-list-name {
font-size: 12px;
color: var(--text);
}
.ws-character-grid {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 16px;
justify-items: center;
align-items: stretch;
}
.ws-character-card {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
padding: 12px;
background: rgba(0, 0, 0, 0.2);
border: 1px solid var(--border);
border-radius: 8px;
cursor: pointer;
transition: all 0.2s;
width: 100%;
min-width: 133px;
box-sizing: border-box;
}
/* 主区域：flex增长填满卡片，确保同一排角色卡的"自动生成角色"按钮底部对齐 */
.ws-char-main {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
min-height: 268px;
flex: 1 1 auto;
}
.ws-char-spacer {
flex: 1 1 auto;
min-height: 0;
width: 100%;
}
.ws-character-card:hover {
border-color: var(--cyan);
background: rgba(0, 204, 255, 0.05);
}
/* 无戏份角色卡：黄色背景占位，禁用所有交互 */
.ws-character-card-no-shot {
background: rgba(255, 200, 0, 0.15) !important;
border-color: rgba(255, 200, 0, 0.4) !important;
opacity: 0.75;
pointer-events: none;
}
.ws-character-card-no-shot:hover {
background: rgba(255, 200, 0, 0.15) !important;
border-color: rgba(255, 200, 0, 0.4) !important;
}
.ws-character-no-shot-label {
color: #e53935;
font-size: 11px;
font-weight: bold;
text-align: center;
margin-top: 4px;
line-height: 1.2;
}
/* 缺号角色卡：红色背景占位，禁用所有交互 */
.ws-character-card-missing {
background: rgba(229, 57, 53, 0.15) !important;
border-color: rgba(229, 57, 53, 0.5) !important;
opacity: 0.75;
pointer-events: none;
}
.ws-character-card-missing:hover {
background: rgba(229, 57, 53, 0.15) !important;
border-color: rgba(229, 57, 53, 0.5) !important;
}
/* 合并缺号段：单张卡紧凑显示 */
.ws-character-card-missing-merged .ws-character-id {
font-size: 11px;
letter-spacing: 0;
}
.ws-character-card-missing-merged .ws-character-missing-label {
font-size: 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 旁外音角色卡：紫色背景（图片控件保留，与普通卡功能一致） */
.ws-character-card-voiceover {
background: rgba(156, 39, 176, 0.15) !important;
border-color: rgba(156, 39, 176, 0.5) !important;
}
.ws-character-card-voiceover:hover {
background: rgba(156, 39, 176, 0.25) !important;
border-color: rgba(156, 39, 176, 0.7) !important;
}
/* 画外音头像：喇叭图标 */
.ws-character-avatar-voiceover {
background: rgba(156, 39, 176, 0.2) !important;
display: flex;
align-items: center;
justify-content: center;
color: #ce93d8;
}
.ws-character-avatar-voiceover svg {
width: 60%;
height: 60%;
}
/* 无戏份卡 - 人形图标 */
.ws-character-card-no-shot .ws-character-avatar {
background: linear-gradient(135deg, #4a4a2a, #6b5c1e);
color: #f0e68c;
}
.ws-character-card-no-shot .ws-character-avatar svg {
width: 55%;
height: 55%;
}
/* 群演卡 - 多人图标（无图时） */
.ws-character-card-crowd .ws-character-avatar svg {
width: 60%;
height: 60%;
color: #e1bee7;
}
.ws-character-card-voiceover:hover .ws-character-avatar-voiceover {
background: rgba(156, 39, 176, 0.3) !important;
color: #e1bee7;
}
.ws-character-card-voiceover .ws-character-voiceover-label {
color: #ce93d8;
font-size: 11px;
font-weight: bold;
text-align: center;
margin-top: 4px;
line-height: 1.2;
}
/* 群演角色卡：蓝紫色背景（区别于旁外音的紫色） */
.ws-character-card-crowd {
background: rgba(63, 81, 181, 0.15) !important;
border-color: rgba(63, 81, 181, 0.5) !important;
}
.ws-character-card-crowd:hover {
background: rgba(63, 81, 181, 0.25) !important;
border-color: rgba(63, 81, 181, 0.7) !important;
}
.ws-character-card-crowd .ws-character-crowd-label {
color: #7986cb;
font-size: 11px;
font-weight: bold;
text-align: center;
margin-top: 4px;
line-height: 1.2;
}
/* 群演卡头像采用方形（非圆形） */
.ws-character-card-crowd .ws-character-avatar {
border-radius: 8px;
}
.ws-character-card-crowd .ws-character-upload-overlay {
border-radius: 8px;
}
/* 群演人数输入行 */
.ws-crowd-count-row {
display: flex;
align-items: center;
gap: 4px;
margin-top: 4px;
padding: 2px 6px;
background: rgba(63, 81, 181, 0.08);
border-radius: 4px;
}
.ws-crowd-count-label {
font-size: 12px;
color: #5c6bc0;
font-weight: bold;
white-space: nowrap;
}
.ws-crowd-count-input {
width: 48px;
padding: 2px 4px;
border: 1px solid rgba(63, 81, 181, 0.4);
border-radius: 3px;
font-size: 12px;
text-align: center;
color: #1a237e;
background: #fff;
}
.ws-crowd-count-input:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.ws-crowd-count-input:focus {
outline: none;
border-color: #3f51b5;
box-shadow: 0 0 0 2px rgba(63, 81, 181, 0.15);
}
/* 群演多图缩略图条 */
.ws-crowd-images-strip {
display: flex;
flex-wrap: wrap;
gap: 4px;
padding: 6px 8px;
margin-top: 4px;
border-top: 1px dashed rgba(63, 81, 181, 0.3);
max-height: 120px;
overflow-y: auto;
}
.ws-crowd-thumb {
width: 42px;
height: 42px;
object-fit: cover;
border-radius: 4px;
border: 2px solid transparent;
cursor: pointer;
transition: all 0.15s ease;
}
.ws-crowd-thumb:hover {
border-color: #7986cb;
transform: scale(1.08);
}
.ws-crowd-thumb.active {
border-color: #3f51b5;
box-shadow: 0 0 4px rgba(63, 81, 181, 0.5);
}
/* 群演预览导航 */
.ws-crowd-preview-nav {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 8px 16px;
background: rgba(0, 0, 0, 0.4);
border-radius: 0 0 8px 8px;
}
.ws-crowd-nav-btn {
padding: 4px 12px;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 4px;
background: rgba(255, 255, 255, 0.1);
color: #fff;
font-size: 13px;
cursor: pointer;
transition: background 0.15s ease;
}
.ws-crowd-nav-btn:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.2);
}
.ws-crowd-nav-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.ws-crowd-preview-index {
color: #fff;
font-size: 14px;
font-weight: bold;
}
.ws-character-missing-label {
color: #e53935;
font-size: 11px;
font-weight: bold;
text-align: center;
margin-top: 4px;
line-height: 1.2;
}
.ws-character-checkbox {
display: none;
}
.ws-character-checkbox-label {
position: absolute;
top: 4px;
left: 4px;
width: 18px;
height: 18px;
border: 2px solid var(--border);
border-radius: 4px;
cursor: pointer;
background: rgba(0, 0, 0, 0.5);
transition: all 0.2s;
}
.ws-character-checkbox-label::after {
content: '';
position: absolute;
left: 5px;
top: 1px;
width: 5px;
height: 10px;
border: solid var(--green);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
opacity: 0;
transition: opacity 0.2s;
}
.ws-character-checkbox:checked + .ws-character-checkbox-label {
background: var(--green);
border-color: var(--green);
}
.ws-character-checkbox:checked + .ws-character-checkbox-label::after {
opacity: 1;
}
.ws-character-card:hover .ws-character-checkbox-label {
border-color: var(--cyan);
}
/* 旁外音卡复选框禁用样式（不可选中） */
.ws-checkbox-disabled {
opacity: 0.3;
cursor: not-allowed;
pointer-events: none;
}
.ws-character-avatar-container {
position: relative;
width: 90px;
height: 90px;
flex-shrink: 0;
}
.ws-character-avatar {
width: 100%;
height: 100%;
border-radius: 50%;
background: linear-gradient(135deg, var(--cyan), var(--purple));
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background-size: cover;
background-position: center;
border: 2px solid var(--border);
transition: border-color 0.2s;
}
.ws-character-avatar:hover {
border-color: var(--cyan);
}
.ws-character-image-input {
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
z-index: 20;
}
.ws-image-input-hidden {
display: none;
}
.ws-character-upload-overlay {
position: absolute;
inset: 0;
border-radius: 50%;
background: rgba(0, 0, 0, 0);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
opacity: 0;
transition: all 0.2s;
pointer-events: none;
z-index: 10;
}
.ws-character-upload-overlay.ws-upload-overlay-hidden {
display: none;
}
.ws-character-avatar-container:hover .ws-character-upload-overlay {
background: rgba(0, 0, 0, 0.6);
opacity: 1;
}
/* ===== 🔊 画外音角标 - 角色头像右下角紫色喇叭 ===== */
.ws-character-voiceover-badge {
position: absolute;
bottom: -2px;
right: -2px;
width: 24px;
height: 24px;
border-radius: 50%;
background: linear-gradient(135deg, #9c27b0, #7b1fa2);
display: flex;
align-items: center;
justify-content: center;
z-index: 30;
box-shadow: 0 2px 6px rgba(156, 39, 176, 0.6), 0 0 0 2px var(--bg, #1a1a2e);
transition: transform 0.2s ease, box-shadow 0.2s ease;
cursor: pointer;
}
.ws-character-voiceover-badge:hover {
transform: scale(1.15);
box-shadow: 0 3px 10px rgba(156, 39, 176, 0.8), 0 0 0 2px var(--bg, #1a1a2e);
}
.ws-character-voiceover-badge svg {
width: 14px;
height: 14px;
color: #fff;
stroke: #fff;
fill: none;
}
/* ===== 🎬 试镜视频入口 - 角色卡右上角 ▶ 图标 ===== */
.ws-character-card {
position: relative; /* 为 ▶ 图标绝对定位提供参考 */
}
.ws-audition-entry {
pointer-events: auto !important; /* 防止被锁定/覆盖 */
cursor: pointer !important;
position: absolute;
top: 8px;
right: 8px;
z-index: 9999;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border-radius: 50%;
transition: all 0.2s ease;
/* 默认：半透明白色三角形，无外框 */
background: rgba(255, 255, 255, 0.15);
border: none;
}
.ws-audition-entry:hover {
background: rgba(255, 255, 255, 0.35);
transform: scale(1.15);
}
.ws-audition-entry svg {
width: 14px;
height: 14px;
fill: rgba(255, 255, 255, 0.75);
}
/* 有视频状态：高亮紫色 */
.ws-audition-entry.has-video {
background: rgba(156, 39, 176, 0.85);
box-shadow: 0 2px 10px rgba(156, 39, 176, 0.5);
}
.ws-audition-entry.has-video svg {
fill: #fff;
}
/* 有音色状态：加 🎵 角标 */
.ws-audition-entry.has-voice::after {
content: '🎵';
position: absolute;
top: -4px;
right: -4px;
font-size: 12px;
line-height: 1;
}
/* ===== 🎬 试镜 Modal — 科幻 HUD 风格 v2 ===== */
.ws-audition-modal {
position: fixed; inset: 0; z-index: 1000001; /* 高于无限画布 modal(999999)：试镜拍摄须在画布前面 */
display: flex; align-items: center; justify-content: center;
pointer-events: auto !important; /* 🔥 强制可交互 */
}
.ws-audition-modal * {
pointer-events: auto !important; /* 🔥 所有子元素也强制可交互 */
}
.ws-audition-modal-backdrop {
position: absolute; inset: 0;
background: radial-gradient(ellipse at center, rgba(0,40,80,0.65) 0%, rgba(0,0,0,0.9) 100%);
backdrop-filter: blur(10px);
z-index: 0; /* 🔥 确保在 content 下面 */
}
.ws-audition-corners {
pointer-events: none !important; /* 🔥 四角装饰不挡点击 */
}
.ws-audition-corners span {
pointer-events: none !important;
}
.ws-audition-modal-content {
position: relative; z-index: 1; /* 🔥 确保在 backdrop 上面 */
width: 1020px; max-width: 97vw; max-height: 95vh;
background: linear-gradient(135deg, #0d1424 0%, #0a1a2e 50%, #0d1424 100%);
border-radius: 8px;
border: 1px solid rgba(0,200,255,0.35);
display: flex; flex-direction: column; overflow: hidden;
box-shadow: 0 0 0 1px rgba(0,180,255,0.1),
0 0 60px rgba(0,150,255,0.3),
0 30px 100px rgba(0,0,0,0.75);
}
/* 四角装饰 — 用4个span元素实现（before/after不够4个） */
.ws-audition-corners {
position: absolute; inset: 0; pointer-events: none; z-index: 5;
}
.ws-audition-corners span {
position: absolute; width: 28px; height: 28px;
border: 2px solid #00e5ff; opacity: 0.85;
box-shadow: 0 0 8px rgba(0,229,255,0.6);
}
.ws-audition-corners span:nth-child(1) { top: 6px; left: 6px; border-right: none; border-bottom: none; }
.ws-audition-corners span:nth-child(2) { top: 6px; right: 6px; border-left: none; border-bottom: none; }
.ws-audition-corners span:nth-child(3) { bottom: 6px; left: 6px; border-right: none; border-top: none; }
.ws-audition-corners span:nth-child(4) { bottom: 6px; right: 6px; border-left: none; border-top: none; }
/* Header */
.ws-audition-modal-header {
padding: 14px 24px;
background: linear-gradient(90deg, rgba(0,120,200,0.2), transparent);
border-bottom: 1px solid rgba(0,200,255,0.2);
display: flex; justify-content: space-between; align-items: center;
gap: 16px;
}
.ws-audition-modal-header h3 {
color: #00e5ff; margin: 0; font-size: 15px; letter-spacing: 2px;
text-shadow: 0 0 10px rgba(0,229,255,0.5);
font-family: 'Consolas', 'Monaco', monospace;
display: flex; align-items: center; gap: 10px;
}
.ws-audition-modal-header h3::before {
content: ''; width: 8px; height: 8px; border-radius: 50%;
background: #00e5ff; box-shadow: 0 0 8px #00e5ff;
animation: wsSciFiPulse 2s infinite;
}
@keyframes wsSciFiPulse {
0%,100% { opacity: 1; box-shadow: 0 0 8px #00e5ff; }
50% { opacity: 0.5; box-shadow: 0 0 2px #00e5ff; }
}
.ws-audition-close-btn {
background: rgba(255,80,80,0.1); border: 1px solid rgba(255,80,80,0.4);
color: #ff6060; font-size: 14px; font-family: 'Consolas', monospace;
cursor: pointer; padding: 4px 12px; border-radius: 4px;
letter-spacing: 1px; transition: all 0.2s;
}
.ws-audition-close-btn:hover {
background: rgba(255,80,80,0.25); color: #ffaaaa;
box-shadow: 0 0 10px rgba(255,80,80,0.5);
}
/* Body — 左右等高 */
.ws-audition-modal-body {
flex: 1; overflow-y: auto; padding: 18px 22px;
display: grid; grid-template-columns: 1fr 320px; gap: 18px;
align-items: stretch;
min-height: 480px;
}
/* Video Area */
.ws-audition-video-area {
background: #050a14; border-radius: 6px; overflow: hidden;
display: flex; flex-direction: column; position: relative;
border: 1px solid rgba(0,180,255,0.25);
box-shadow: inset 0 0 40px rgba(0,100,200,0.15);
min-height: 0; /* 允许flex子元素收缩 */
}
.ws-audition-video {
width: 100%; flex: 1; min-height: 0; background: #000; object-fit: contain;
}
.ws-audition-video-placeholder {
position: absolute; inset: 0; display: flex;
flex-direction: column; align-items: center; justify-content: center;
gap: 14px; color: rgba(0,220,255,0.5);
pointer-events: none; /* 🔥 关键修复：不挡下面的按钮点击 */
z-index: 1;
}
.ws-audition-video-placeholder .ws-audition-play-btn {
pointer-events: auto; /* 播放按钮仍然可点 */
}
.ws-audition-video-placeholder .ws-audition-video-time {
font-family: 'Consolas', monospace;
}
.ws-audition-play-btn {
width: 72px; height: 72px; border-radius: 50%;
background: rgba(0,200,255,0.15); color: #00e5ff;
display: flex; align-items: center; justify-content: center;
font-size: 32px; cursor: pointer; border: 2px solid rgba(0,220,255,0.6);
transition: all 0.2s; font-family: monospace;
box-shadow: 0 0 20px rgba(0,200,255,0.3);
}
.ws-audition-play-btn:hover {
background: rgba(0,200,255,0.35); color: #fff;
box-shadow: 0 0 30px rgba(0,220,255,0.6);
transform: scale(1.05);
}
.ws-audition-video-time {
font-size: 13px; font-variant-numeric: tabular-nums;
border: 1px solid rgba(0,200,255,0.3); padding: 3px 14px;
border-radius: 4px; background: rgba(0,20,40,0.6);
letter-spacing: 2px;
}
/* 进度条区域 — 科幻 HUD 风 */
.ws-audition-progress-area {
padding: 10px 14px;
border-top: 1px solid rgba(0,200,255,0.2);
background: linear-gradient(90deg, rgba(0,40,80,0.5), rgba(0,20,50,0.3));
display: none;
}
.ws-audition-progress-area.active { display: block; }
.ws-audition-progress-head {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 8px; font-family: 'Consolas', monospace;
font-size: 12px;
}
.ws-audition-progress-label {
color: #00e5ff; letter-spacing: 1px;
}
.ws-audition-progress-label .ws-audition-progress-status {
color: rgba(180,220,240,0.7); margin-left: 8px;
}
.ws-audition-progress-elapsed {
color: #00e5ff; font-variant-numeric: tabular-nums; letter-spacing: 1px;
font-weight: bold; font-size: 12px;
text-shadow: 0 0 8px rgba(0,229,255,0.6);
padding: 2px 8px; border: 1px solid rgba(0,229,255,0.4);
border-radius: 3px; background: rgba(0,60,120,0.3);
}
.ws-audition-progress-bar {
height: 6px; background: rgba(0,80,120,0.5);
border-radius: 3px; overflow: hidden;
border: 1px solid rgba(0,180,255,0.2);
}
.ws-audition-progress-fill {
height: 100%;
background: linear-gradient(90deg, #00b4ff, #00e5ff);
border-radius: 3px; transition: width 0.4s ease;
box-shadow: 0 0 10px rgba(0,229,255,0.7);
position: relative;
}
.ws-audition-progress-fill::after {
content: ''; position: absolute; right: -2px; top: -2px; bottom: -2px;
width: 4px; background: #fff; box-shadow: 0 0 8px #00e5ff;
border-radius: 2px;
}
.ws-audition-progress-fill.error {
background: linear-gradient(90deg, #ff4040, #ff6060);
box-shadow: 0 0 10px rgba(255,80,80,0.6);
}
.ws-audition-progress-fill.done {
background: linear-gradient(90deg, #00e676, #69f0ae);
box-shadow: 0 0 10px rgba(0,230,118,0.6);
}
.ws-audition-progress-fill.error::after,
.ws-audition-progress-fill.done::after { display: none; }
.ws-audition-progress-pct {
font-size: 11px; color: rgba(0,220,255,0.9);
font-family: 'Consolas', monospace; letter-spacing: 2px;
text-align: right; margin-top: 4px;
}
/* Controls — 按钮整齐排列 */
.ws-audition-controls {
padding: 10px 12px; display: flex; gap: 8px;
border-top: 1px solid rgba(0,200,255,0.15);
background: rgba(0,30,60,0.35);
}
.ws-audition-btn {
padding: 7px 14px; border-radius: 3px;
border: 1px solid rgba(0,180,255,0.35);
background: rgba(0,30,60,0.5); color: #b0d8f0;
cursor: pointer; font-size: 11px; letter-spacing: 1px;
transition: all 0.2s; font-family: 'Consolas', monospace;
text-transform: uppercase; white-space: nowrap;
min-width: 92px; max-width: 100%; text-align: center;
overflow: hidden; text-overflow: ellipsis;
}
.ws-audition-btn:hover:not(:disabled) {
background: rgba(0,100,180,0.4); color: #00e5ff;
border-color: rgba(0,220,255,0.7);
box-shadow: 0 0 12px rgba(0,180,255,0.35);
}
.ws-audition-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.ws-audition-btn.ws-btn-primary {
background: linear-gradient(135deg, rgba(0,150,255,0.5), rgba(0,100,200,0.5));
border-color: #00aaff; color: #fff; font-weight: 700;
box-shadow: 0 0 18px rgba(0,150,255,0.45);
}
.ws-audition-btn.ws-btn-primary:hover:not(:disabled) {
background: linear-gradient(135deg, rgba(0,180,255,0.65), rgba(0,120,220,0.65));
box-shadow: 0 0 28px rgba(0,180,255,0.7);
}
.ws-audition-btn.ws-btn-success {
background: linear-gradient(135deg, rgba(0,180,80,0.5), rgba(0,140,60,0.5));
border-color: #00e676; color: #d0ffd0;
box-shadow: 0 0 15px rgba(0,230,118,0.35);
}
.ws-audition-btn.ws-btn-danger {
background: rgba(180,30,30,0.45); border-color: #ff4040; color: #ffcccc;
}
.ws-audition-btn.ws-btn-danger:hover:not(:disabled) {
background: rgba(200,40,40,0.65); color: #fff;
box-shadow: 0 0 15px rgba(255,60,60,0.5);
}
.ws-audition-btn.ws-btn-warning {
background: rgba(200,130,0,0.45); border-color: #ffb020; color: #ffe0a0;
}
.ws-audition-btn.ws-btn-warning:hover:not(:disabled) {
background: rgba(220,150,20,0.65); color: #fff;
box-shadow: 0 0 15px rgba(255,176,32,0.5);
}
.ws-audition-btn.ws-btn-secondary {
background: rgba(30,150,80,0.45); border-color: #00e676; color: #a0ffcc;
}
.ws-audition-btn.ws-btn-secondary:hover:not(:disabled) {
background: rgba(40,170,90,0.65); color: #fff;
box-shadow: 0 0 15px rgba(0,230,118,0.5);
}
/* Info Area (right column) — 等高撑开 */
.ws-audition-info-area {
display: flex; flex-direction: column; gap: 10px;
min-height: 0;
}
/* Character card */
.ws-audition-info-row {
display: flex; gap: 12px; align-items: stretch;
background: linear-gradient(135deg, rgba(0,50,100,0.25), rgba(0,20,50,0.35));
border-radius: 6px; border: 1px solid rgba(0,180,255,0.25);
padding: 10px 12px; flex-shrink: 0;
}
.ws-audition-char-photo {
width: 76px; height: 92px; border-radius: 4px;
overflow: hidden; background: #050a14; flex-shrink: 0;
border: 1px solid rgba(0,200,255,0.35);
box-shadow: 0 0 12px rgba(0,100,200,0.35);
position: relative;
}
.ws-audition-char-photo img { width: 100%; height: 100%; object-fit: cover; }
.ws-audition-no-photo { color: rgba(0,200,255,0.3); font-size: 10px; text-align: center; line-height: 1.4; padding-top: 26px; font-family: 'Consolas', monospace; }
.ws-audition-char-info h4 {
margin: 0 0 4px; color: #00e5ff; font-size: 14px; font-family: 'Consolas', monospace;
letter-spacing: 1px;
}
.ws-audition-char-desc {
color: rgba(180,220,240,0.7); font-size: 11px; line-height: 1.55;
font-family: 'Consolas', monospace;
}
/* Script box — 自适应高度，不抢占 voice-box 空间 */
.ws-audition-script-box {
background: rgba(0,30,60,0.4); border-radius: 4px; padding: 10px 12px;
border: 1px solid rgba(0,180,255,0.2);
flex-shrink: 0; display: flex; flex-direction: column;
}
.ws-audition-voice-box {
background: rgba(0,30,60,0.4); border-radius: 4px; padding: 10px 12px;
border: 1px solid rgba(0,180,255,0.2); flex-shrink: 0;
}
.ws-audition-script-box h4, .ws-audition-voice-box h4 {
margin: 0 0 8px; color: #00b4ff; font-size: 11px;
font-family: 'Consolas', monospace; letter-spacing: 2px; text-transform: uppercase;
display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.ws-audition-script-box h4::before,
.ws-audition-voice-box h4::before {
content: ''; flex: 1; height: 1px;
background: linear-gradient(90deg, rgba(0,200,255,0.4), transparent);
}
.ws-audition-script-textarea {
color: rgba(190,220,240,0.95); font-size: 11px; line-height: 1.7;
width: 100%; min-height: 80px; max-height: 180px;
background: rgba(0,20,50,0.5); border: 1px solid rgba(0,200,255,0.25);
border-radius: 4px; padding: 10px 12px; resize: vertical;
font-family: 'Consolas', monospace; white-space: pre-wrap;
outline: none; transition: border-color 0.2s, box-shadow 0.2s;
}
.ws-audition-script-textarea:focus {
border-color: rgba(0,229,255,0.7);
box-shadow: 0 0 10px rgba(0,229,255,0.25);
}
.ws-audition-script-textarea::placeholder { color: rgba(0,220,255,0.3); }
.ws-audition-script-tip {
font-size: 10px; color: rgba(0,220,255,0.5); font-weight: normal;
font-family: sans-serif; margin-left: 6px;
}
/* ★ 试镜时长 select */
.ws-audition-duration-select {
margin-left: 8px; font-size: 11px; font-weight: normal;
background: rgba(0,30,60,0.6); color: #00eaff;
border: 1px solid rgba(0,220,255,0.4); border-radius: 3px;
padding: 2px 6px; cursor: pointer; vertical-align: middle;
}
.ws-audition-duration-select:hover { border-color: #00eaff; }
.ws-audition-duration-select option { background: #0a1628; color: #00eaff; }
.ws-audition-script-actions {
display: flex; gap: 8px; margin-top: 8px;
}
.ws-audition-script-actions .ws-audition-btn { font-size: 10px; padding: 5px 12px; }
/* ===== 自定义音色播放器（深色科幻风） ===== */
.ws-audition-voice-player {
display: flex; align-items: center; gap: 8px;
background: linear-gradient(180deg, rgba(0,30,60,0.55), rgba(0,15,40,0.75));
border: 1px solid rgba(0,200,255,0.3);
border-radius: 5px;
padding: 7px 10px;
margin-bottom: 8px;
box-shadow: 0 0 12px rgba(0,120,200,0.18) inset, 0 0 8px rgba(0,200,255,0.08);
font-family: 'Consolas', monospace;
position: relative;
}
.ws-audition-voice-player::before,
.ws-audition-voice-player::after {
content: ''; position: absolute; width: 10px; height: 10px;
border: 1px solid rgba(0,229,255,0.6); pointer-events: none;
}
.ws-audition-voice-player::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.ws-audition-voice-player::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }
.wsavp-audio { display: none; }
.wsavp-play {
flex-shrink: 0;
width: 30px; height: 30px;
border-radius: 50%;
border: 1px solid rgba(0,229,255,0.6);
background: radial-gradient(circle at 30% 30%, rgba(0,200,255,0.25), rgba(0,80,160,0.35));
color: #00e5ff;
font-size: 11px;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: all 0.2s;
box-shadow: 0 0 6px rgba(0,200,255,0.35);
padding: 0;
}
.wsavp-play:hover {
background: radial-gradient(circle at 30% 30%, rgba(0,230,255,0.45), rgba(0,120,200,0.5));
box-shadow: 0 0 12px rgba(0,229,255,0.6);
transform: scale(1.05);
}
.wsavp-play:active { transform: scale(0.95); }
.wsavp-icon-pause { letter-spacing: -1px; }
.wsavp-progress {
flex: 1; height: 6px; background: rgba(0,60,100,0.6);
border-radius: 3px; position: relative; cursor: pointer;
border: 1px solid rgba(0,150,200,0.2);
overflow: visible;
}
.wsavp-progress-fill {
height: 100%; width: 0%;
background: linear-gradient(90deg, #00c8ff, #00e5ff, #40f0ff);
border-radius: 3px;
box-shadow: 0 0 6px rgba(0,229,255,0.6);
transition: width 0.1s linear;
}
.wsavp-progress-thumb {
position: absolute; top: 50%; left: 0%; transform: translate(-50%, -50%);
width: 12px; height: 12px; border-radius: 50%;
background: #00e5ff;
border: 2px solid rgba(0,40,80,0.9);
box-shadow: 0 0 8px rgba(0,229,255,0.8);
pointer-events: none;
opacity: 0; transition: opacity 0.2s;
}
.ws-audition-voice-player:hover .wsavp-progress-thumb { opacity: 1; }
.wsavp-time {
flex-shrink: 0;
color: rgba(180,230,255,0.85);
font-size: 10px;
letter-spacing: 0.5px;
min-width: 70px;
text-align: right;
}
.wsavp-mute {
flex-shrink: 0;
background: none; border: none;
color: rgba(0,229,255,0.7);
font-size: 13px; cursor: pointer;
padding: 2px 4px; border-radius: 3px;
transition: all 0.2s;
}
.wsavp-mute:hover { color: #00e5ff; background: rgba(0,200,255,0.1); }
/* ===== 无音频时的禁用占位播放器 ===== */
.ws-audition-voice-player.wsavp-disabled {
opacity: 0.55;
cursor: not-allowed;
}
.ws-audition-voice-player.wsavp-disabled .wsavp-play,
.ws-audition-voice-player.wsavp-disabled .wsavp-mute {
background: radial-gradient(circle at 30% 30%, rgba(80,120,160,0.25), rgba(40,60,90,0.35));
border-color: rgba(120,160,200,0.35);
color: rgba(160,190,220,0.5);
cursor: not-allowed;
box-shadow: none;
}
.ws-audition-voice-player.wsavp-disabled .wsavp-play:hover {
transform: none; box-shadow: none;
}
.ws-audition-voice-player.wsavp-disabled .wsavp-progress {
cursor: not-allowed;
}
.ws-audition-voice-player.wsavp-disabled .wsavp-time {
color: rgba(160,190,220,0.45);
}
.ws-audition-download-btn {
color: #00e5ff; font-size: 11px; text-decoration: none;
font-family: 'Consolas', monospace; letter-spacing: 1px;
padding: 3px 10px; border: 1px solid rgba(0,200,255,0.35); border-radius: 3px;
display: inline-block; transition: all 0.2s;
}
.ws-audition-download-btn:hover {
background: rgba(0,200,255,0.15); box-shadow: 0 0 10px rgba(0,220,255,0.4);
}
.ws-audition-no-voice {
color: rgba(0,200,255,0.35); font-size: 11px; font-family: 'Consolas', monospace;
}
/* Footer */
.ws-audition-modal-footer {
padding: 12px 24px;
background: linear-gradient(90deg, transparent, rgba(0,80,160,0.2));
border-top: 1px solid rgba(0,200,255,0.2);
display: flex; justify-content: space-between; align-items: center;
}
.ws-audition-modal-footer .ws-audition-btn { letter-spacing: 2px; }
/* Confirm dialog */
.ws-audition-confirm {
position: fixed; inset: 0; z-index: 1000002; /* 高于无限画布 modal(999999) 与试镜 modal(1000001)：确认框必须在最前 */
background: rgba(0,0,0,0.8); backdrop-filter: blur(6px);
display: flex; align-items: center; justify-content: center;
}
.ws-audition-confirm-box {
background: linear-gradient(135deg, #0d1424, #0a1a2e);
border: 1px solid rgba(0,200,255,0.4);
border-radius: 8px; padding: 28px; width: 380px; text-align: center;
box-shadow: 0 0 40px rgba(0,150,255,0.3);
}
.ws-audition-confirm-box h4 {
color: #00e5ff; margin: 0 0 12px; font-family: 'Consolas', monospace;
letter-spacing: 2px; font-size: 15px;
}
.ws-audition-confirm-box p {
color: rgba(200,230,240,0.75); margin: 0 0 20px; font-size: 13px;
line-height: 1.7; font-family: 'Consolas', monospace;
}
.ws-audition-confirm-btns { display: flex; gap: 10px; justify-content: center; }
.ws-audition-confirm-btns button {
padding: 8px 22px; border-radius: 4px;
border: 1px solid rgba(0,200,255,0.4);
background: rgba(0,30,60,0.6); color: #b0d8f0; cursor: pointer;
font-size: 12px; font-family: 'Consolas', monospace; letter-spacing: 1px;
transition: all 0.2s; text-transform: uppercase;
}
.ws-audition-confirm-btns button:hover {
background: rgba(0,100,180,0.5); color: #00e5ff;
box-shadow: 0 0 12px rgba(0,180,255,0.5);
}
.ws-audition-confirm-btns button.ws-confirm-ok {
background: rgba(200,40,40,0.5); border-color: #ff4040; color: #ffcccc;
}
.ws-audition-confirm-btns button.ws-confirm-ok:hover {
background: rgba(220,50,50,0.7); box-shadow: 0 0 15px rgba(255,60,60,0.6);
}
.ws-audition-confirm-btns button.ws-btn-primary {
background: rgba(156,39,176,0.85); border-color: #9c27b0; color: #fff;
}
.ws-upload-icon {
font-size: 20px;
margin-bottom: 4px;
}
.ws-image-preview-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.85);
display: flex !important;
align-items: center;
justify-content: center;
z-index: 200000 !important;
cursor: pointer;
visibility: visible !important;
opacity: 1 !important;
}
.ws-image-preview-content {
position: relative;
z-index: 200001;
max-width: 60vw;
max-height: 70vh;
cursor: default;
display: flex;
flex-direction: column;
}
.ws-image-preview-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
padding: 8px 12px;
background: rgba(255, 255, 255, 0.1);
border-radius: 8px;
}
.ws-image-preview-close {
width: 30px;
height: 30px;
border: none;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
color: white;
font-size: 14px;
cursor: pointer;
transition: all 0.2s;
}
.ws-image-preview-close:hover {
background: rgba(255, 255, 255, 0.3);
}
.ws-image-preview-actions {
display: flex;
gap: 8px;
}
.ws-image-preview-upload {
display: none;
}
.ws-image-preview-btn {
padding: 6px 12px;
border: none;
border-radius: 4px;
background: rgba(0, 136, 255, 0.9);
color: white;
font-size: 13px;
cursor: pointer;
transition: all 0.2s;
}
.ws-image-preview-btn:hover {
background: rgba(0, 170, 255, 1);
}
.ws-image-preview-delete {
background: rgba(255, 85, 85, 0.9);
}
.ws-image-preview-delete:hover {
background: rgba(255, 102, 102, 1);
}
.ws-image-preview-content img {
max-width: 100%;
max-height: 80vh;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}
.ws-upload-text {
font-size: 10px;
color: white;
text-align: center;
}
.ws-character-initial {
font-size: 32px;
font-weight: bold;
color: white;
}
.ws-character-info {
margin-top: 10px;
text-align: center;
padding-top: 8px;
border-top: 1px solid rgba(0, 68, 170, 0.3);
width: 100%;
box-sizing: border-box;
}
.ws-character-id {
font-size: 11px;
color: var(--cyan);
font-weight: 500;
margin-bottom: 3px;
letter-spacing: 0.5px;
}
.ws-character-name {
font-size: 12px;
color: var(--text);
text-align: center;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 500;
margin-bottom: 6px;
}
.ws-character-desc {
font-size: 10px;
color: var(--text-muted);
text-align: center;
max-width: 100%;
line-height: 1.4;
padding: 2px 4px 2px 4px;
word-break: break-word;
margin-bottom: 6px;
min-height: 56px;
max-height: 56px;
overflow-y: auto;
}
.ws-char-desc-restore-wrap {
display: block;
text-align: left;
margin-top: 2px;
margin-bottom: 0;
pointer-events: auto;
}
.ws-desc-editable {
cursor: text;
border-radius: 3px;
transition: background 0.15s, box-shadow 0.15s;
}
.ws-desc-editable:hover {
background: rgba(0, 204, 255, 0.08);
box-shadow: 0 0 0 1px rgba(0, 204, 255, 0.25) inset;
}
.ws-desc-editable:focus {
outline: none;
background: rgba(0, 204, 255, 0.12);
box-shadow: 0 0 0 1px var(--cyan) inset;
}
.ws-char-restore-btn {
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0;
padding: 0 8px;
border: 1px solid var(--cyan);
border-radius: 3px;
background: rgba(0, 204, 255, 0.15);
color: var(--cyan);
font-size: 10px;
cursor: pointer;
transition: all 0.2s;
line-height: 1;
height: 22px;
box-sizing: border-box;
}
.ws-char-restore-btn:hover {
background: var(--cyan);
color: #fff;
box-shadow: 0 1px 4px rgba(0, 204, 255, 0.4);
}
.ws-char-restore-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* ── 角色声音 ── */
.ws-character-voice {
font-size: 9px;
color: var(--text-muted);
text-align: left;
max-width: 100%;
line-height: 1.4;
padding: 0 4px 0 6px;
word-break: break-word;
margin-top: 2px;
margin-bottom: 2px;
border-left: 2px solid rgba(170, 102, 255, 0.35);
}
.ws-voice-editable {
cursor: text;
border-radius: 2px;
transition: background 0.15s, box-shadow 0.15s;
}
.ws-voice-editable:hover {
background: rgba(170, 102, 255, 0.08);
}
.ws-voice-editable:focus {
outline: none;
background: rgba(170, 102, 255, 0.12);
box-shadow: 0 0 0 1px var(--purple) inset;
}
.ws-char-voice-restore-btn {
display: block;
margin: -1px auto 4px;
padding: 2px 8px;
border: 1px solid var(--purple);
border-radius: 3px;
background: rgba(170, 102, 255, 0.08);
color: var(--purple);
font-size: 10px;
cursor: pointer;
transition: all 0.2s;
line-height: 1.4;
}
.ws-char-voice-restore-btn:hover {
background: var(--purple);
color: #fff;
box-shadow: 0 1px 4px rgba(170, 102, 255, 0.4);
}
.ws-character-voice-text {
font-size: 9px;
color: var(--text3);
font-style: italic;
text-align: left;
padding: 0 4px;
margin-bottom: 4px;
line-height: 1.4;
word-break: break-word;
}
.ws-char-voice-actions {
display: flex;
gap: 4px;
margin-bottom: 4px;
min-height: 32px;
width: 100%;
box-sizing: border-box;
}
.ws-char-voice-generate-btn {
flex: 1;
padding: 4px 8px;
border: 1px solid var(--purple);
border-radius: 4px;
background: rgba(170, 102, 255, 0.12);
color: var(--purple);
font-size: 10px;
cursor: pointer;
transition: all 0.2s;
box-sizing: border-box;
}
.ws-char-voice-generate-btn:hover {
background: var(--purple);
color: #fff;
box-shadow: 0 1px 4px rgba(170, 102, 255, 0.4);
}
.ws-char-voice-generate-btn:disabled,
.ws-char-voice-generate-btn.ws-generating {
opacity: 0.6;
cursor: not-allowed;
}
.ws-char-voice-upload-btn {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
padding: 4px 10px;
border: 1px solid var(--green);
border-radius: 4px;
background: rgba(0, 200, 120, 0.12);
color: var(--green);
font-size: 10px;
cursor: pointer;
transition: all 0.2s;
box-sizing: border-box;
}
.ws-char-voice-upload-btn:hover {
background: var(--green);
color: #fff;
box-shadow: 0 1px 4px rgba(0, 200, 120, 0.4);
}
.ws-char-voice-file {
position: relative;
margin-top: 6px;
margin-bottom: 2px;
width: 100%;
flex: 0 0 auto;
}
/* 原生 audio 隐藏，由自定义播放器接管 */
.ws-voice-player {
display: none;
}
/* 自定义音频播放器：与界面风格统一 */
.ws-voice-custom-player {
width: 100%;
background: rgba(0, 34, 85, 0.6);
border: 1px solid var(--border);
border-radius: 6px;
padding: 5px 6px;
box-sizing: border-box;
}
.ws-voice-controls {
display: flex;
justify-content: center;
align-items: center;
gap: 4px;
margin-bottom: 4px;
}
.ws-voice-btn {
width: 26px;
height: 26px;
padding: 0;
border: 1px solid var(--border);
border-radius: 5px;
background: rgba(0, 68, 170, 0.35);
color: var(--text);
font-size: 12px;
cursor: pointer;
line-height: 26px;
text-align: center;
transition: all 0.15s;
box-sizing: border-box;
}
.ws-voice-play-btn {
color: var(--cyan);
border-color: rgba(0, 204, 255, 0.5);
background: rgba(0, 204, 255, 0.12);
}
.ws-voice-play-btn:hover {
background: var(--cyan);
color: #001533;
box-shadow: 0 0 6px rgba(0, 204, 255, 0.5);
}
.ws-voice-play-btn.ws-active {
background: var(--cyan);
color: #001533;
}
.ws-voice-pause-btn {
color: var(--purple);
border-color: rgba(153, 102, 255, 0.5);
background: rgba(153, 102, 255, 0.12);
}
.ws-voice-pause-btn:hover {
background: var(--purple);
color: #fff;
box-shadow: 0 0 6px rgba(153, 102, 255, 0.5);
}
.ws-voice-pause-btn.ws-active {
background: var(--purple);
color: #fff;
}
.ws-voice-delete-btn {
color: var(--red);
border-color: rgba(255, 51, 102, 0.5);
background: rgba(255, 51, 102, 0.12);
}
.ws-voice-delete-btn:hover {
background: var(--red);
color: #fff;
box-shadow: 0 0 6px rgba(255, 51, 102, 0.5);
}
.ws-voice-btn:disabled {
opacity: 0.3;
cursor: not-allowed;
}
.ws-voice-btn.ws-dim {
opacity: 0.4;
}
/* 进度条 */
.ws-voice-progress-row {
display: flex;
align-items: center;
gap: 4px;
}
.ws-voice-progress {
flex: 1;
height: 4px;
background: rgba(0, 68, 170, 0.5);
border-radius: 2px;
cursor: pointer;
overflow: hidden;
position: relative;
}
.ws-voice-progress-fill {
height: 100%;
width: 0%;
background: linear-gradient(90deg, var(--cyan), var(--purple));
border-radius: 2px;
transition: width 0.1s linear;
}
.ws-voice-time {
font-size: 9px;
color: var(--text3);
min-width: 24px;
text-align: right;
font-variant-numeric: tabular-nums;
}
.ws-char-generate-btn {
margin-top: 4px;
margin-bottom: 4px;
padding: 6px 12px;
width: 100%;
border: none;
border-radius: 4px;
background: linear-gradient(135deg, var(--cyan), var(--purple));
color: white;
font-size: 11px;
cursor: pointer;
transition: all 0.2s;
width: 100%;
box-sizing: border-box;
}
.ws-char-generate-btn:hover {
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0, 204, 255, 0.4);
}
.ws-char-generate-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
}
.ws-char-generate-btn.ws-generating {
background: linear-gradient(135deg, #00ff88, #00cc6a);
animation: pulse-green 1s ease-in-out infinite;
}
@keyframes pulse-green {
0%, 100% {
box-shadow: 0 0 0 0 rgba(0, 255, 136, 0.7);
}
50% {
box-shadow: 0 0 0 8px rgba(0, 255, 136, 0);
}
}
/* ===== 角色卡：风格对齐按钮 ===== */
.ws-char-style-align-btn {
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0;
padding: 0 10px;
border: 1px solid var(--cyan);
border-radius: 4px;
background: transparent;
color: var(--cyan);
font-size: 11px;
cursor: pointer;
transition: all 0.2s;
box-sizing: border-box;
white-space: nowrap;
height: 22px;
}
.ws-char-style-align-btn:hover {
background: var(--cyan);
color: #000;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0, 204, 255, 0.4);
}
.ws-char-style-align-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
}
.ws-char-style-align-btn.ws-generating {
background: var(--cyan);
color: #000;
animation: pulse-green 1s ease-in-out infinite;
}
/* ===== 角色卡：恢复原图按钮 ===== */
.ws-char-restore-img-btn {
margin-top: 4px;
margin-bottom: 4px;
padding: 6px 10px;
border: 1px solid var(--text3);
border-radius: 4px;
background: transparent;
color: var(--text2);
font-size: 11px;
cursor: pointer;
transition: all 0.2s;
box-sizing: border-box;
white-space: nowrap;
}
.ws-char-restore-img-btn:hover {
border-color: var(--red, #ff5555);
color: var(--red, #ff5555);
transform: translateY(-1px);
}
.ws-char-restore-img-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
}
.ws-char-audition-row {
display: flex;
gap: 6px;
margin-top: 4px;
width: 100%;
}
.ws-char-audition-row button {
flex: 1;
height: 32px;
border: none;
border-radius: 5px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s ease;
position: relative;
}
.ws-char-audition-row button svg {
width: 16px;
height: 16px;
fill: white;
transition: fill 0.15s ease;
}
/* 紫色视频播放按钮 */
.ws-char-btn-video {
background: linear-gradient(135deg, #7c3aed, #6d28d9);
}
.ws-char-btn-video:hover:not(:disabled) {
background: linear-gradient(135deg, #8b5cf6, #7c3aed);
box-shadow: 0 2px 8px rgba(124, 58, 237, 0.5);
transform: translateY(-1px);
}
.ws-char-btn-video:active:not(:disabled) {
transform: translateY(0);
}
/* 绿色音色播放按钮 */
.ws-char-btn-voice {
background: linear-gradient(135deg, #10b981, #059669);
}
.ws-char-btn-voice:hover:not(:disabled) {
background: linear-gradient(135deg, #34d399, #10b981);
box-shadow: 0 2px 8px rgba(16, 185, 129, 0.5);
transform: translateY(-1px);
}
.ws-char-btn-voice:active:not(:disabled) {
transform: translateY(0);
}
/* 禁用态：图标变灰 — 背景色由 recolorVoiceButtons() 的内联 style 控制（红/绿/蓝），不能 !important 覆盖！ */
.ws-char-audition-row button:disabled {
/* background 不要写！让 JS 内联 style.background 生效 */
cursor: not-allowed;
transform: none;
box-shadow: none;
opacity: 0.75;
}
.ws-char-audition-row button:disabled svg {
fill: #6b7280 !important;
}
.ws-char-audition-row button:disabled:hover {
box-shadow: none !important;
}
/* 🔥 有音色的按钮：disabled=false 时 opacity 恢复 1 */
.ws-char-audition-row button:not(:disabled) {
opacity: 1;
}
/* ===== 轻量播放器弹窗（角色卡视频/音色播放） ===== */
.ws-player-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.75);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000001; /* 高于无限画布 modal(999999)：试镜/定妆等播放器必须在画布前面 */
animation: ws-fade-in 0.15s ease;
}
/* ⭐ 道具视频 modal 不加动画（切视频/删视频/清除时重建闪动） */
.ws-player-overlay.ws-prop-spatial-overlay {
animation: none;
}
.ws-player-dialog {
background: #1a1f2e;
border: 1px solid rgba(0,200,255,0.3);
border-radius: 8px;
overflow: hidden;
max-width: 90vw;
max-height: 90vh;
box-shadow: 0 8px 32px rgba(0,200,255,0.2);
display: flex;
flex-direction: column;
min-height: 0;
}
.ws-player-dialog-audio {
min-width: 380px;
padding: 20px 28px;
}
.ws-player-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 14px;
background: rgba(0,200,255,0.1);
border-bottom: 1px solid rgba(0,200,255,0.2);
color: #e0f7ff;
font-size: 13px;
font-weight: 500;
flex-shrink: 0;
}
/* 🔥 左边标题允许换行但绝不挤掉右边按钮 */
.ws-player-header > span:first-child,
.ws-player-header > #wsPlaylistTitle {
flex: 1;
min-width: 0;
white-space: normal;
word-break: break-word;
overflow-wrap: anywhere;
padding-right: 12px;
line-height: 1.4;
}
/* 🔥 右边按钮组永不被压缩 */
.ws-player-header > div:last-child {
flex-shrink: 0;
white-space: nowrap;
}
.ws-player-close {
background: none;
border: none;
color: #aaa;
cursor: pointer;
font-size: 16px;
padding: 2px 8px;
border-radius: 4px;
transition: all 0.15s;
}
.ws-player-close:hover { background: rgba(255,80,80,0.2); color: #fff; }
.ws-player-nav {
background: rgba(0,200,255,0.15);
border: 1px solid rgba(0,200,255,0.3);
color: #00d4ff;
cursor: pointer;
font-size: 14px;
padding: 2px 8px;
border-radius: 4px;
margin-right: 4px;
transition: all 0.15s;
}
.ws-player-nav:hover:not(:disabled) { background: rgba(0,200,255,0.3); }
.ws-player-nav:disabled { opacity: 0.3; cursor: not-allowed; }
/* 循环播放器：左右布局 */
.ws-player-dialog-playlist {
background: linear-gradient(135deg, #0a0f1e 0%, #0d1424 100%);
border: 1px solid rgba(0,200,255,0.35);
border-radius: 10px;
box-shadow: 0 8px 40px rgba(0,200,255,0.25), 0 0 60px rgba(0,200,255,0.08);
min-width: 800px;
}
.ws-player-body-row {
display: flex;
flex-direction: row;
gap: 12px;
padding: 12px;
align-items: stretch;
justify-content: flex-start;
flex: 1;
min-height: 0;
height: 100%;
box-sizing: border-box;
overflow: hidden;
}
.ws-player-body-row video {
flex: 1 1 0;
min-width: 0;
max-width: 100%;
background: #000;
border-radius: 6px;
max-height: 70vh;
object-fit: contain;
}
/* 🔥 化妆播放轮播：左侧图片展示区 */
.ws-mk-main {
flex: 1;
min-width: 0;
background: #0a0e14;
border-radius: 6px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
border: 1px solid rgba(0,200,255,0.15);
perspective: 1200px; /* 🔥 翻页需要 3D 透视 */
}
.ws-mk-img {
max-width: 100%;
max-height: calc(70vh - 40px);
object-fit: contain;
border-radius: 4px;
background: #000;
transform-origin: center center;
}
/* 左右翻/上下翻用 backface-visibility（3D hinge），旋转翻不能用 */
.ws-mk-img.ws-mk-fly,
.ws-mk-img.ws-mk-fly-rev,
.ws-mk-img.ws-mk-fly-v,
.ws-mk-img.ws-mk-fly-v-rev {
backface-visibility: hidden;
}
/* 🔥 翻页：下一张 — 从右边缘 hinge 翻入 */
.ws-mk-img.ws-mk-fly {
animation: wsMkFlipNext 0.65s cubic-bezier(0.65, 0, 0.35, 1);
}
@keyframes wsMkFlipNext {
0% { opacity: 0; transform: rotateY(90deg) scale(0.92); filter: brightness(0.5); }
50% { opacity: 1; transform: rotateY(-8deg) scale(1.02); filter: brightness(1.1); }
100% { opacity: 1; transform: rotateY(0deg) scale(1); filter: brightness(1); }
}
/* 🔥 翻页：上一张 — 从左边缘 hinge 翻入 */
.ws-mk-img.ws-mk-fly-rev {
animation: wsMkFlipPrev 0.65s cubic-bezier(0.65, 0, 0.35, 1);
}
@keyframes wsMkFlipPrev {
0% { opacity: 0; transform: rotateY(-90deg) scale(0.92); filter: brightness(0.5); }
50% { opacity: 1; transform: rotateY(8deg) scale(1.02); filter: brightness(1.1); }
100% { opacity: 1; transform: rotateY(0deg) scale(1); filter: brightness(1); }
}
/* 🔥 上下翻：下一张 */
.ws-mk-img.ws-mk-fly-v {
animation: wsMkFlipVNext 0.65s cubic-bezier(0.65, 0, 0.35, 1);
}
@keyframes wsMkFlipVNext {
0% { opacity: 0; transform: rotateX(-90deg) scale(0.92); filter: brightness(0.5); }
50% { opacity: 1; transform: rotateX(8deg) scale(1.02); filter: brightness(1.1); }
100% { opacity: 1; transform: rotateX(0deg) scale(1); filter: brightness(1); }
}
/* 🔥 上下翻：上一张 */
.ws-mk-img.ws-mk-fly-v-rev {
animation: wsMkFlipVPrev 0.65s cubic-bezier(0.65, 0, 0.35, 1);
}
@keyframes wsMkFlipVPrev {
0% { opacity: 0; transform: rotateX(90deg) scale(0.92); filter: brightness(0.5); }
50% { opacity: 1; transform: rotateX(-8deg) scale(1.02); filter: brightness(1.1); }
100% { opacity: 1; transform: rotateX(0deg) scale(1); filter: brightness(1); }
}
/* 🔥 旋转翻：从 360° 旋转 + 缩放到 0 + 模糊 → 放大清晰进入 */
.ws-mk-img.ws-mk-fly-r {
animation: wsMkRotateIn 0.9s cubic-bezier(0.5, 0, 0.2, 1);
}
@keyframes wsMkRotateIn {
0% { opacity: 0; transform: rotate(-180deg) scale(0.05); filter: blur(8px) brightness(0.3); }
40% { opacity: 0.8; transform: rotate(45deg) scale(1.15); filter: blur(2px) brightness(1.2); }
70% { opacity: 1; transform: rotate(-20deg) scale(0.95); filter: blur(0) brightness(1); }
100% { opacity: 1; transform: rotate(0deg) scale(1); filter: brightness(1); }
}
.ws-mk-img.ws-mk-fly-r-rev {
animation: wsMkRotateInRev 0.9s cubic-bezier(0.5, 0, 0.2, 1);
}
@keyframes wsMkRotateInRev {
0% { opacity: 0; transform: rotate(180deg) scale(0.05); filter: blur(8px) brightness(0.3); }
40% { opacity: 0.8; transform: rotate(-45deg) scale(1.15); filter: blur(2px) brightness(1.2); }
70% { opacity: 1; transform: rotate(20deg) scale(0.95); filter: blur(0) brightness(1); }
100% { opacity: 1; transform: rotate(0deg) scale(1); filter: brightness(1); }
}
.ws-mk-caption {
position: absolute;
bottom: 8px;
left: 50%;
transform: translateX(-50%);
background: rgba(0,0,0,0.65);
color: #0cf;
font-size: 12px;
padding: 3px 10px;
border-radius: 10px;
letter-spacing: 1px;
pointer-events: none;
}
.ws-mk-item .ws-al-sub {
font-size: 10px;
color: rgba(120,180,210,0.55);
}
/* 右侧列表 */
.ws-pl-side {
width: 200px;
flex: 0 0 200px;
background: rgba(0,200,255,0.05);
border: 1px solid rgba(0,200,255,0.2);
border-radius: 6px;
padding: 8px;
display: flex;
flex-direction: column;
max-height: 92vh;
overflow-y: auto;
}
.ws-prop-spatial-overlay .ws-pl-side {
flex: 0 0 380px !important;
width: 380px !important;
min-width: 380px !important;
max-width: 420px !important;
max-height: 92vh;
min-height: 0;
overflow-y: auto;
scrollbar-width: thin;
box-sizing: border-box;
}
/* 🎬 服装虚拟生成 Modal — 右侧面板 300px */
.ws-cvm-overlay .ws-pl-side {
flex: 0 0 300px !important;
width: 300px;
max-height: 94vh;
}
.ws-cvm-overlay .ws-pl-list {
flex: 0 0 auto;
max-height: 100px;
overflow-y: auto;
}
.ws-prop-spatial-overlay .ws-pl-list {
flex: 0 0 auto;
max-height: 100px;
overflow-y: auto;
}
/* modal dialog 更高 */
.ws-player-dialog.ws-player-dialog-playlist {
max-height: 94vh;
}
.ws-pl-side-title {
font-size: 12px;
color: rgba(0,200,255,0.9);
padding-bottom: 6px;
border-bottom: 1px solid rgba(0,200,255,0.15);
margin-bottom: 6px;
flex-shrink: 0;
letter-spacing: 1px;
}
.ws-pl-list {
flex: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 3px;
}
.ws-pl-list::-webkit-scrollbar { width: 5px; }
.ws-pl-list::-webkit-scrollbar-thumb { background: rgba(0,200,255,0.3); border-radius: 3px; }
.ws-pl-item {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 8px;
border-radius: 5px;
cursor: pointer;
font-size: 12px;
color: rgba(220,240,255,0.75);
border: 1px solid transparent;
transition: all 0.15s;
}
.ws-pl-item:hover {
background: rgba(0,200,255,0.08);
color: #fff;
}
.ws-pl-item.active {
background: rgba(0,200,255,0.18);
border-color: rgba(0,200,255,0.5);
color: #fff;
box-shadow: 0 0 8px rgba(0,200,255,0.2);
}
.ws-pl-num {
font-size: 10px;
color: rgba(0,200,255,0.5);
font-family: Consolas, monospace;
flex: 0 0 auto;
}
.ws-pl-item.active .ws-pl-num {
color: #0ff;
}
/* 生成定妆视频按钮 */
.ws-pl-gen-btn {
width: 100%;
flex-shrink: 0;
padding: 8px 10px;
margin-bottom: 8px;
background: linear-gradient(135deg, rgba(0,200,255,0.25), rgba(0,150,255,0.15));
border: 1px solid rgba(0,200,255,0.5);
border-radius: 6px;
color: #00d4ff;
font-size: 12px;
font-weight: 600;
letter-spacing: 1px;
cursor: pointer;
transition: all 0.2s;
text-align: center;
position: relative;
overflow: hidden;
}
.ws-pl-gen-btn:hover {
background: linear-gradient(135deg, rgba(0,200,255,0.4), rgba(0,150,255,0.25));
box-shadow: 0 0 12px rgba(0,200,255,0.4);
color: #fff;
}
/* 生成中状态：滚动光影 */
.ws-pl-gen-btn.generating {
cursor: progress;
pointer-events: none;
color: #fff;
background: linear-gradient(90deg, rgba(0,200,255,0.15), rgba(0,180,255,0.35), rgba(0,200,255,0.15));
background-size: 200% 100%;
animation: wsPlGenShimmer 1.8s linear infinite;
box-shadow: 0 0 14px rgba(0,200,255,0.5), inset 0 0 10px rgba(0,200,255,0.15);
}
@keyframes wsPlGenShimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* 失败状态 */
.ws-pl-gen-btn.failed {
background: linear-gradient(135deg, rgba(255,70,70,0.3), rgba(200,50,50,0.15));
border-color: rgba(255,90,90,0.5);
color: #ff8080;
box-shadow: 0 0 8px rgba(255,70,70,0.3);
}
/* 成功状态 */
.ws-pl-gen-btn.done {
background: linear-gradient(135deg, rgba(0,220,140,0.3), rgba(0,180,120,0.15));
border-color: rgba(0,230,160,0.5);
color: #7effc8;
box-shadow: 0 0 12px rgba(0,220,140,0.4);
}
.ws-pl-name {
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ws-pl-ops {
flex-shrink: 0;
display: flex;
gap: 2px;
margin-left: 4px;
}
.ws-pl-radio {
flex-shrink: 0;
width: 16px;
height: 16px;
margin-right: 4px;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
cursor: pointer;
color: #5a7a90;
transition: color 0.15s;
}
.ws-pl-radio:hover { color: #00d4ff; }
.ws-pl-item.active .ws-pl-radio { color: #00ff88; }
.ws-pl-btn {
width: 22px;
height: 22px;
padding: 0;
background: transparent;
border: 1px solid rgba(120,180,210,0.25);
border-radius: 4px;
color: #78c8e0;
font-size: 11px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.18s ease;
line-height: 1;
opacity: 0.65;
}
.ws-pl-btn:hover {
background: rgba(0,200,255,0.18);
border-color: rgba(0,200,255,0.55);
color: #00d4ff;
opacity: 1;
box-shadow: 0 0 6px rgba(0,200,255,0.25);
}
/* ===== 试镜播放列表（角色列表 + 缩略图） ===== */
.ws-al-item {
display: flex !important;
align-items: center;
gap: 8px;
padding: 6px 8px;
cursor: pointer;
}
.ws-al-item:hover {
background: rgba(0,180,255,0.12) !important;
}
.ws-al-thumb-wrap {
width: 32px;
height: 32px;
border-radius: 6px;
overflow: hidden;
flex-shrink: 0;
background: rgba(0,0,0,0.35);
border: 1px solid rgba(0,200,255,0.25);
display: flex;
align-items: center;
justify-content: center;
}
.ws-al-thumb {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.ws-al-thumb-fallback {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #2a5070, #1a3550);
color: #8ad0e5;
font-size: 14px;
font-weight: 600;
}
.ws-al-info {
flex: 1;
min-width: 0;
overflow: hidden;
}
.ws-al-id {
font-size: 10px;
color: #4890a8;
letter-spacing: 0.5px;
font-family: monospace;
}
.ws-al-name {
font-size: 12px;
color: #d8f0f8;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.3;
margin-top: 1px;
}
.ws-pl-item.active.ws-al-item {
background: rgba(0,220,255,0.18) !important;
border-left: 2px solid #00dcff;
}
.ws-pl-item.active.ws-al-item .ws-al-name {
color: #00e8ff;
}
.ws-pl-item.active.ws-al-item .ws-al-id {
color: #00a8c8;
}
.ws-pl-btn.danger {
border-color: rgba(210,110,110,0.25);
color: #b87070;
}
.ws-pl-btn.danger:hover {
background: rgba(255,70,70,0.18);
border-color: rgba(255,70,70,0.55);
color: #ff7070;
opacity: 1;
box-shadow: 0 0 6px rgba(255,70,70,0.25);
}
/* ===== 🎞️ 连续播放：分镜目录「展开选默认视频」 ===== */
.ws-player-playlist .ws-pl-side {
width: 220px;
flex: 0 0 220px;
}
.ws-pl-tip {
font-size: 10px;
line-height: 1.5;
color: rgba(120,180,210,0.6);
padding: 0 2px 6px;
flex-shrink: 0;
}
.ws-pl-group {
display: flex;
flex-direction: column;
}
.ws-pl-count {
flex: 0 0 auto;
font-size: 10px;
line-height: 1;
padding: 3px 5px;
border-radius: 8px;
background: rgba(0,200,255,0.16);
border: 1px solid rgba(0,200,255,0.35);
color: #7fe3ff;
font-family: Consolas, monospace;
}
.ws-pl-expand {
flex: 0 0 auto;
width: 16px;
text-align: center;
font-size: 11px;
color: rgba(120,180,210,0.75);
transition: transform 0.18s, color 0.15s;
}
.ws-pl-expand:hover { color: #00d4ff; }
.ws-pl-group.expanded .ws-pl-expand {
transform: rotate(90deg);
color: #00e8ff;
}
.ws-pl-sub {
display: flex;
flex-direction: column;
gap: 2px;
margin: 2px 0 4px 8px;
padding-left: 8px;
border-left: 1px solid rgba(0,200,255,0.22);
}
.ws-pl-sub-item {
display: flex;
align-items: center;
gap: 6px;
padding: 4px 6px;
border-radius: 4px;
cursor: pointer;
font-size: 11px;
color: rgba(200,225,240,0.72);
border: 1px solid transparent;
transition: all 0.15s;
}
.ws-pl-sub-item:hover { background: rgba(0,200,255,0.08); color: #fff; }
.ws-pl-sub-item.is-default {
border-color: rgba(0,200,255,0.45);
background: rgba(0,200,255,0.10);
color: #cdefff;
}
.ws-pl-sub-item.is-playing {
border-color: rgba(0,230,160,0.55);
background: rgba(0,230,160,0.12);
color: #b6ffe0;
}
.ws-pl-sub-idx {
flex: 0 0 auto;
width: 14px;
text-align: center;
font-size: 10px;
font-family: Consolas, monospace;
color: rgba(0,200,255,0.7);
}
.ws-pl-sub-time {
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ws-pl-sub-tag {
flex: 0 0 auto;
font-size: 10px;
color: #7effc8;
}
.ws-pl-sub-item.is-default .ws-pl-sub-tag { color: #7fe3ff; }
/* 角色列表：播放试镜按钮 */
.ws-audition-play-all-btn {
background: linear-gradient(135deg, #0ea5e9, #2563eb);
border: 1px solid rgba(59,130,246,0.5);
color: white;
padding: 5px 12px;
border-radius: 4px;
font-size: 12px;
cursor: pointer;
margin-right: 8px;
transition: all 0.2s;
}
.ws-audition-play-all-btn:hover {
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(37,99,235,0.4);
}
.ws-audition-play-all-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.ws-player-video {
display: block;
max-width: 80vw;
max-height: 75vh;
background: #000;
}
/* 无视频时的服装三视图网格 */
.ws-pl-costume-grid {
display: grid;
gap: 8px;
background: #000;
padding: 12px;
max-width: 80vw;
max-height: 75vh;
overflow-y: auto;
align-content: start;
}
.ws-pl-costume-grid[data-count="1"] { grid-template-columns: 1fr; }
.ws-pl-costume-grid[data-count="2"] { grid-template-columns: repeat(2, 1fr); }
.ws-pl-costume-grid[data-count="3"] { grid-template-columns: repeat(3, 1fr); }
.ws-pl-costume-grid[data-count="4"] { grid-template-columns: repeat(2, 1fr); }
.ws-pl-costume-grid[data-count="5"] { grid-template-columns: repeat(3, 1fr); }
.ws-pl-costume-grid[data-count="6"] { grid-template-columns: repeat(3, 1fr); }
.ws-pl-costume-item {
position: relative;
aspect-ratio: 16 / 9;
min-height: 120px;
max-height: 220px;
border-radius: 6px;
overflow: hidden;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(0,200,255,0.25);
display: flex;
align-items: center;
justify-content: center;
}
.ws-pl-costume-item img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.ws-pl-costume-label {
position: absolute;
bottom: 4px;
left: 50%;
transform: translateX(-50%);
background: rgba(0,0,0,0.65);
color: #00e0ff;
font-size: 10px;
padding: 1px 6px;
border-radius: 3px;
letter-spacing: 1px;
}
.ws-player-audio {
width: 100%;
margin-top: 8px;
}
@keyframes ws-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
.ws-character-empty {
grid-column: 1 / -1;
text-align: center;
color: var(--text3);
padding: 40px;
font-style: italic;
}
.ws-character-list .ws-character-empty {
grid-column: auto;
padding: 20px;
}
/* 角色化妆区域 */
.ws-makeup-section {
margin-top: 16px;
border-radius: 8px;
overflow: hidden;
position: relative;
z-index: 100;
}
.ws-makeup-area {
max-height: calc(100vh - 200px);
overflow: auto;
padding: 16px;
border: 1px solid var(--border);
border-radius: 0 0 8px 8px;
}
.ws-makeup-list {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 12px;
}
.ws-makeup-item {
display: flex;
flex-direction: column;
padding: 12px;
background: rgba(0, 0, 0, 0.2);
border: 1px solid var(--border);
border-radius: 8px;
transition: all 0.2s;
}
.ws-makeup-item:hover {
border-color: var(--cyan);
background: rgba(0, 204, 255, 0.05);
}
.ws-makeup-header {
display: flex;
align-items: center;
min-height: 50px;
gap: 10px;
margin-bottom: 12px;
position: relative;
padding-right: 36px;
}
.ws-makeup-add-btn {
width: 30px;
height: 30px;
border-radius: 50%;
background: linear-gradient(135deg, var(--cyan), var(--purple));
border: 2px solid white;
color: white;
font-size: 18px;
font-weight: bold;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 8px rgba(0, 204, 255, 0.4);
transition: all 0.2s;
padding: 0;
}
.ws-makeup-add-btn:hover {
transform: scale(1.1);
box-shadow: 0 4px 12px rgba(0, 204, 255, 0.6);
}
/* 🔥 按钮组容器 —— absolute 定位到 header 右上角 */
.ws-makeup-header-btns {
position: absolute;
top: -8px;
right: -6px;
display: flex;
align-items: center;
gap: 4px;
flex-shrink: 0;
z-index: 3;
}
.ws-makeup-play-btn {
width: 30px;
height: 30px;
border-radius: 50%;
background: linear-gradient(135deg, #0cf, #08f);
border: 2px solid white;
color: white;
font-size: 11px;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.2s, box-shadow 0.2s;
padding: 0;
}
.ws-makeup-play-btn:hover {
transform: scale(1.1);
box-shadow: 0 4px 12px rgba(0, 204, 255, 0.6);
}
.ws-makeup-avatar {
width: 50px;
height: 50px;
border-radius: 50%;
background: linear-gradient(135deg, var(--cyan), var(--purple));
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background-size: cover;
background-position: center;
border: 2px solid var(--border);
flex-shrink: 0;
}
.ws-makeup-initial {
font-size: 18px;
color: white;
font-weight: 600;
}
.ws-makeup-info {
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
}
.ws-makeup-id {
font-size: 11px;
color: var(--cyan);
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ws-makeup-name {
font-size: 13px;
color: var(--text);
margin-top: 2px;
line-height: 1.4;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ws-makeup-desc {
font-size: 11px;
color: rgba(180,210,230,0.65);
line-height: 1.4;
margin-top: 2px;
white-space: normal;
word-break: break-word;
overflow: visible;
}
.ws-makeup-images {
width: 100%;
margin-bottom: 12px;
border: 1px solid var(--border);
border-radius: 6px;
padding: 8px;
background: rgba(0, 0, 0, 0.1);
}
.ws-makeup-image-scroll {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 6px;
overflow-x: hidden;
overflow-y: auto;
/* 🔥 固定显示两排：2 × 160px item + 1 × 6px gap + 上下 12px padding */
max-height: 338px;
padding: 6px 0;
scrollbar-width: thin;
scrollbar-color: var(--cyan) transparent;
}
/* 🔥 选中态高亮：青色边框 + 发光 + 右上角小勾 */
.ws-makeup-image-item.ws-makeup-selected {
border-color: #0cf !important;
box-shadow: 0 0 0 2px rgba(0,204,255,0.4), 0 0 14px rgba(0,204,255,0.5) !important;
outline: none;
position: relative;
}
.ws-makeup-image-item.ws-makeup-selected::after {
content: '✓';
position: absolute;
top: 2px; right: 4px;
width: 18px; height: 18px;
background: linear-gradient(135deg, #00ccff, #0088aa);
color: #fff; font-size: 12px; font-weight: 700;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 0 6px rgba(0,204,255,0.8);
z-index: 5;
pointer-events: none;
}
.ws-makeup-image-scroll::-webkit-scrollbar {
width: 6px;
}
.ws-makeup-image-scroll::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.2);
border-radius: 3px;
}
.ws-makeup-image-scroll::-webkit-scrollbar-thumb {
background: var(--cyan);
border-radius: 3px;
}
.ws-makeup-image-item {
width: 100%;
height: 160px;
min-height: 160px;
border-radius: 6px;
overflow: hidden;
border: 1px solid var(--border);
position: relative;
cursor: pointer;
}
.ws-makeup-preview-btn {
position: absolute;
top: 4px;
right: 4px;
width: 24px;
height: 24px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.6);
border: none;
color: white;
font-size: 12px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.2s;
}
.ws-makeup-image-item:hover .ws-makeup-preview-btn {
opacity: 1;
}
.ws-makeup-preview-btn:hover {
background: rgba(0, 204, 255, 0.8);
}
.ws-makeup-upload-btn {
position: absolute;
top: 4px;
left: 4px;
width: 24px;
height: 24px;
border-radius: 50%;
background: rgba(0, 204, 255, 0.7);
border: none;
color: white;
font-size: 12px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
.ws-makeup-upload-btn:hover {
background: rgba(0, 204, 255, 1);
}
.ws-makeup-shots-btn {
position: absolute;
bottom: 4px;
left: 4px;
width: 24px;
height: 24px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.6);
border: none;
color: white;
font-size: 12px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.2s;
z-index: 2;
}
.ws-makeup-image-item:hover .ws-makeup-shots-btn {
opacity: 1;
}
.ws-makeup-shots-btn:hover {
background: rgba(0, 204, 255, 0.8);
}
.ws-makeup-image-item img {
width: 100%;
height: 100%;
object-fit: contain; /* 🔥 contain = 完整显示不裁剪，三张脸都能看到 */
background: #0a0e14;
}
.ws-makeup-image-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(0, 204, 255, 0.1), rgba(128, 0, 255, 0.1));
overflow: hidden !important;
cursor: pointer;
border-radius: 4px;
position: relative;
box-sizing: border-box;
}
.ws-makeup-image-placeholder span {
font-size: 11px !important;
color: var(--text3);
text-align: center;
line-height: 1.2;
padding: 6px 4px;
overflow: hidden !important;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
word-break: break-all;
}
.ws-makeup-fields {
width: 100%;
display: flex;
flex-direction: column;
gap: 8px;
}
.ws-makeup-field {
display: flex;
flex-direction: column;
gap: 4px;
}
.ws-makeup-field label {
font-size: 11px;
color: var(--text3);
}
.ws-makeup-input {
padding: 6px 10px;
border: 1px solid var(--border);
border-radius: 4px;
background: rgba(0, 0, 0, 0.3);
color: var(--text);
font-size: 12px;
outline: none;
transition: border-color 0.2s;
}
.ws-makeup-input:focus {
border-color: var(--cyan);
}
.ws-makeup-input::placeholder {
color: var(--text3);
}
.ws-makeup-empty {
grid-column: 1 / -1;
text-align: center;
color: var(--text3);
padding: 40px;
font-style: italic;
}
.ws-makeup-locked .ws-makeup-input {
pointer-events: none;
}
.ws-makeup-count {
font-size: 12px;
color: var(--text-muted);
font-weight: normal;
}
/* ============ 化妆卡改造新增样式 ============ */
.ws-makeup-count-label {
color: var(--text3);
font-weight: normal;
font-size: 10px;
}
/* 基础化妆标签（右上角） */
/* 🔥 统一图片标签：基础图和化妆图同款 */
.ws-makeup-img-label {
position: absolute;
bottom: 4px;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 204, 255, 0.85);
color: white;
font-size: 10px;
padding: 2px 6px;
border-radius: 3px;
z-index: 2;
pointer-events: none;
font-weight: 500;
white-space: nowrap;
}
/* 图片单选控件（左上角） */
.ws-makeup-image-radio {
position: absolute;
top: 4px;
left: 4px;
width: 16px;
height: 16px;
accent-color: var(--purple);
cursor: pointer;
z-index: 2;
margin: 0;
}
/* 化妆调整区header */
.ws-makeup-fields-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 6px;
}
.ws-makeup-fields-header label {
font-size: 12px;
color: var(--text3);
font-weight: 500;
}
/* 卡片级"化"按钮 */
.ws-makeup-gen-btn {
background: linear-gradient(135deg, #9c27b0, #e91e63);
color: white;
border: none;
border-radius: 4px;
padding: 4px 12px;
cursor: pointer;
font-size: 12px;
font-weight: bold;
transition: all 0.2s;
}
.ws-makeup-gen-btn:hover:not(:disabled) {
opacity: 0.85;
transform: scale(1.05);
}
.ws-makeup-gen-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
/* ============ 气泡内化妆说明区 ============ */
.ws-bubble-makeup-desc {
margin: 12px 0;
padding: 8px;
border-top: 1px dashed var(--border);
}
.ws-bubble-makeup-desc-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 6px;
}
.ws-bubble-makeup-desc-header label {
font-size: 12px;
color: var(--text3);
}
.ws-bubble-makeup-gen-btn {
background: linear-gradient(135deg, #9c27b0, #e91e63);
color: white;
border: none;
border-radius: 4px;
padding: 4px 10px;
cursor: pointer;
font-size: 12px;
font-weight: bold;
transition: all 0.2s;
}
.ws-bubble-makeup-gen-btn:hover {
opacity: 0.85;
transform: scale(1.05);
}
.ws-bubble-makeup-desc-input {
width: 100%;
min-height: 60px;
padding: 6px;
border: 1px solid var(--border);
border-radius: 4px;
background: rgba(0, 0, 0, 0.2);
color: var(--text);
resize: vertical;
font-size: 12px;
outline: none;
box-sizing: border-box;
}
.ws-bubble-makeup-desc-input:focus {
border-color: var(--cyan);
}
.ws-bubble-makeup-desc-input:disabled {
opacity: 0.6;
cursor: not-allowed;
}
/* 服装设置区域 */
.ws-costume-section {
margin-top: 16px;
border-radius: 8px;
overflow: hidden;
position: relative;
z-index: 100;
}
.ws-costume-area {
max-height: calc(100vh - 200px);
overflow: auto;
padding: 16px;
border: 1px solid var(--border);
border-radius: 0 0 8px 8px;
}
.ws-costume-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.ws-costume-item {
background: rgba(0, 0, 0, 0.2);
border: 1px solid var(--border);
border-radius: 8px;
transition: all 0.2s;
overflow: hidden;
}
.ws-costume-item:hover {
border-color: var(--cyan);
}
.ws-costume-item.ws-costume-collapsed .ws-costume-body {
display: none;
}
.ws-costume-item.ws-costume-collapsed .ws-costume-bar {
border-bottom: none;
}
.ws-costume-bar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 14px;
background: rgba(0, 48, 120, 0.35);
border-bottom: 1px solid var(--border);
cursor: pointer;
user-select: none;
transition: background 0.15s;
}
.ws-costume-bar:hover {
background: rgba(0, 60, 150, 0.5);
}
.ws-costume-bar-right {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
.ws-costume-bar .showcase-circle-btn {
/* 确保不被 bar-left 挤压 */
}
.ws-costume-bar-left {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.ws-costume-bar-avatar {
width: 34px;
height: 34px;
border-radius: 50%;
background: linear-gradient(135deg, var(--cyan), var(--purple));
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background-size: cover;
background-position: center;
border: 2px solid var(--border);
flex-shrink: 0;
}
.ws-costume-bar-initial {
font-size: 13px;
color: white;
font-weight: 600;
}
.ws-costume-bar-info {
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
}
.ws-costume-bar-id {
font-size: 12px;
color: var(--cyan);
font-weight: 600;
white-space: nowrap;
}
.ws-costume-bar-name {
font-size: 13px;
color: var(--text);
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ws-costume-collapse-btn {
width: 28px;
height: 28px;
border: 1px solid var(--border);
border-radius: 4px;
background: rgba(0, 0, 0, 0.3);
color: var(--text2);
font-size: 12px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all 0.2s;
}
.ws-costume-collapse-btn:hover {
color: var(--cyan);
border-color: var(--cyan);
}
.ws-costume-body {
display: flex;
gap: 12px;
padding: 12px;
}
.ws-costume-right-full {
flex: 1;
min-width: 0;
border: 1px dashed var(--border);
border-radius: 6px;
display: flex;
flex-direction: column;
overflow: hidden;
}
.ws-costume-left {
flex: 1;
min-width: 0;
}
.ws-costume-right {
flex: 3;
min-width: 0;
border: 1px dashed var(--border);
border-radius: 6px;
display: flex;
flex-direction: column;
color: var(--text3);
font-size: 13px;
min-height: 180px;
background: rgba(0, 0, 0, 0.12);
overflow: hidden;
}
.ws-costume-right-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
gap: 8px;
color: var(--text3);
}
.ws-costume-right-empty-icon {
font-size: 28px;
opacity: 0.7;
}
.ws-costume-right-content {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
overflow: hidden;
}
.ws-costume-right-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 12px;
background: rgba(0, 48, 120, 0.25);
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
.ws-costume-right-title {
font-size: 14px;
font-weight: 600;
color: var(--text);
display: flex;
align-items: center;
gap: 6px;
}
.ws-costume-right-cached {
font-size: 11px;
color: var(--cyan);
opacity: 0.8;
}
.ws-costume-regenerate-btn, .ws-costume-retry-btn {
width: 24px;
height: 24px;
border-radius: 4px;
border: 1px solid var(--border);
background: rgba(0, 0, 0, 0.2);
color: var(--text2);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
transition: all 0.2s;
flex-shrink: 0;
}
.ws-costume-regenerate-btn:hover, .ws-costume-retry-btn:hover {
border-color: var(--cyan);
color: var(--cyan);
}
.ws-costume-retry-btn {
width: auto;
padding: 6px 14px;
font-size: 12px;
margin-top: 8px;
}
.ws-costume-right-text {
padding: 12px;
flex: 1;
overflow-y: auto;
line-height: 1.6;
color: var(--text2);
white-space: pre-line;
}
.ws-costume-right-loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
gap: 12px;
}
.ws-costume-right-spinner {
width: 32px;
height: 32px;
border: 3px solid rgba(0, 204, 255, 0.2);
border-top-color: var(--cyan);
border-radius: 50%;
animation: ws-costume-spin 0.8s linear infinite;
}
@keyframes ws-costume-spin {
to { transform: rotate(360deg); }
}
.ws-costume-right-error {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
gap: 8px;
text-align: center;
padding: 16px;
}
.ws-costume-right-error-icon {
font-size: 28px;
}
.ws-costume-add-btn {
width: 28px;
height: 28px;
border-radius: 50%;
background: linear-gradient(135deg, var(--cyan), var(--purple));
border: 1px solid var(--border);
color: white;
font-size: 24px;
font-weight: bold;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 8px rgba(0, 204, 255, 0.4);
transition: all 0.2s;
flex-shrink: 0;
}
.ws-costume-add-btn:hover {
transform: scale(1.1);
box-shadow: 0 4px 12px rgba(0, 204, 255, 0.6);
}
.ws-costume-action-btn {
width: 32px;
height: 32px;
border-radius: 8px;
background: linear-gradient(135deg, var(--cyan), var(--purple));
border: 1px solid var(--border);
color: white;
font-size: 16px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
}
.ws-costume-action-btn:hover {
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(0, 204, 255, 0.6);
}
.ws-costume-action-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.ws-costume-images {
width: 100%;
margin-bottom: 12px;
border: 1px solid var(--border);
border-radius: 6px;
padding: 8px;
background: rgba(0, 0, 0, 0.1);
min-width: 0;
overflow: hidden;
}
.ws-costume-image-filter {
display: flex;
gap: 6px;
margin-bottom: 8px;
}
.ws-costume-filter-btn {
padding: 4px 12px;
border: 1px solid var(--border);
border-radius: 4px;
background: rgba(0, 0, 0, 0.2);
color: var(--text);
font-size: 12px;
cursor: pointer;
transition: all 0.2s;
}
.ws-costume-filter-btn:hover {
background: rgba(0, 180, 255, 0.2);
border-color: var(--cyan);
}
.ws-costume-filter-btn.active {
background: rgba(0, 180, 255, 0.3);
border-color: var(--cyan);
color: var(--cyan);
}
.ws-costume-image-scroll {
display: flex;
gap: 8px;
overflow-x: auto;
overflow-y: hidden;
padding: 6px 0;
scrollbar-width: thin;
scrollbar-color: var(--cyan) transparent;
min-width: 0;
}
.ws-costume-image-scroll::-webkit-scrollbar {
height: 6px;
}
.ws-costume-image-scroll::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.2);
border-radius: 3px;
}
.ws-costume-image-scroll::-webkit-scrollbar-thumb {
background: var(--cyan);
border-radius: 3px;
}
.ws-costume-portrait {
margin-bottom: 12px;
padding: 10px;
border: 1px solid var(--border);
border-radius: 6px;
background: rgba(0, 0, 0, 0.1);
overflow: hidden;
min-width: 0;
}
.ws-costume-portrait-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
margin-bottom: 8px;
}
.ws-costume-portrait-checkbox {
width: 14px;
height: 14px;
cursor: pointer;
}
.ws-costume-portrait-label {
font-size: 12px;
color: var(--cyan);
font-weight: 500;
}
.ws-costume-three-views {
display: flex;
justify-content: center;
align-items: center;
min-width: 0;
overflow: hidden;
}
.ws-costume-combined-image {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
min-width: 0;
max-width: 100%;
}
.ws-costume-combined-row {
display: flex;
gap: 4px;
background: white;
padding: 4px;
border-radius: 6px;
border: 1px solid var(--border);
overflow-x: auto;
}
.ws-costume-combined-view {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
position: relative;
min-width: 0;
}
.ws-costume-combined-img {
width: 45px;
height: 65px;
object-fit: contain;
background: white;
flex-shrink: 0;
}
.ws-costume-combined-label {
font-size: 9px;
color: var(--text-secondary);
}
.ws-costume-combined-actions {
position: absolute;
top: 4px;
right: 4px;
display: flex;
gap: 2px;
}
.ws-costume-combined-btn {
width: 14px;
height: 14px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.6);
border: none;
color: white;
font-size: 8px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.2s;
}
.ws-costume-combined-view:hover .ws-costume-combined-btn {
opacity: 1;
}
.ws-costume-combined-btn:hover {
background: rgba(255, 71, 87, 0.8);
}
.ws-costume-combined-full {
width: 100%;
max-width: 180px;
}
.ws-costume-combined-img-full {
width: 180px;
height: auto;
object-fit: contain;
background: white;
border-radius: 4px;
}
.ws-costume-portrait-desc {
margin-top: 10px;
display: flex;
flex-direction: column;
gap: 4px;
}
.ws-costume-desc-label {
font-size: 11px;
color: var(--text-secondary);
}
.ws-costume-desc-input {
width: 100%;
padding: 6px 8px;
border: 1px solid var(--border);
border-radius: 4px;
font-size: 12px;
color: var(--text);
background: rgba(0, 0, 0, 0.2);
resize: vertical;
min-height: 40px;
}
.ws-costume-desc-input:focus {
outline: none;
border-color: var(--cyan);
}
.ws-costume-portrait-placeholder {
width: 100%;
height: 80px;
border: 2px dashed var(--border);
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s;
}
.ws-costume-portrait-placeholder:hover {
border-color: var(--cyan);
background: rgba(0, 204, 255, 0.05);
}
.ws-costume-portrait-placeholder span {
font-size: 13px;
color: var(--text-secondary);
}
.ws-costume-portrait-failed {
width: 100%;
height: 80px;
border: 2px dashed #ff4757;
border-radius: 6px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
background: rgba(255, 71, 87, 0.1);
}
.ws-costume-failed-icon {
font-size: 32px;
color: #ff4757;
}
.ws-costume-failed-message {
font-size: 13px;
color: #ff4757;
}
.ws-costume-regenerate-btn {
padding: 8px 16px;
border: none;
border-radius: 6px;
background: linear-gradient(135deg, #ff6b6b, #ff4757);
color: white;
}
.ws-batch-progress-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
display: flex;
align-items: center;
justify-content: center;
z-index: 10000;
}
.ws-batch-progress-modal {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 12px;
padding: 30px;
min-width: 400px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
.ws-batch-progress-title {
font-size: 18px;
font-weight: bold;
color: var(--cyan);
margin-bottom: 20px;
text-align: center;
}
.ws-batch-progress-bar-container {
width: 100%;
height: 8px;
background: rgba(255, 255, 255, 0.1);
border-radius: 4px;
overflow: hidden;
margin-bottom: 15px;
}
.ws-batch-progress-bar {
height: 100%;
background: linear-gradient(90deg, var(--cyan), var(--green));
border-radius: 4px;
transition: width 0.3s ease;
}
.ws-batch-progress-info {
font-size: 14px;
color: var(--text-primary);
text-align: center;
margin-bottom: 10px;
}
.ws-batch-progress-stats {
font-size: 12px;
color: var(--text-secondary);
text-align: center;
}
.ws-team-progress-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.85);
display: flex;
align-items: center;
justify-content: center;
z-index: 10000;
}
.ws-team-progress-layout {
display: flex;
align-items: flex-start;
justify-content: center; /* 整体居中，防止窗口大时两边散开 */
/* ====== 减小 gap：进度提示与大模型输出框靠近 ====== */
gap: 16px; /* 原24px，减小到16px */
max-width: 1060px; /* 进度区(padding40+300宽+40) + gap16 + 面板580 = ~976 */
width: 100%;
padding: 40px 20px; /* 左右padding减小，给面板更多空间 */
box-sizing: border-box;
}
.ws-team-progress-content {
background: transparent;
border: none;
border-radius: 12px;
padding: 24px;
min-width: 360px;
max-width: 420px;
width: 380px; /* 与全局加载遮罩的进度区宽度一致 */
height: 600px; /* ====== 与 LLM 面板等高 600px ====== */
text-align: center;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
flex-shrink: 0;
/* ====== 内容在 600px 高度内垂直居中 ====== */
/* 这样进度信息的中心点与右侧 LLM 面板的中心点在同一水平线上 */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.ws-llm-output-panel {
/* ====== 固定大小，靠近进度提示信息 ====== */
width: 580px; /* 宽度固定 */
height: 600px; /* 高度固定（与左侧进度区height:600px一致） */
flex: none;
border: 2px solid var(--text);
border-radius: 12px;
background: var(--bg);
display: flex;
flex-direction: column;
/* ====== 用户三色主题：主青蓝(#5BC8FF) + 紫(#9D4EDD) + 绿(#39FF14)点缀 ====== */
box-shadow: 0 0 28px rgba(91, 200, 255, 0.40), 0 0 8px rgba(157, 78, 221, 0.25), 0 0 6px rgba(57, 255, 20, 0.22), inset 0 0 18px rgba(91, 200, 255, 0.07);
/* ====== 移除 fixed 定位，改为蒙版内 flex 布局 ====== */
position: static;
}
.ws-llm-output-header {
padding: 10px 16px;
background: linear-gradient(90deg, rgba(91, 200, 255, 0.32), rgba(157, 78, 221, 0.18), rgba(57, 255, 20, 0.09));
border-bottom: 1px solid rgba(91, 200, 255, 0.42);
color: #e3ffff;
font-size: 14px;
font-weight: bold;
display: flex;
align-items: center;
justify-content: space-between;
/* 青蓝主描边 + 紫/绿细点缀（与.title渐变三色对齐） */
text-shadow: 0 0 8px rgba(91, 200, 255, 0.55), 0 0 2px rgba(157, 78, 221, 0.45), 0 0 1px rgba(57, 255, 20, 0.55);
}
.ws-llm-output-subtitle {
font-size: 12px;
color: var(--text-dim);
font-weight: normal;
font-style: italic;
}
.ws-llm-output-body {
padding: 16px;
color: var(--text);
font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
font-size: 13px;
line-height: 1.6;
white-space: pre-wrap;
word-wrap: break-word;
background: var(--bg);
overflow-y: auto;
/* ====== body 高度 = 面板总高600 - header(约44) - padding/border ====== */
height: 540px;
flex: none;
/* 用户三色主题：主青蓝发光 + 紫/绿细点缀 */
text-shadow: 0 0 5px rgba(91, 200, 255, 0.35), 0 0 1px rgba(157, 78, 221, 0.35), 0 0 1px rgba(57, 255, 20, 0.55);
}
/* 用户三色主题：绿 #39FF14 点缀（加粗/重点高亮）*/
.ws-llm-output-body :is(strong, b, mark) {
color: var(--accent) !important;
text-shadow: 0 0 9px rgba(57, 255, 20, 0.60), 0 0 2px rgba(57, 255, 20, 0.9);
}
.ws-llm-output-body::-webkit-scrollbar {
width: 8px;
}
.ws-llm-output-body::-webkit-scrollbar-track {
background: rgba(91, 200, 255, 0.06);
}
.ws-llm-output-body::-webkit-scrollbar-thumb {
/* 用户三色主题滚动条：青蓝 → 紫 → 绿 三段渐变点缀 */
background: linear-gradient(180deg, #5BC8FF, #9D4EDD 55%, #39FF14);
border-radius: 4px;
}
@keyframes wsLlmFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* ========== 进度提示文字：与大模型实时输出框同风格（用户三色主题 #5BC8FF / #9D4EDD / #39FF14）========== */
.ws-loading-title {
font-size: 20px;
font-weight: bold;
/* 直接应用用户的 .title 渐变字：青蓝 → 紫 */
background: linear-gradient(90deg, #5BC8FF, #9D4EDD);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
margin-bottom: 12px;
text-shadow: 0 0 18px rgba(91, 200, 255, 0.35);
}
.ws-loading-progress {
font-size: 15px;
color: var(--text);
margin-bottom: 6px;
min-height: 24px;
text-shadow: 0 0 5px rgba(91, 200, 255, 0.35), 0 0 1px rgba(157, 78, 221, 0.35), 0 0 1px rgba(57, 255, 20, 0.55);
font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
}
.ws-loading-message {
font-size: 13px;
color: var(--text-dim);
margin-bottom: 6px;
min-height: 20px;
animation: pulse 2s infinite;
text-shadow: 0 0 3px rgba(91, 200, 255, 0.30);
}
.ws-loading-subtext {
font-size: 13px;
color: var(--accent);
margin-bottom: 12px;
min-height: 20px;
/* 绿点缀：与 LLM 加粗高亮同色 */
text-shadow: 0 0 6px rgba(57, 255, 20, 0.45), 0 0 1px rgba(57, 255, 20, 0.85);
font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
}
.ws-loading-bar-container {
width: 300px;
margin: 0 auto 12px;
height: 8px;
background: rgba(91, 200, 255, 0.08);
border: 1px solid rgba(91, 200, 255, 0.25);
box-shadow: inset 0 0 4px rgba(157, 78, 221, 0.10);
border-radius: 4px;
overflow: hidden;
}
.ws-loading-bar-fill {
height: 100%;
/* 用户三色主题进度条：青蓝 → 紫 → 绿 三段渐变 */
background: linear-gradient(90deg, #5BC8FF, #9D4EDD 55%, #39FF14);
width: 0%;
transition: width 0.5s ease;
border-radius: 4px;
box-shadow: 0 0 6px rgba(91, 200, 255, 0.45), 0 0 3px rgba(157, 78, 221, 0.35), 0 0 3px rgba(57, 255, 20, 0.45);
}
.ws-loading-stats {
font-size: 13px;
color: var(--accent);
font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
text-shadow: 0 0 7px rgba(57, 255, 20, 0.55), 0 0 1px rgba(57, 255, 20, 0.9);
font-weight: bold;
}
/* 左右布局：进度提示的外层容器保持与 LLM panel 等高对齐 */
.ws-loading-info-block {
text-align: center;
padding: 20px 16px;
flex-shrink: 0;
height: 600px;
width: 380px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow: hidden;
/* 用户三色主题径向渐变底：青蓝中心，外圈加紫+绿点缀 */
background: radial-gradient(ellipse at center, rgba(91, 200, 255, 0.07) 0%, rgba(157, 78, 221, 0.03) 50%, transparent 72%);
border: 1px dashed rgba(91, 200, 255, 0.22);
border-radius: 12px;
box-shadow: inset 0 0 20px rgba(91, 200, 255, 0.04), inset 0 0 8px rgba(157, 78, 221, 0.06), inset 0 0 6px rgba(57, 255, 20, 0.08);
}
/* 加载转圈：青蓝顶 + 紫右 + 绿左下 三点渐变色 */
.ws-loading-spinner {
border-color: rgba(91, 200, 255, 0.12) !important;
border-top-color: #5BC8FF !important;
border-right-color: rgba(157, 78, 221, 0.75) !important;
border-bottom-color: rgba(57, 255, 20, 0.55) !important;
box-shadow: 0 0 12px rgba(91, 200, 255, 0.30), 0 0 5px rgba(157, 78, 221, 0.25), 0 0 4px rgba(57, 255, 20, 0.30);
}
/* projects.html 加载蒙版小进度也同步 */
.ws-loading-title-mini {
font-size: 18px;
margin-bottom: 10px;
/* 直接应用用户的 .title 渐变字：青蓝 → 紫 */
background: linear-gradient(90deg, #5BC8FF, #9D4EDD);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: 0 0 16px rgba(91, 200, 255, 0.35);
}
.ws-loading-progress-mini {
font-size: 14px;
color: var(--text);
text-shadow: 0 0 5px rgba(91, 200, 255, 0.35), 0 0 1px rgba(57, 255, 20, 0.55);
font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
}
/* 项目工作台顶部 loading-status（loading正在加载/准备开始）也同步同风格 */
.loading-status .loading-text {
color: var(--text) !important;
text-shadow: 0 0 5px rgba(91, 200, 255, 0.35), 0 0 1px rgba(157, 78, 221, 0.35), 0 0 1px rgba(57, 255, 20, 0.55) !important;
}
.loading-status .loading-step {
color: var(--accent) !important;
text-shadow: 0 0 6px rgba(57, 255, 20, 0.45) !important;
}
/* 同步 ws-team-progress-* 标题/信息/统计 文字风格到用户三色主题 */
.ws-team-progress-title {
font-size: 18px;
font-weight: bold;
/* 直接应用用户的 .title 渐变字：青蓝 → 紫 */
background: linear-gradient(90deg, #5BC8FF, #9D4EDD);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
margin-bottom: 12px;
text-shadow: 0 0 18px rgba(91, 200, 255, 0.35);
}
.ws-team-progress-info {
font-size: 14px;
color: var(--text);
margin-bottom: 20px;
text-shadow: 0 0 5px rgba(91, 200, 255, 0.35), 0 0 1px rgba(157, 78, 221, 0.35), 0 0 1px rgba(57, 255, 20, 0.55);
font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
}
.ws-team-progress-bar-container {
width: 100%;
height: 8px;
background: rgba(91, 200, 255, 0.08);
border: 1px solid rgba(91, 200, 255, 0.25);
box-shadow: inset 0 0 4px rgba(157, 78, 221, 0.10);
border-radius: 4px;
overflow: hidden;
margin-bottom: 12px;
}
.ws-team-progress-bar {
height: 100%;
/* 用户三色主题：青蓝 → 紫 → 绿 三段渐变 */
background: linear-gradient(90deg, #5BC8FF, #9D4EDD 55%, #39FF14);
border-radius: 4px;
box-shadow: 0 0 6px rgba(91, 200, 255, 0.45), 0 0 3px rgba(157, 78, 221, 0.35), 0 0 3px rgba(57, 255, 20, 0.45);
transition: width 0.3s ease;
width: 0%;
}
.ws-team-progress-stats {
font-size: 12px;
color: var(--text-dim);
text-shadow: 0 0 3px rgba(91, 200, 255, 0.30);
}
.ws-costume-regenerate-btn:hover {
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(255, 71, 87, 0.4);
}
.ws-costume-image-item {
flex-shrink: 0;
width: 120px;
height: 80px;
border-radius: 6px;
overflow: hidden;
border: 1px solid var(--border);
position: relative;
}
.ws-costume-preview-btn {
position: absolute;
top: 4px;
right: 4px;
width: 24px;
height: 24px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.6);
border: none;
color: white;
font-size: 12px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.2s;
}
.ws-costume-image-item:hover .ws-costume-preview-btn {
opacity: 1;
}
.ws-costume-preview-btn:hover {
background: rgba(0, 204, 255, 0.8);
}
.ws-costume-image-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
.ws-costume-mannequin-item {
border: 2px solid var(--gold);
position: relative;
cursor: pointer;
}
.ws-costume-mannequin-item.ws-costume-mannequin-selected {
border: 3px solid var(--gold);
box-shadow: 0 0 10px var(--gold), inset 0 0 10px rgba(255, 215, 0, 0.3);
}
.ws-costume-mannequin-tooltip {
position: absolute;
top: -200px;
left: 50%;
transform: translateX(-50%);
width: 300px;
background: rgba(10, 10, 20, 0.95);
border: 1px solid var(--gold);
border-radius: 8px;
padding: 8px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
z-index: 1000;
pointer-events: none;
}
.ws-costume-mannequin-tooltip img {
width: 100%;
height: auto;
border-radius: 4px;
}
.ws-costume-mannequin-item:hover .ws-costume-mannequin-tooltip {
opacity: 1;
visibility: visible;
top: -210px;
}
.ws-costume-mannequin-tooltip::after {
content: '';
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid var(--gold);
}
.ws-costume-image-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(0, 204, 255, 0.1), rgba(128, 0, 255, 0.1));
cursor: pointer;
}
.ws-costume-image-placeholder:hover {
background: linear-gradient(135deg, rgba(0, 204, 255, 0.2), rgba(128, 0, 255, 0.2));
}
.ws-costume-image-placeholder span {
font-size: 12px;
color: var(--text3);
}
.ws-costume-image-view {
position: absolute;
top: 4px;
left: 4px;
background: rgba(0, 0, 0, 0.7);
color: white;
font-size: 10px;
padding: 2px 6px;
border-radius: 3px;
font-weight: 500;
}
.ws-costume-fields {
width: 100%;
display: flex;
flex-direction: column;
gap: 8px;
}
.ws-costume-field {
display: flex;
flex-direction: column;
gap: 4px;
}
.ws-costume-field:first-child {
flex-direction: row;
align-items: center;
gap: 6px;
justify-content: space-between;
}
.ws-costume-field:first-child label {
flex-shrink: 0;
}
.ws-costume-field:first-child input {
flex: 1;
margin-right: 6px;
}
.ws-costume-field label {
font-size: 11px;
color: var(--text3);
}
.ws-costume-input {
padding: 6px 10px;
border: 1px solid var(--border);
border-radius: 4px;
background: rgba(0, 0, 0, 0.3);
color: var(--text);
font-size: 12px;
outline: none;
transition: border-color 0.2s;
}
.ws-costume-input:focus {
border-color: var(--cyan);
}
.ws-costume-input::placeholder {
color: var(--text3);
}
.ws-costume-empty {
grid-column: 1 / -1;
text-align: center;
color: var(--text3);
padding: 40px;
font-style: italic;
}
.ws-costume-locked .ws-costume-input {
pointer-events: none;
}
.ws-costume-count {
font-size: 12px;
color: var(--text-muted);
font-weight: normal;
}
/* 剧本故事改编区域 */
.ws-script-section {
margin-top: 16px;
}
.ws-script-section.hidden {
display: none;
}
.ws-script-section.ws-script-fullscreen {
position: fixed;
top: 60px;
left: 0;
right: 0;
bottom: 0;
background: var(--bg-dark);
z-index: 100;
margin: 0;
padding: 16px;
overflow-y: auto;
}
.ws-script-section.ws-script-fullscreen .ws-section-bar {
position: sticky;
top: 0;
z-index: 10;
}
.ws-script-section.ws-script-fullscreen .ws-script-areas {
height: calc(100vh - 120px);
}
.ws-script-section.ws-script-fullscreen .ws-script-area {
height: 100%;
}
.ws-script-areas {
display: flex;
gap: 14px;
align-items: stretch;
height: 100%;
}
.ws-script-area {
background: var(--bg-panel);
border: 1px solid var(--border);
border-radius: 8px;
padding: 16px;
display: flex;
flex-direction: column;
min-height: 0;
transition: flex 0.3s ease;
overflow: hidden;
}
.ws-script-area.ws-script-suggestions {
flex: 1.4;
padding-bottom: 0;
position: relative;
}
.ws-script-area.ws-script-original {
flex: 1;
}
.ws-script-area.ws-script-story {
flex: 1;
}
.ws-script-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
border: 2px solid var(--cyan);
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 204, 255, 0.1);
}
.ws-script-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.ws-script-avatar-placeholder {
color: var(--cyan);
font-size: 18px;
font-weight: 600;
}
.ws-script-area-title {
color: var(--cyan);
font-size: 28px;
font-weight: 600;
margin: 0;
white-space: nowrap;
flex-shrink: 0;
}
.ws-area-collapse-btn {
width: 28px;
height: 28px;
background: transparent;
border: 1px solid var(--border);
border-radius: 4px;
color: var(--text3);
font-size: 14px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
flex-shrink: 0;
}
.ws-area-collapse-btn:hover {
border-color: var(--cyan);
color: var(--cyan);
background: rgba(0, 204, 255, 0.1);
}
.ws-script-area.ws-area-collapsed {
flex: 0 0 36px !important;
padding: 8px !important;
overflow: hidden;
height: 36px !important;
min-height: 36px !important;
max-height: 36px !important;
box-sizing: border-box !important;
}
.ws-script-area.ws-area-collapsed .ws-area-collapse-btn {
width: 20px;
height: 20px;
font-size: 12px;
padding: 0;
}
.ws-script-area.ws-area-collapsed .ws-editor-toolbar,
.ws-script-area.ws-area-collapsed .ws-script-textarea,
.ws-script-area.ws-area-collapsed .ws-toc-separator,
.ws-script-area.ws-area-collapsed .ws-toc-header,
.ws-script-area.ws-area-collapsed .ws-toc-container,
.ws-script-area.ws-area-collapsed .ws-script-content,
.ws-script-area.ws-area-collapsed .ws-generate-btn,
.ws-script-area.ws-area-collapsed .ws-generate-btn-story,
.ws-script-area.ws-area-collapsed .ws-tool-btn-small,
.ws-script-area.ws-area-collapsed #wsAllImportFile,
.ws-script-area.ws-area-collapsed .ws-selected-word-count,
.ws-script-area.ws-area-collapsed #wsSelectedWordCount,
.ws-script-area.ws-area-collapsed .ws-toc-separator + div,
.ws-script-area.ws-area-collapsed .ws-toc-separator + div ~ div,
.ws-script-area.ws-area-collapsed .ws-script-area-title,
.ws-script-area.ws-area-collapsed .ws-script-avatar,
.ws-script-area.ws-area-collapsed .ws-duration-container,
.ws-script-area.ws-area-collapsed .ws-script-header-row > div,
.ws-script-area.ws-area-collapsed .ws-script-header-row > h3 {
display: none !important;
}
.ws-script-area.ws-area-collapsed .ws-script-header-row {
display: flex !important;
align-items: center;
height: 100%;
margin-bottom: 0;
}
.ws-script-area.ws-area-collapsed > div:first-of-type:not(.ws-script-header-row) {
display: none !important;
}
.ws-editor-toolbar {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 10px;
padding: 8px;
background: var(--bg-dark);
border-radius: 6px;
border: 1px solid var(--border);
width: calc(100% - 116px);
flex-shrink: 0;
}
.ws-tool-btn {
display: flex;
align-items: center;
gap: 4px;
padding: 6px 10px;
background: transparent;
border: 1px solid var(--border);
border-radius: 4px;
color: var(--text3);
font-size: 12px;
cursor: pointer;
transition: all 0.2s;
}
.ws-tool-btn:hover {
border-color: var(--cyan);
color: var(--cyan);
}
/* 直接生成模式（绿色）- 原著字数 < 20000 */
.ws-tool-btn.btn-direct-mode {
border-color: #4caf50;
color: #4caf50;
background: rgba(76, 175, 80, 0.1);
}
.ws-tool-btn.btn-direct-mode:hover {
background: #4caf50;
color: #fff;
}
/* 两步生成模式（紫色）- 原著字数 >= 20000 */
.ws-tool-btn.btn-twostep-mode {
border-color: #9c27b0;
color: #9c27b0;
background: rgba(156, 39, 176, 0.1);
}
.ws-tool-btn.btn-twostep-mode:hover {
background: #9c27b0;
color: #fff;
}
.ws-generate-btn-story.btn-direct-mode {
border-color: #4caf50;
color: #4caf50;
background: rgba(76, 175, 80, 0.1);
}
.ws-generate-btn-story.btn-direct-mode:hover {
background: #4caf50;
color: #fff;
}
.ws-generate-btn-story.btn-twostep-mode {
border-color: #9c27b0;
color: #9c27b0;
background: rgba(156, 39, 176, 0.1);
}
.ws-generate-btn-story.btn-twostep-mode:hover {
background: #9c27b0;
color: #fff;
}
.ws-tool-save {
border-color: var(--gold);
color: var(--gold);
}
.ws-tool-save:hover {
background: var(--gold);
color: var(--bg-dark);
}
/* 角色权限禁用态：被 canEditRole() 判定为无权限的按钮 */
.role-disabled,
.role-disabled:hover,
button.role-disabled,
button.role-disabled:hover {
opacity: 0.45 !important;
cursor: not-allowed !important;
pointer-events: none !important;
filter: grayscale(0.5);
}
.ws-script-header-row {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
padding-right: 116px;
position: relative;
}
.ws-duration-container {
margin-left: auto;
padding-left: 8px;
}
.ws-toolbar-spacer {
flex: 1;
}
.ws-generate-btn {
width: 100px;
height: 100px;
padding: 8px;
background: transparent;
border: 2px solid var(--cyan);
border-radius: 8px;
color: var(--cyan);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
position: absolute;
right: 16px;
top: 16px;
z-index: 20;
}
.ws-generate-btn:hover {
background: var(--cyan);
color: var(--bg-dark);
}
.ws-generate-btn-story {
position: relative;
top: auto;
right: auto;
z-index: auto;
flex-shrink: 0;
}
.ws-generate-btn-all {
position: relative;
top: auto;
right: auto;
z-index: auto;
flex-shrink: 0;
border-color: var(--gold);
color: var(--gold);
}
.ws-generate-btn-all:hover {
background: var(--gold);
color: var(--bg-dark);
}
.ws-team-header-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 12px;
gap: 8px;
}
.ws-team-images {
display: flex;
gap: 0;
flex-wrap: nowrap;
justify-content: space-evenly;
flex: 1;
}
.ws-team-image-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.ws-team-image-wrapper {
position: relative;
width: 70px;
height: 70px;
}
.ws-team-image {
width: 70px;
height: 70px;
object-fit: cover;
border-radius: 8px;
border: 1px solid var(--border);
}
.ws-team-image-label {
font-size: 10px;
color: var(--text3);
}
.ws-team-image-name {
font-size: 9px;
color: var(--cyan);
text-align: center;
max-width: 70px;
white-space: normal;
word-wrap: break-word;
display: flex;
align-items: center;
}
.ws-team-image-age {
font-size: 8px;
color: var(--gold);
text-align: center;
max-width: 70px;
white-space: normal;
word-wrap: break-word;
display: flex;
align-items: center;
justify-content: center;
line-height: 1.3;
min-height: 24px;
}
.ws-team-age-group {
display: flex;
flex-direction: column;
align-items: center;
gap: 1px;
}
.ws-team-age-tag {
font-size: 8px;
color: var(--gold);
text-align: center;
padding: 1px 4px;
background: rgba(255, 215, 0, 0.1);
border-radius: 3px;
}
.ws-team-action-cell {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: flex-start;
gap: 4px;
flex-shrink: 0;
}
.ws-generate-num {
font-size: 20px;
font-weight: 800;
line-height: 1;
color: inherit;
}
.ws-generate-text {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
font-size: 13px;
font-weight: 600;
color: inherit;
}
.ws-tool-btn-small {
display: flex;
align-items: center;
gap: 3px;
padding: 4px 8px;
font-size: 12px;
background: var(--bg-dark);
border: 1px solid var(--border);
border-radius: 4px;
color: var(--text2);
cursor: pointer;
transition: all 0.2s;
white-space: nowrap;
}
.ws-tool-btn-small:hover {
border-color: var(--cyan);
color: var(--cyan);
}
.ws-editor-bubble {
position: fixed;
top: 200px;
left: 50%;
transform: translateX(-50%);
width: 800px;
max-height: 355px;
background: var(--bg-dark);
border: 2px solid #8b7355;
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 0 20px rgba(139, 115, 85, 0.05);
z-index: 1000;
display: flex;
flex-direction: column;
animation: wsBubbleFadeIn 0.3s ease-out;
outline: none;
}
.ws-editor-bubble-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 12px;
background: var(--bg1);
border-bottom: 2px solid #8b7355;
cursor: grab;
}
.ws-editor-bubble-header:active {
cursor: grabbing;
}
.ws-bubble-drag-handle {
display: flex;
align-items: center;
gap: 8px;
}
.ws-bubble-drag-icon {
font-size: 14px;
color: var(--gold);
letter-spacing: -2px;
}
.ws-bubble-title {
font-size: 13px;
font-weight: 600;
color: var(--gold);
}
.ws-bubble-center-title {
position: absolute;
left: 50%;
transform: translateX(-50%);
font-size: 13px;
color: var(--cyan);
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 300px;
}
.ws-bubble-toolbar {
display: flex;
gap: 4px;
}
.ws-editor-btn {
display: flex;
align-items: center;
gap: 3px;
padding: 5px 10px;
background: rgba(139, 115, 85, 0.15);
border: 1px solid #8b7355;
border-radius: 4px;
color: var(--gold);
font-size: 11px;
cursor: pointer;
transition: all 0.2s;
}
.ws-editor-btn:hover {
background: rgba(255, 204, 0, 0.15);
border-color: var(--gold);
color: var(--gold);
}
.ws-editor-btn-danger {
background: rgba(255, 68, 68, 0.1);
border-color: rgba(255, 68, 68, 0.5);
color: #ff4444;
}
.ws-editor-btn-danger:hover {
background: rgba(255, 68, 68, 0.2);
border-color: #ff4444;
color: #ff4444;
}
.ws-editor-btn-primary {
background: var(--gold);
border-color: var(--gold);
color: #333;
}
.ws-editor-btn-primary:hover {
background: #ffdd44;
border-color: #ffdd44;
}
/* 🤖 智能优化按钮 */
.ws-editor-btn-ai {
background: linear-gradient(135deg, rgba(91,200,255,.18), rgba(157,78,221,.18));
border-color: rgba(91,200,255,.45);
color: #9ad8ff;
}
.ws-editor-btn-ai:hover {
background: linear-gradient(135deg, rgba(91,200,255,.3), rgba(157,78,221,.3));
border-color: var(--cyan);
color: var(--cyan);
box-shadow: 0 0 10px rgba(91,200,255,.25);
}
.ws-editor-btn-ai-applied {
background: rgba(0,204,102,.15) !important;
border-color: rgba(0,204,102,.5) !important;
color: #00cc66 !important;
}
.ws-editor-btn-ai-applied:hover {
background: rgba(0,204,102,.28) !important;
box-shadow: 0 0 10px rgba(0,204,102,.3) !important;
}
.ws-bubble-close {
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(139, 115, 85, 0.15);
border: 1px solid #8b7355;
border-radius: 4px;
color: var(--gold);
font-size: 14px;
cursor: pointer;
transition: all 0.2s;
margin-left: 8px;
}
.ws-bubble-close:hover {
background: rgba(255, 204, 0, 0.15);
border-color: var(--gold);
color: var(--gold);
}
.ws-editor-bubble-body {
padding: 0;
height: calc(100% - 44px);
}
.ws-editor-bubble-textarea {
width: 100%;
height: 100%;
min-height: 310px;
padding: 12px;
background: var(--bg-dark);
border: none;
border-radius: 0 0 12px 12px;
color: var(--text1);
font-family: 'Consolas', 'Monaco', monospace;
font-size: 13px;
line-height: 1.6;
resize: none;
outline: none;
box-sizing: border-box;
}
.ws-editor-bubble-textarea::placeholder {
color: var(--text3);
}
.ws-editor-bubble-resize {
position: absolute;
right: 4px;
bottom: 4px;
width: 16px;
height: 16px;
cursor: nwse-resize;
background: linear-gradient(135deg, transparent 50%, var(--gold) 50%);
border-radius: 0 0 8px 0;
}
.ws-editor-bubble-resize:hover {
background: linear-gradient(135deg, transparent 50%, #ffc800 50%);
}
@keyframes wsBubbleFadeIn {
from {
opacity: 0;
transform: translateY(10px) scale(0.98);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes wsBubbleFadeOut {
from {
opacity: 1;
transform: translateY(0) scale(1);
}
to {
opacity: 0;
transform: translateY(-5px) scale(0.99);
}
}
.ws-shooting-section {
margin-top: 16px;
border: 1px solid var(--border);
border-radius: 8px;
overflow: visible;
display: flex;
flex-direction: column;
height: auto;
min-height: calc(100vh - 80px);
max-height: none;
}
.ws-shooting-section .ws-collapse-content {
flex: none;
display: flex;
flex-direction: column;
overflow: visible;
}
.ws-shooting-top {
flex: none;
display: flex;
flex-direction: column;
overflow: visible;
}
.ws-shooting-section.collapsed {
max-height: none;
min-height: unset;
overflow: visible;
}
/* 拍摄剧本制作整体收起（标题栏箭头控制：收起创作区+评估区，仅保留标题栏） */
.ws-shooting-section.ws-all-collapsed {
min-height: unset;
}
.ws-shooting-section.ws-all-collapsed .ws-creation-bar,
.ws-shooting-section.ws-all-collapsed .ws-collapse-content,
.ws-shooting-section.ws-all-collapsed .ws-shooting-script {
display: none !important;
}
/* 仅创作区收拢时，拍摄剧本制作section最小高度跟随内容自适应 */
.ws-shooting-section:has(.ws-collapse-content.collapsed) {
min-height: auto;
}
.ws-shooting-areas {
display: grid;
grid-template-columns: 1.3fr 1.0fr 1.4fr;
gap: 0;
flex: none;
overflow: visible;
align-items: start;
}
.ws-shooting-area {
padding: 12px 12px 0 12px;
border-right: 1px solid var(--border);
display: flex;
flex-direction: column;
overflow: visible;
min-height: 600px;
max-height: none;
}
.ws-shooting-area:last-child {
border-right: none;
}
.ws-shooting-top-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 12px;
background: rgba(0, 0, 0, 0.3);
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
.ws-shooting-areas-toggle-btn {
width: 28px;
height: 28px;
min-width: 28px;
background: transparent;
border: 1px solid var(--border);
border-radius: 4px;
color: var(--text2);
font-size: 14px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
}
.ws-shooting-areas-toggle-btn:hover {
background: var(--cyan);
color: var(--bg-dark);
border-color: var(--cyan);
}
.ws-genre-analysis-content {
flex: 1;
min-height: 0;
overflow-y: visible;
background: #0a0a1a;
border: 1px solid var(--border);
border-radius: 4px;
padding: 8px;
font-size: 12px;
line-height: 1.5;
color: var(--text1);
box-sizing: border-box;
max-height: none;
}
.ws-genre-analysis-content > div {
overflow: visible;
}
.ws-genre-analysis-content img {
max-width: 100%;
}
.ws-genre-movie-scroll {
scrollbar-width: thin;
scrollbar-color: var(--gold) var(--bg-dark);
}
.ws-genre-movie-scroll::-webkit-scrollbar {
width: 8px;
}
.ws-genre-movie-scroll::-webkit-scrollbar-track {
background: var(--bg-dark);
border-radius: 4px;
}
.ws-genre-movie-scroll::-webkit-scrollbar-thumb {
background: var(--gold);
border-radius: 4px;
}
.ws-genre-movie-scroll::-webkit-scrollbar-thumb:hover {
background: #ffd700;
}
.ws-movie-poster {
width: 112px !important;
height: 156px !important;
object-fit: cover !important;
border-radius: 4px !important;
flex-shrink: 0 !important;
}
.ws-genre-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
gap: 8px;
white-space: nowrap;
overflow: visible;
}
.ws-genre-view-toggle {
display: flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
.ws-genre-view-label {
font-size: 11px;
color: var(--text2);
white-space: nowrap;
}
.ws-genre-view-switch {
position: relative;
display: inline-block;
width: 40px;
height: 22px;
}
.ws-genre-view-switch input {
opacity: 0;
width: 0;
height: 0;
}
.ws-genre-view-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #444;
transition: 0.3s;
border-radius: 22px;
}
.ws-genre-view-slider:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 2px;
bottom: 2px;
background-color: white;
transition: 0.3s;
border-radius: 50%;
}
.ws-genre-view-switch input:checked + .ws-genre-view-slider {
background-color: var(--cyan);
}
.ws-genre-view-switch input:checked + .ws-genre-view-slider:before {
transform: translateX(18px);
}
.ws-shooting-area-title {
font-size: 13px;
color: var(--cyan);
margin: 0 0 8px;
font-weight: 500;
}
.ws-scene-outline {
flex: 1;
min-height: 100px;
max-height: 200px;
background: var(--bg-dark);
border: 1px solid var(--border);
border-radius: 4px;
padding: 4px;
overflow-y: auto;
}
.ws-outline-empty {
color: var(--text3);
font-size: 12px;
text-align: center;
padding: 20px;
}
.ws-outline-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 4px;
padding: 4px 8px;
cursor: pointer;
font-size: 12px;
color: var(--text2);
border-radius: 2px;
margin-bottom: 2px;
}
.ws-outline-item:hover {
background: rgba(0, 204, 102, 0.1);
color: var(--cyan);
}
/* ========== outline item 状态标记 ========== */
/* 意见已生成：背景绿 + 字体绿 */
.ws-outline-item.completed {
background: rgba(34, 197, 94, 0.15) !important;
color: #4ade80 !important;
border-left: 2px solid #4ade80;
}
/* 拍摄剧本已生成：字体紫（不改背景，保留任何已有背景色） */
.ws-outline-item.generated-shoot {
color: #a855f7 !important;
border-left: 2px solid #a855f7;
}
/* 同时有意见 + 拍摄剧本：背景绿（来自 .completed） + 字体紫（来自 .generated-shoot） */
.ws-outline-item.completed.generated-shoot {
background: rgba(34, 197, 94, 0.15) !important;
color: #a855f7 !important;
border-left: 2px solid #a855f7;
}
/* 生成中：黄色进度 */
.ws-outline-item.generating-shoot,
.ws-outline-item.processing {
background: rgba(250, 204, 21, 0.1) !important;
color: #facc15 !important;
}
/* 失败：红色 */
.ws-outline-item.failed {
background: rgba(239, 68, 68, 0.1) !important;
color: #f87171 !important;
}
.ws-outline-item-text {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ws-outline-gen-btn {
flex: none;
width: 20px;
height: 20px;
line-height: 18px;
text-align: center;
padding: 0;
border: 1px solid var(--cyan);
border-radius: 4px;
background: transparent;
color: var(--cyan);
font-size: 11px;
cursor: pointer;
transition: background 0.2s, color 0.2s;
}
.ws-outline-gen-btn:hover {
background: var(--cyan);
color: #000;
}
.ws-outline-gen-btn.has-script {
background: rgba(0, 204, 102, 0.15);
border-color: var(--success);
color: var(--success);
}
.ws-outline-gen-btn.has-script:hover {
background: var(--success);
color: #000;
}
.ws-shooting-scenes-dialogue {
display: flex;
flex-direction: column;
gap: 12px;
}
.ws-shooting-scenes-dialogue.ws-shooting-scenes-only {
overflow: hidden;
max-height: 160px;
flex: none;
}
.ws-scene-outline-section {
display: flex;
flex-direction: column;
flex: 0 0 auto;
}
.ws-dialogue-section {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
}
.ws-dialogue-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.ws-dialogue-actions-row {
display: flex;
align-items: flex-end;
gap: 8px;
}
.ws-dialogue-mode-select {
font-size: 12px;
padding: 2px 8px;
background: var(--bg-dark);
color: var(--cyan);
border: 1px solid var(--border);
border-radius: 4px;
cursor: pointer;
}
.ws-dialogue-mode-row {
display: flex;
align-items: flex-start;
gap: 16px;
padding-top: 10px;
position: relative;
}
.ws-dialogue-mode-selector {
padding: 2px 0;
flex: 1;
}
.ws-dialogue-mode-images {
display: flex;
gap: 16px;
}
.ws-dialogue-mode-images .ws-dialogue-mode-option {
display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
opacity: 0.5;
transition: opacity 0.2s;
gap: 4px;
flex: 1;
min-width: 0;
}
.ws-dialogue-mode-images .ws-dialogue-mode-option.active {
opacity: 1;
}
.ws-dialogue-mode-images .ws-dialogue-mode-option input[type="radio"] {
accent-color: var(--cyan);
margin: 0;
}
.ws-dialogue-mode-image-container {
width: 100%;
aspect-ratio: 21/9;
border-radius: 4px;
overflow: hidden;
border: 2px solid transparent;
transition: border-color 0.2s;
}
.ws-dialogue-mode-images .ws-dialogue-mode-option.active .ws-dialogue-mode-image-container {
border-color: var(--cyan);
}
.ws-dialogue-mode-images .ws-dialogue-mode-option.disabled {
opacity: 0.3;
cursor: not-allowed;
}
.ws-dialogue-mode-images .ws-dialogue-mode-option.disabled:hover {
opacity: 0.3;
}
.ws-dialogue-mode-icon {
width: 100%;
height: 100%;
object-fit: cover;
}
.ws-dialogue-mode-images .ws-dialogue-mode-option span {
font-size: 12px;
color: var(--cyan);
}
.ws-dialogue-textarea {
flex: 1;
min-height: 150px;
max-height: none;
margin-top: 12px;
margin-bottom: 22px;
overflow-y: auto;
overflow-x: hidden;
}
.ws-dialogue-textarea::-webkit-scrollbar {
width: 6px;
}
.ws-dialogue-textarea::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.05);
border-radius: 3px;
}
.ws-dialogue-textarea::-webkit-scrollbar-thumb {
background: rgba(255, 215, 0, 0.3);
border-radius: 3px;
}
.ws-dialogue-textarea::-webkit-scrollbar-thumb:hover {
background: rgba(255, 215, 0, 0.5);
}
.ws-outline-item.active {
background: rgba(0, 204, 255, 0.15);
color: var(--cyan);
border-left: 2px solid var(--cyan);
}
.ws-outline-item.highlight {
animation: outlineHighlight 0.3s ease;
}
@keyframes outlineHighlight {
0% { background: rgba(255, 255, 0, 0.3); }
100% { background: rgba(0, 204, 255, 0.15); }
}
.ws-outline-item.processing {
background: rgba(255, 204, 0, 0.2) !important;
color: var(--gold) !important;
animation: pulse 1s infinite;
}
/* 注意：completed / generated-shoot / failed / 同时有两者 的状态规则已统一在 L11572 定义 */
/* ========== 下面是生成中闪烁动画（和已完成状态不同，必须保留） ========== */
/* 生成中闪烁动画 - 绿色和紫色之间闪烁 */
@keyframes blink-green-purple {
0%, 49% {
background-color: rgba(0, 204, 102, 0.3) !important;
border-left-color: #00cc66 !important;
}
50%, 100% {
background-color: rgba(156, 39, 176, 0.3) !important;
border-left-color: #9c27b0 !important;
}
}
@keyframes blink-green-purple-text {
0%, 49% { color: #00cc66 !important; }
50%, 100% { color: #9c27b0 !important; }
}
/* 生成中状态 - 闪烁动画（高优先级） */
.ws-outline-item.generating-shoot {
background-color: rgba(0, 204, 102, 0.3) !important;
border-left: 2px solid #00cc66 !important;
animation: blink-green-purple 0.5s steps(1) infinite !important;
}
.ws-outline-item.generating-shoot .ws-outline-item-text {
color: #00cc66 !important;
animation: blink-green-purple-text 0.5s steps(1) infinite !important;
font-weight: 600 !important;
}
/* 同时有 completed 类时 */
.ws-outline-item.generating-shoot.completed {
background-color: rgba(0, 204, 102, 0.3) !important;
border-left: 2px solid #00cc66 !important;
animation: blink-green-purple 0.5s steps(1) infinite !important;
}
.ws-outline-item.generating-shoot.active {
background-color: rgba(0, 204, 102, 0.3) !important;
border-left: 2px solid #00cc66 !important;
animation: blink-green-purple 0.5s steps(1) infinite !important;
}
/* 分场目录/分镜目录 生成中闪烁动画（与 outline-item 一致） */
.ws-scene-item.generating-shoot,
.ws-scene-item.generating-shoot.active {
background-color: rgba(0, 204, 102, 0.3) !important;
border-left: 3px solid #00cc66 !important;
animation: blink-green-purple 0.5s steps(1) infinite !important;
}
.ws-scene-item.generating-shoot .ws-scene-name,
.ws-scene-item.generating-shoot .ws-scene-number {
color: #00cc66 !important;
animation: blink-green-purple-text 0.5s steps(1) infinite !important;
font-weight: 600 !important;
}
.ws-shot-item.generating-shoot,
.ws-shot-item.generating-shoot.active {
background-color: rgba(0, 204, 102, 0.3) !important;
border-left: 3px solid #00cc66 !important;
animation: blink-green-purple 0.5s steps(1) infinite !important;
}
.ws-shot-item.generating-shoot .ws-shot-name,
.ws-shot-item.generating-shoot .ws-shot-number,
.ws-shot-item.generating-shoot .ws-shot-time {
color: #00cc66 !important;
animation: blink-green-purple-text 0.5s steps(1) infinite !important;
font-weight: 600 !important;
}
/* 注意：outline-item 的 generated-shoot 规则已统一在 L11572 定义 */
/* 分场目录/分镜目录 已生成拍摄剧本 - 稳定紫色 */
.ws-scene-item.generated-shoot {
background-color: rgba(156, 39, 176, 0.15) !important;
border-left: 3px solid #9c27b0 !important;
}
.ws-scene-item.generated-shoot .ws-scene-name,
.ws-scene-item.generated-shoot .ws-scene-number {
color: #9c27b0 !important;
font-weight: 600 !important;
}
.ws-shot-item.generated-shoot {
background-color: rgba(156, 39, 176, 0.15) !important;
border-left: 3px solid #9c27b0 !important;
}
.ws-shot-item.generated-shoot .ws-shot-name,
.ws-shot-item.generated-shoot .ws-shot-number,
.ws-shot-item.generated-shoot .ws-shot-time {
color: #9c27b0 !important;
font-weight: 600 !important;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.6; }
}
.ws-shooting-textarea {
flex: 1;
min-height: 80px;
background: var(--bg-dark);
border: 1px solid var(--border);
border-radius: 4px;
padding: 8px;
color: var(--text1);
font-family: inherit;
font-size: 12px;
resize: none;
outline: none;
}
.ws-shooting-textarea:focus {
border-color: var(--cyan);
}
.ws-shooting-textarea::placeholder {
color: var(--text3);
}
.ws-shooting-notes-wrapper {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
}
.ws-shooting-notes-container {
display: flex;
gap: 12px;
flex: 1;
min-height: 0;
overflow-y: auto;
}
.ws-team-inputs {
display: flex;
flex-direction: column;
gap: 12px;
flex: 1;
min-height: 0;
max-height: none;
padding: 12px 12px 0 12px;
margin-bottom: 22px;
overflow-y: auto;
}
.ws-audience-inputs {
display: flex;
flex-direction: column;
gap: 12px;
flex: 1;
min-height: 0;
padding: 12px;
overflow-y: auto;
}
.ws-audience-order-toggle-row {
display: flex;
align-items: center;
justify-content: flex-end;
padding-bottom: 8px;
border-bottom: 1px solid var(--border);
margin-bottom: 4px;
}
.ws-audience-section {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
}
.ws-genre-analysis-section {
display: flex;
flex-direction: column;
gap: 4px;
padding: 12px;
border-top: 1px solid var(--border);
width: 100%;
box-sizing: border-box;
flex-shrink: 0;
}
.ws-genre-analysis-section textarea {
min-height: 60px;
height: auto;
overflow-y: hidden;
resize: none;
flex: none;
}
/* 题材分析区域的触发容器不限制高度，允许文本框随内容向下延展 */
.ws-genre-analysis-section .ws-notes-trigger {
overflow: visible;
flex: none;
min-height: 60px;
}
.ws-genre-analysis-label {
font-size: 12px;
color: var(--gold);
font-weight: 500;
margin-bottom: 4px;
}
/* 题材分析意见显示区域 - 带不同背景色的卡片 */
.ws-genre-opinions-display {
width: 100%;
min-height: 60px;
max-height: 600px;
overflow-y: auto;
padding: 0 8px;
border-radius: 6px;
background: rgba(0, 0, 0, 0.02);
box-sizing: border-box;
transition: height 0.2s ease;
}
.ws-genre-opinions-display::-webkit-scrollbar {
width: 6px;
}
.ws-genre-opinions-display::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.05);
border-radius: 3px;
}
.ws-genre-opinions-display::-webkit-scrollbar-thumb {
background: rgba(255, 215, 0, 0.3);
border-radius: 3px;
}
.ws-genre-opinions-display::-webkit-scrollbar-thumb:hover {
background: rgba(255, 215, 0, 0.5);
}
.ws-genre-opinion-item {
transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.2s ease, height 0.2s ease;
align-items: stretch;
margin-bottom: 0;
overflow: hidden;
animation: wsFadeIn 0.2s ease;
}
.ws-genre-opinion-item.removing {
animation: wsFadeOut 0.2s ease forwards;
}
@keyframes wsFadeIn {
from {
opacity: 0;
transform: translateY(-5px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes wsFadeOut {
from {
opacity: 1;
max-height: 200px;
}
to {
opacity: 0;
max-height: 0;
margin-bottom: 0;
}
}
.ws-genre-opinion-item:hover {
transform: translateX(2px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
/* 题材分析意见海报样式 */
.ws-genre-opinion-poster {
width: 50px;
height: 60px;
flex-shrink: 0;
border-radius: 0;
overflow: hidden;
background: rgba(0, 0, 0, 0.2);
border-right: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
}
.ws-genre-opinion-poster img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.ws-genre-opinion-content {
white-space: normal;
word-break: break-word;
line-height: 1.5;
font-size: 12px;
color: #e0e0e0;
text-align: left;
display: block;
padding: 0 10px;
margin: 0;
min-height: 60px;
transition: height 0.2s ease;
}
.ws-genre-opinion-number {
float: left;
width: 2em;
flex-shrink: 0;
font-weight: 500;
}
.ws-genre-opinion-text {
display: block;
overflow: hidden;
}
.ws-audience-label {
font-size: 12px;
color: var(--text2);
margin-bottom: 4px;
font-weight: 500;
display: flex;
align-items: center;
gap: 6px;
}
.ws-audience-checkbox {
width: 14px;
height: 14px;
cursor: pointer;
accent-color: var(--cyan);
}
.ws-team-input {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
}
.ws-team-label {
font-size: 12px;
color: var(--text2);
margin-bottom: 4px;
font-weight: 500;
}
.ws-team-header {
display: block;
margin-bottom: 12px;
}
.ws-notes-trigger {
position: relative;
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
cursor: pointer;
border-radius: 4px;
overflow: hidden;
}
.ws-notes-trigger:hover {
border-color: var(--gold);
}
.ws-notes-edit-icon {
position: absolute;
right: 8px;
bottom: 8px;
font-size: 14px;
opacity: 0;
transition: opacity 0.2s ease;
pointer-events: none;
}
.ws-notes-trigger:hover .ws-notes-edit-icon {
opacity: 1;
}
.ws-notes-editor-backdrop {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
z-index: 2000;
opacity: 0;
transition: opacity 0.3s ease;
}
.ws-notes-editor-backdrop.show {
opacity: 1;
}
.ws-notes-editor {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.9);
background: var(--bg-card);
border-radius: 12px;
padding: 20px;
width: 90%;
max-width: 500px;
max-height: 80vh;
z-index: 2001;
opacity: 0;
transition: all 0.3s ease;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
border: 1px solid var(--gold);
}
.ws-notes-editor.show {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
.ws-notes-editor-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(255, 204, 0, 0.2);
}
.ws-notes-editor-title {
font-size: 16px;
font-weight: 600;
color: var(--gold);
}
.ws-notes-editor-close {
background: none;
border: none;
color: var(--text2);
font-size: 20px;
cursor: pointer;
padding: 4px;
}
.ws-notes-editor-close:hover {
color: var(--text);
}
.ws-notes-editor-textarea {
width: 100%;
height: 300px;
background: var(--bg-dark);
border: 1px solid var(--border);
border-radius: 8px;
padding: 12px;
color: var(--text1);
font-family: inherit;
font-size: 14px;
resize: none;
margin-bottom: 16px;
}
.ws-notes-editor-textarea:focus {
border-color: var(--gold);
outline: none;
}
.ws-notes-editor-actions {
display: flex;
justify-content: flex-end;
gap: 10px;
}
.ws-notes-editor-btn {
padding: 8px 20px;
border: none;
border-radius: 4px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
}
.ws-notes-editor-btn-save {
background: var(--gold);
color: var(--bg-dark);
}
.ws-notes-editor-btn-save:hover {
background: #ffd700;
}
.ws-notes-editor-btn-clear {
background: rgba(255, 0, 0, 0.2);
color: #ff6b6b;
border: 1px solid rgba(255, 0, 0, 0.3);
}
.ws-notes-editor-btn-clear:hover {
background: rgba(255, 0, 0, 0.3);
}
.ws-notes-editor-btn-cancel {
background: var(--bg-panel);
color: var(--text2);
border: 1px solid var(--border);
}
.ws-notes-editor-btn-cancel:hover {
background: var(--bg-dark);
color: var(--text);
}
.ws-shot-editor-window {
background: var(--bg-card);
border: 2px solid var(--gold);
border-radius: 12px;
box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3);
overflow: hidden;
resize: both;
}
.ws-shot-editor-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 16px;
background: linear-gradient(135deg, rgba(255, 204, 0, 0.15), rgba(139, 115, 85, 0.15));
border-bottom: 1px solid var(--border);
cursor: move;
user-select: none;
flex-shrink: 0;
}
.ws-shot-editor-drag-handle {
display: flex;
align-items: center;
gap: 10px;
}
.ws-shot-editor-drag-icon {
color: var(--gold);
font-size: 14px;
letter-spacing: 2px;
}
.ws-shot-editor-title {
font-size: 15px;
font-weight: 600;
color: var(--gold);
}
.ws-shot-editor-hint {
font-size: 11px;
color: #ff6b6b;
font-weight: normal;
opacity: 0.8;
}
.ws-shot-editor-close {
background: none;
border: none;
color: var(--text2);
font-size: 20px;
cursor: pointer;
padding: 4px 8px;
border-radius: 4px;
transition: all 0.2s;
}
.ws-shot-editor-close:hover {
background: rgba(255, 68, 68, 0.2);
color: #ff4444;
}
.ws-shot-editor-body {
flex: 1;
overflow: hidden;
padding: 12px;
display: flex;
flex-direction: column;
min-height: 0;
}
.ws-shot-editor-container {
width: 100%;
flex: 1;
overflow-y: auto;
background: var(--bg-dark);
border: 1px solid var(--border);
border-radius: 8px;
padding: 12px;
color: var(--text1);
font-family: 'Consolas', 'Monaco', monospace;
font-size: 13px;
line-height: 1.6;
outline: none;
white-space: pre-wrap;
word-wrap: break-word;
}
.ws-shot-editor-container:focus {
border-color: var(--gold);
box-shadow: 0 0 0 2px rgba(255, 204, 0, 0.2);
}
.ws-shot-editor-footer {
display: flex;
justify-content: flex-end;
align-items: center;
padding: 10px 16px;
background: var(--bg-panel);
border-top: 1px solid var(--border);
gap: 10px;
flex-shrink: 0;
position: relative;
}
.ws-shot-editor-resize-handle {
position: absolute;
right: 8px;
bottom: 8px;
width: 16px;
height: 16px;
cursor: nwse-resize;
color: var(--text2);
font-size: 12px;
opacity: 0.5;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.ws-shot-editor-resize-handle:hover {
opacity: 1;
color: var(--gold);
}
.ws-shot-tag-lock {
color: #ff4444;
font-weight: bold;
background: rgba(255, 68, 68, 0.1);
padding: 2px 6px;
border-radius: 3px;
margin: 0 2px;
user-select: none;
pointer-events: none;
border: 1px solid rgba(255, 68, 68, 0.3);
}
.ws-shot-block {
position: relative;
}
.ws-shot-block::before {
content: '✎ 点击编辑';
position: absolute;
top: 4px;
right: 8px;
font-size: 11px;
color: rgba(255, 255, 255, 0.6);
opacity: 0;
transition: opacity 0.2s;
pointer-events: none;
}
.ws-shot-block:hover::before {
opacity: 1;
}
.ws-auto-btn {
padding: 6px 12px;
background: linear-gradient(135deg, var(--purple), var(--cyan));
border: none;
border-radius: 4px;
color: white;
font-size: 12px;
cursor: pointer;
display: flex;
align-items: center;
gap: 6px;
transition: opacity 0.2s;
}
.ws-auto-btn:hover {
opacity: 0.9;
}
.ws-auto-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.ws-auto-btn-all {
background: linear-gradient(135deg, var(--red), var(--gold));
}
.ws-shoot-script-btn {
background: linear-gradient(135deg, var(--green), var(--cyan));
width: 100%;
justify-content: center;
}
.ws-scene-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.ws-generate-all-btn {
background: linear-gradient(135deg, var(--purple), var(--cyan));
font-size: 10px;
padding: 4px 8px;
}
@keyframes flash {
0%, 50%, 100% { opacity: 1; }
25%, 75% { opacity: 0.5; }
}
.flashing {
animation: flash 1s infinite;
}
.loading-status {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 40px;
color: var(--text2);
}
.loading-spinner {
width: 40px;
height: 40px;
border: 4px solid var(--border);
border-top-color: var(--cyan);
border-radius: 50%;
animation: spin 1s linear infinite;
margin-bottom: 16px;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.loading-text {
font-size: 14px;
margin-bottom: 8px;
}
.loading-step {
font-size: 12px;
color: var(--text3);
}
.ws-shooting-script {
padding: 12px;
border-top: 1px solid var(--border);
background: var(--bg-panel);
flex: none;
min-height: 300px;
display: flex;
flex-direction: column;
}
.ws-shooting-script-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.ws-shooting-script-title {
font-size: 13px;
color: var(--cyan);
margin: 0;
font-weight: 500;
}
.ws-shooting-script-actions {
display: flex;
gap: 8px;
align-items: center;
}
.ws-shooting-script-actions-group {
display: flex;
flex-direction: column;
gap: 4px;
}
.ws-shooting-script-actions .ws-edit-btn {
font-size: 11px;
padding: 4px 10px;
background: linear-gradient(135deg, var(--cyan), var(--blue));
color: var(--bg-dark);
border: none;
border-radius: 4px;
cursor: pointer;
transition: all 0.2s;
}
.ws-shooting-script-actions .ws-edit-btn:hover {
background: linear-gradient(135deg, var(--blue), var(--cyan));
transform: translateY(-1px);
}
.ws-shooting-script-actions .ws-edit-btn:active {
transform: translateY(0);
}
.ws-shooting-script-textarea {
width: 100%;
min-height: 300px;
height: auto;
background: var(--bg-dark);
border: 1px solid var(--border);
border-radius: 4px;
padding: 8px;
color: var(--text);
font-family: inherit;
font-size: 12px;
resize: vertical;
outline: none;
box-sizing: border-box;
}
.ws-shooting-script-textarea:focus {
border-color: var(--cyan);
}
.ws-shooting-script-textarea::placeholder {
color: var(--text3);
}
.ws-script-textarea {
flex: 1;
min-height: 0;
background: var(--bg-dark);
border: 1px solid var(--border);
border-radius: 6px;
color: var(--text);
font-size: 13px;
padding: 12px;
resize: none;
font-family: inherit;
line-height: 1.6;
}
.ws-script-textarea:focus {
border-color: var(--cyan);
outline: none;
}
.ws-script-textarea::placeholder {
color: var(--text3);
}
.ws-progress-bar {
margin: 8px 0;
padding: 10px;
background: var(--bg-dark);
border: 1px solid var(--border);
border-radius: 6px;
}
.ws-progress-bar-bg {
height: 6px;
background: rgba(0, 68, 170, 0.3);
border-radius: 3px;
overflow: hidden;
margin-bottom: 8px;
}
.ws-progress-bar-fill {
height: 100%;
background: linear-gradient(90deg, var(--cyan), var(--blue));
border-radius: 3px;
transition: width 0.3s ease;
}
.ws-progress-text {
font-size: 12px;
color: var(--cyan);
}
.ws-duration-row {
display: flex;
align-items: center;
gap: 8px;
margin-top: 10px;
}
.ws-duration-label {
font-size: 12px;
color: var(--text2);
white-space: nowrap;
}
.ws-duration-select {
background: var(--bg-dark);
border: 1px solid var(--border);
border-radius: 4px;
color: var(--text);
font-size: 12px;
padding: 4px 8px;
cursor: pointer;
outline: none;
}
.ws-duration-select:focus {
border-color: var(--cyan);
}
/* 原著目录 */
.ws-toc-separator {
border: none;
border-top: 1px solid var(--border);
margin: 12px 0 10px;
}
.ws-toc-title {
color: var(--cyan);
font-size: 13px;
font-weight: 600;
margin: 0;
}
.ws-toc-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
.ws-toc-toggle-btn {
background: var(--bg-dark);
border: 1px solid var(--border);
color: var(--text3);
font-size: 11px;
padding: 2px 8px;
border-radius: 3px;
cursor: pointer;
white-space: nowrap;
transition: color 0.15s, border-color 0.15s;
}
.ws-toc-toggle-btn:hover {
color: var(--cyan);
border-color: var(--cyan);
}
.ws-toc-container {
border: 1px solid var(--border);
border-radius: 6px;
padding: 8px;
background: rgba(0,0,0,0.3);
flex: none;
height: calc(24px * 13);
box-sizing: border-box;
}
.ws-toc-tree {
overflow-y: auto;
height: calc(24px * 13);
flex: none;
box-sizing: border-box;
}
.toc-item {
display: flex;
align-items: center;
gap: 6px;
padding: 4px 6px;
border-radius: 4px;
cursor: pointer;
transition: background 0.15s;
font-size: 12px;
color: var(--text2);
}
.toc-item:hover {
background: rgba(0,204,255,0.08);
}
.toc-item.toc-active {
background: rgba(0,204,255,0.12);
color: var(--cyan);
}
.toc-item.toc-indent {
padding-left: 20px;
}
.toc-checkbox-wrap {
position: relative;
width: 14px;
height: 14px;
flex-shrink: 0;
cursor: pointer;
}
.toc-checkbox {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.toc-checkmark {
position: absolute;
top: 0; left: 0;
width: 14px; height: 14px;
border: 1px solid var(--border);
border-radius: 2px;
background: var(--bg-dark);
}
.toc-checkbox:checked + .toc-checkmark {
background: var(--cyan);
border-color: var(--cyan);
}
.toc-checkbox:checked + .toc-checkmark::after {
content: '�?;
position: absolute;
top: -1px; left: 2px;
font-size: 10px;
color: var(--bg-dark);
font-weight: bold;
}
.toc-chapter-title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 原著内容区章节标�?*/
.ws-original-chapter-title {
font-size: 15px;
font-weight: 600;
color: var(--cyan);
margin-bottom: 10px;
padding-bottom: 8px;
border-bottom: 1px solid var(--border);
}
.ws-original-chapter-text {
font-size: 13px;
color: var(--text2);
line-height: 1.8;
}
.ws-script-content {
flex: 1;
min-height: 0;
background: var(--bg-dark);
border: 1px solid var(--border);
border-radius: 6px;
color: var(--text2);
font-size: 13px;
padding: 12px;
line-height: 1.6;
overflow-y: auto;
}
/* 制作团队卡片 */
.ws-team-card {
display: flex;
flex-direction: column;
padding: 10px !important;
}
.ws-team-title {
color: var(--cyan);
font-size: 13px;
font-weight: 600;
margin-bottom: 8px;
padding-bottom: 4px;
border-bottom: 1px solid var(--border);
}
.team-grid {
flex: 1;
display: grid;
grid-template-columns: repeat(2, 1fr);
/* 固定4行高度，确保8个角色槽位始终占满，空间不随成员增减变化 */
grid-template-rows: repeat(4, 82px);
gap: 6px;
align-content: start;
}
.team-frame-wrap {
display: flex;
flex-direction: row;
align-items: center;
gap: 5px;
/* 固定高度，有/无成员(用户名)时占位一致 */
height: 82px;
}
/* 图片右侧的信息容器：角色名 + 用户名 */
.team-frame-info {
display: flex;
flex-direction: column;
gap: 3px;
flex: 1;
min-width: 0;
overflow: hidden;
}
.team-frame-name {
font-size: 10px;
font-weight: 500;
color: var(--text2);
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.team-frame-username {
font-size: 9px;
color: var(--text3);
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.team-frame {
position: relative;
width: 60px;
height: 80px;
border-radius: 4px;
border: 1px dashed var(--border);
background: var(--bg-dark);
overflow: hidden;
cursor: pointer;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
transition: border-color 0.2s;
}
.team-frame:hover {
border-color: var(--cyan);
border-style: solid;
}
.team-frame img {
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
}
.team-frame-plus {
font-size: 18px;
color: var(--text3);
font-weight: 300;
}
/* 空槽位占位符样式 —— 灰色底 + 虚线边框 + 居中大"+" */
.team-frame.team-frame-empty {
background: repeating-linear-gradient(
45deg,
rgba(255,255,255,0.02),
rgba(255,255,255,0.02) 4px,
rgba(255,255,255,0.05) 4px,
rgba(255,255,255,0.05) 8px
);
border: 1.5px dashed var(--border);
cursor: pointer;
}
.team-frame.team-frame-empty:hover {
border-color: var(--cyan);
border-style: dashed;
background: rgba(0, 204, 255, 0.08);
}
/* 固定槽位的角色名（空槽位也显示） */
.team-frame-wrap .team-frame-name {
color: var(--text3);
}
.team-frame-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
font-weight: 600;
}
.team-frame-label {
position: absolute;
bottom: 4px;
left: 0;
right: 0;
text-align: center;
font-size: 14px;
background: rgba(0,0,0,0.6);
padding: 2px 0;
line-height: 1;
}
.team-frame-locked {
cursor: default;
border-style: solid;
border-color: rgba(0,204,255,0.3);
}
.team-frame-locked:hover {
border-color: rgba(0,204,255,0.3);
}
.team-frame-lock {
position: absolute;
top: 4px;
right: 4px;
font-size: 10px;
opacity: 0.7;
}
/* 锁定制作团队后的禁用状�?*/
.ws-team-locked .team-frame {
cursor: default;
opacity: 0.6;
}
/* ── 抽卡剪辑团队（临时用户）样式 ────────────────────────── */
/* 右侧栈固定高度，确保 flex 子项能正确分配空间 */
.ws-right-stack {
min-height: 0;
}
/* 制作团队卡片：按内容自适应，不参与 flex 拉伸 */
.ws-right-stack > .ws-team-card:first-child {
flex: 0 0 auto;
}
/* 抽卡剪辑团队卡片：填满剩余高度，底边对齐影视类型 */
.ws-right-stack > .ws-team-card:last-child {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
.ws-temp-team-add {
display: flex;
flex-direction: column;
gap: 6px;
flex: 1;
min-height: 0;
}
.ws-temp-team-form {
display: flex;
gap: 4px;
flex-wrap: wrap;
}
.ws-temp-input {
flex: 1;
min-width: 60px;
padding: 3px 6px;
font-size: 10px;
border: 1px solid var(--border);
border-radius: 3px;
background: var(--bg-input);
color: var(--text);
outline: none;
}
.ws-temp-input:focus {
border-color: var(--cyan);
}
.ws-temp-btn-add {
padding: 3px 8px;
font-size: 10px;
background: var(--cyan);
color: #000;
border: none;
border-radius: 3px;
cursor: pointer;
font-weight: 600;
white-space: nowrap;
}
.ws-temp-btn-add:hover {
background: var(--cyan-hover, #0cc);
}
.ws-team-locked .ws-temp-btn-add {
opacity: 0.5;
cursor: not-allowed;
}
.ws-temp-team-list {
display: flex;
flex-direction: column;
gap: 3px;
/* 固定10个成员高度：10 × 28px + 9 × 3px gap = 307px */
flex: 0 0 307px;
height: 307px;
min-height: 307px;
max-height: 307px;
overflow-y: auto;
}
.ws-temp-empty {
font-size: 10px;
color: var(--text3);
text-align: center;
padding: 6px;
}
.ws-temp-member {
display: flex;
justify-content: space-between;
align-items: center;
height: 28px;
padding: 0 6px;
background: var(--bg-panel);
border-radius: 3px;
font-size: 10px;
}
.ws-temp-member-info {
display: flex;
flex-direction: column;
gap: 1px;
}
.ws-temp-member-name {
color: var(--text);
font-weight: 500;
}
.ws-temp-member-user {
color: var(--text3);
font-size: 9px;
}
.ws-temp-member-actions {
display: flex;
gap: 2px;
}
.ws-temp-btn {
padding: 2px 4px;
font-size: 10px;
background: transparent;
border: none;
cursor: pointer;
border-radius: 2px;
}
.ws-temp-btn:hover {
background: var(--bg-hover);
}
.ws-temp-btn-del:hover {
background: rgba(255, 80, 80, 0.2);
}
/* 成员选择弹窗 */
.team-picker-box {
background: var(--bg-panel);
border: 1px solid var(--cyan);
border-radius: 8px;
width: 360px;
max-height: 60vh;
display: flex;
flex-direction: column;
box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}
.team-picker-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px;
border-bottom: 1px solid var(--border);
color: var(--text);
font-size: 14px;
font-weight: 600;
}
.close-btn-sm {
width: 24px;
height: 24px;
border: none;
background: none;
color: var(--text3);
font-size: 16px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
}
.close-btn-sm:hover { color: var(--red); }
.team-picker-body {
flex: 1;
overflow-y: auto;
padding: 8px;
}
.team-picker-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
border-radius: 6px;
cursor: pointer;
transition: background 0.15s;
}
.team-picker-item:hover { background: rgba(0,204,255,0.08); }
.team-picker-photo {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 600;
}
.team-picker-info {
display: flex;
flex-direction: column;
gap: 2px;
}
.team-picker-name {
font-size: 13px;
color: var(--text);
font-weight: 500;
}
.team-picker-contact {
font-size: 11px;
color: var(--text3);
}
.ws-image-preview-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.9);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000002; /* 比 ws-player-overlay(1000001) 高 */
cursor: pointer;
user-select: none;
overflow: hidden; /* 放大后允许拖动查看超出部分 */
}
.ws-image-preview-overlay.hidden {
display: none;
}
.ws-image-preview-content {
position: relative;
max-width: 95vw;
max-height: 95vh;
cursor: default;
display: flex;
flex-direction: column;
gap: 8px;
}
.ws-image-preview-content img {
max-width: 95vw;
max-height: 85vh;
border-radius: 8px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.8);
object-fit: contain;
transition: transform 0.05s ease-out;
cursor: grab;
}
.ws-image-preview-content img.ws-preview-zoomed {
cursor: grab;
}
.ws-image-preview-content img.ws-preview-dragging {
cursor: grabbing;
}
.ws-image-preview-toolbar {
display: flex;
gap: 6px;
justify-content: center;
align-items: center;
padding: 6px 0;
}
.ws-preview-tool-btn {
width: 32px; height: 32px;
border-radius: 4px;
background: rgba(255,255,255,.12);
border: 1px solid rgba(255,255,255,.2);
color: #fff;
font-size: 14px;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background .15s;
}
.ws-preview-tool-btn:hover { background: rgba(255,255,255,.25); }
.ws-preview-tool-text {
font-size: 11px;
color: #aaa;
font-family: monospace;
min-width: 52px;
text-align: center;
}
/* 以下旧样式已废弃，保留以免影响其他引用 */
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
color: white;
font-size: 14px;
cursor: pointer;
transition: all 0.2s;
}
.ws-image-preview-container .ws-image-preview-close:hover {
background: rgba(255, 255, 255, 0.3);
}
.ws-character-scene-bubble {
position: fixed;
background: var(--bg-panel);
border: 1px solid var(--border);
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
min-width: 300px;
max-width: 700px;
max-height: 400px;
overflow: hidden;
z-index: 2000;
}
.ws-bubble-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 14px;
background: linear-gradient(135deg, var(--cyan), var(--purple));
color: white;
user-select: none;
}
.ws-bubble-drag-handle {
margin-right: 8px;
font-size: 12px;
opacity: 0.7;
}
.ws-bubble-title {
font-size: 14px;
font-weight: 600;
}
.ws-bubble-close {
width: 24px;
height: 24px;
border: none;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
color: white;
font-size: 12px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.ws-bubble-close:hover {
background: rgba(255, 255, 255, 0.3);
}
.ws-bubble-content {
padding: 8px;
overflow-y: auto;
max-height: 340px;
}
.ws-bubble-scenes-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
}
.ws-bubble-scene {
border: 1px solid var(--border);
border-radius: 4px;
overflow: hidden;
min-width: 120px;
}
.ws-bubble-scene-header {
display: flex;
align-items: center;
padding: 8px 10px;
background: rgba(0, 0, 0, 0.1);
cursor: pointer;
gap: 8px;
}
.ws-bubble-scene-header:hover {
background: rgba(0, 204, 255, 0.1);
}
.ws-bubble-scene-num {
font-size: 12px;
font-weight: 600;
color: var(--cyan);
min-width: 50px;
}
.ws-bubble-scene-title {
flex: 1;
font-size: 12px;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ws-bubble-scene-arrow {
font-size: 10px;
color: var(--text3);
transition: transform 0.2s;
}
.ws-bubble-scene-arrow.rotated {
transform: rotate(180deg);
}
.ws-bubble-scene-content {
display: block;
padding: 6px;
background: rgba(0, 0, 0, 0.05);
}
.ws-bubble-shot {
display: flex;
align-items: center;
padding: 6px 10px;
margin-bottom: 4px;
background: rgba(255, 255, 255, 0.05);
border-radius: 4px;
cursor: pointer;
gap: 8px;
}
.ws-bubble-shot:last-child {
margin-bottom: 0;
}
.ws-bubble-shot:hover {
background: rgba(0, 204, 255, 0.15);
}
.ws-bubble-shot-num {
font-size: 11px;
font-weight: 500;
color: var(--purple);
min-width: 50px;
}
.ws-bubble-shot-location {
font-size: 11px;
color: var(--text3);
}
.ws-bubble-shot-disabled {
opacity: 0.5;
background: rgba(255, 100, 100, 0.1) !important;
}
.ws-bubble-shot-disabled:hover {
background: rgba(255, 100, 100, 0.1) !important;
}
.ws-bubble-shot-used {
font-size: 10px;
color: #ff6b6b;
margin-left: auto;
padding: 2px 6px;
background: rgba(255, 107, 107, 0.2);
border-radius: 4px;
}
.ws-image-preview-content {
display: flex;
flex-direction: column;
background: var(--bg-panel);
border-radius: 8px;
overflow: hidden;
}
.ws-image-preview-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
border-bottom: 1px solid var(--border);
}
.ws-image-preview-title {
font-weight: bold;
color: var(--text);
font-size: 14px;
}
.ws-image-preview-close {
width: 28px;
height: 28px;
border: none;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
color: white;
font-size: 14px;
cursor: pointer;
transition: all 0.2s;
}
.ws-image-preview-close:hover {
background: rgba(255, 255, 255, 0.2);
}
.ws-image-preview-img {
max-width: 100%;
max-height: 80vh;
display: block;
}
/* 角色场景气泡 */
.ws-character-scenes-bubble {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1000001; /* 高于无限画布 modal(999999)：🔗分镜分布气泡须在画布之上（与试镜/预览同级修复） */
pointer-events: none;
opacity: 0;
transition: opacity 0.3s ease;
}
.ws-character-scenes-bubble.ws-bubble-visible {
opacity: 1;
pointer-events: auto;
}
.ws-bubble-mask {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
}
.ws-bubble-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90%;
max-width: 1400px;
max-height: 85vh;
background: var(--bg-panel);
border: 1px solid var(--border);
border-radius: 12px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
overflow: hidden;
display: flex;
flex-direction: column;
cursor: move;
}
.ws-bubble-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 20px;
background: linear-gradient(135deg, rgba(0, 204, 255, 0.1), rgba(128, 0, 255, 0.1));
border-bottom: 1px solid var(--border);
cursor: move;
}
.ws-bubble-title {
font-size: 16px;
font-weight: 600;
color: var(--text);
}
.ws-bubble-close {
width: 32px;
height: 32px;
border: none;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
color: white;
font-size: 14px;
cursor: pointer;
transition: all 0.2s;
}
.ws-bubble-close:hover {
background: rgba(255, 255, 255, 0.2);
}
.ws-bubble-actions {
display: flex;
gap: 8px;
margin-right: 10px;
}
.ws-bubble-action-btn {
padding: 4px 12px;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 4px;
background: rgba(255, 255, 255, 0.1);
color: white;
font-size: 12px;
cursor: pointer;
transition: all 0.2s;
}
.ws-bubble-action-btn:hover {
background: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.3);
}
.ws-bubble-body {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
min-height: 0; /* flex 子元素必须加这个，否则 overflow-y:auto 不生效 */
}
.ws-bubble-image-preview {
padding: 16px;
text-align: center;
border-bottom: 1px solid var(--border);
background: rgba(0, 0, 0, 0.1);
}
.ws-bubble-image-preview img {
max-height: 120px;
max-width: 100%;
border-radius: 8px;
object-fit: contain;
}
.ws-bubble-image-placeholder {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100px;
height: 100px;
border-radius: 50%;
background: linear-gradient(135deg, var(--cyan), var(--purple));
font-size: 32px;
color: white;
font-weight: 600;
}
.ws-bubble-scenes-grid {
flex: 1;
min-height: 0; /* flex 子元素必须加，否则 overflow-y:auto 不生效 */
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
padding: 16px;
overflow-y: auto;
overflow-x: hidden;
}
.ws-bubble-scene {
border: 1px solid var(--border);
border-radius: 8px;
overflow: hidden;
background: rgba(0, 0, 0, 0.1);
}
.ws-bubble-scene-header {
display: flex;
align-items: center;
padding: 10px 12px;
background: rgba(0, 0, 0, 0.2);
cursor: pointer;
gap: 8px;
transition: all 0.2s;
}
.ws-bubble-scene-header:hover {
background: rgba(0, 204, 255, 0.15);
}
.ws-bubble-scene-num {
font-size: 12px;
font-weight: 600;
color: var(--cyan);
min-width: 50px;
}
.ws-bubble-scene-title {
flex: 1;
font-size: 12px;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ws-bubble-scene-arrow {
font-size: 10px;
color: var(--text3);
transition: transform 0.2s;
}
.ws-bubble-scene-arrow.rotated {
transform: rotate(180deg);
}
.ws-bubble-scene-content {
display: block;
padding: 8px;
background: rgba(0, 0, 0, 0.05);
/* 移除 max-height: 200px，让场景面板自动展开显示所有分镜 */
/* 外层 .ws-bubble-scenes-grid 已有 overflow-y: auto 兜底 */
}
.ws-bubble-scene-content-hidden {
display: none;
}
.ws-bubble-shot {
display: flex;
align-items: center;
padding: 8px 10px;
margin-bottom: 6px;
background: rgba(255, 255, 255, 0.05);
border-radius: 4px;
cursor: pointer;
gap: 10px;
transition: all 0.2s;
}
.ws-bubble-shot:last-child {
margin-bottom: 0;
}
.ws-bubble-shot:hover {
background: rgba(0, 204, 255, 0.2);
transform: translateX(4px);
}
.ws-bubble-shot-num {
font-size: 11px;
font-weight: 600;
color: var(--purple);
min-width: 55px;
}
.ws-bubble-shot-location {
font-size: 11px;
color: var(--text3);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ws-bubble-empty {
text-align: center;
padding: 12px;
color: var(--text3);
font-size: 12px;
}
.ws-bubble-refresh {
width: 32px;
height: 32px;
border: none;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
color: white;
font-size: 14px;
cursor: pointer;
transition: all 0.2s;
}
.ws-bubble-refresh:hover {
background: rgba(255, 255, 255, 0.2);
}
.ws-bubble-analysis {
padding: 12px 16px;
margin: 8px;
background: rgba(0, 204, 255, 0.1);
border-radius: 8px;
font-size: 13px;
color: var(--text);
border-left: 3px solid var(--cyan);
}
.ws-bubble-resize-handle:hover {
background: rgba(0, 204, 255, 0.3);
}
.ws-bubble-shot-checkbox {
display: flex;
align-items: center;
justify-content: center;
margin-right: 8px;
cursor: pointer;
}
/* ══════�?自动生成进度提示 ══════�?*/
.ws-auto-gen-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 21, 51, 0.95);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 9999;
backdrop-filter: blur(5px);
}
.ws-auto-gen-content {
background: var(--bg-panel);
border: 2px solid var(--cyan);
border-radius: 16px;
padding: 40px;
width: 500px;
max-width: 90vw;
text-align: center;
box-shadow: 0 0 30px rgba(0, 204, 255, 0.3);
}
.ws-auto-gen-title {
font-size: 24px;
font-weight: bold;
color: var(--cyan);
margin-bottom: 20px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.ws-auto-gen-spinner {
width: 30px;
height: 30px;
border: 3px solid var(--border);
border-top-color: var(--cyan);
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.ws-auto-gen-progress-bar {
width: 100%;
height: 12px;
background: var(--bg-card);
border-radius: 6px;
overflow: hidden;
margin: 20px 0;
}
.ws-auto-gen-progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--cyan), var(--blue));
border-radius: 6px;
transition: width 0.3s ease;
}
.ws-auto-gen-progress-text {
font-size: 18px;
color: var(--gold);
font-weight: bold;
margin-bottom: 20px;
}
.ws-auto-gen-status {
font-size: 14px;
color: var(--text2);
margin-bottom: 10px;
min-height: 20px;
}
.ws-auto-gen-scene-info {
font-size: 13px;
color: var(--text3);
margin-bottom: 5px;
}
.ws-auto-gen-cancel-btn {
background: var(--red);
color: white;
border: none;
padding: 10px 30px;
border-radius: 8px;
font-size: 14px;
cursor: pointer;
margin-top: 20px;
}
.ws-auto-gen-cancel-btn:hover {
background: #ff4477;
}
.ws-bubble-shot-checkbox input[type="checkbox"] {
width: 16px;
height: 16px;
accent-color: var(--cyan);
cursor: pointer;
}
.ws-makeup-delete-btn {
position: absolute;
top: 5px;
right: 5px;
width: 24px;
height: 24px;
border: none;
border-radius: 50%;
background: rgba(255, 0, 0, 0.7);
color: white;
font-size: 12px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.2s;
}
.ws-makeup-image-item:hover .ws-makeup-delete-btn {
opacity: 1;
}
.ws-makeup-delete-btn:hover {
background: rgba(255, 0, 0, 0.9);
}
/* ── 服装分布卡片 ──────────────────────────────────── */
.ws-costume-cards {
flex: 1;
overflow-y: auto;
padding: 8px 4px;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 12px;
align-content: start;
}
.cc-actor {
grid-column: 1 / -1;
font-size: 14px;
font-weight: 600;
color: var(--text);
padding: 8px 12px;
margin-bottom: 4px;
background: linear-gradient(135deg, rgba(0,204,255,0.12), rgba(170,0,255,0.12));
border-radius: 8px;
border-left: 3px solid var(--cyan);
}
.costume-card {
width: 100%;
height: 320px;
display: flex;
flex-direction: column;
background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
border: 1px solid var(--border);
border-radius: 10px;
overflow: hidden;
transition: border-color 0.2s;
}
.costume-card:hover {
border-color: var(--cyan);
}
.cc-header {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
background: linear-gradient(135deg, var(--cyan), var(--purple));
color: white;
}
.cc-badge {
background: rgba(255,255,255,0.2);
padding: 2px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.5px;
}
.cc-number {
font-size: 14px;
font-weight: 700;
letter-spacing: 1px;
}
.cc-reason {
flex-shrink: 0;
padding: 8px 12px;
display: flex;
gap: 6px;
border-bottom: 1px solid var(--border);
background: rgba(0,0,0,0.08);
}
.cc-reason-label {
font-size: 10px;
font-weight: 600;
color: var(--cyan);
background: rgba(0,204,255,0.1);
padding: 2px 6px;
border-radius: 4px;
white-space: nowrap;
flex-shrink: 0;
align-self: flex-start;
margin-top: 1px;
}
.cc-reason-text {
font-size: 11px;
color: var(--text2);
line-height: 1.5;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.cc-list {
flex: 1;
overflow-y: auto;
padding: 8px 12px;
min-height: 0;
}
.cc-list-title {
font-size: 10px;
font-weight: 600;
color: var(--text3);
margin-bottom: 6px;
text-transform: uppercase;
letter-spacing: 0.5px;
position: sticky;
top: 0;
background: rgba(0,0,0,0.1);
padding: 3px 6px;
border-radius: 3px;
}
.cc-item {
font-size: 10px;
color: var(--text2);
padding: 3px 6px;
margin: 1px 0;
background: rgba(0,0,0,0.1);
border-radius: 4px;
line-height: 1.4;
word-break: break-all;
}
.cc-code {
font-family: 'Consolas', 'Courier New', monospace;
font-weight: 600;
color: var(--cyan);
}
.cc-desc {
color: var(--text2);
}
/* ════════════════════════════════════════════════════
3D虚拟制片指导助手样式（仅制片人可见）
════════════════════════════════════════════════════ */
/* 3D形象容器（独立可拖拽） */
.assistant-char-wrap {
position: fixed;
z-index: 10001;
pointer-events: auto;
display: flex;
flex-direction: column;
align-items: center;
contain: layout style;
/* 抓住/放下时的过渡动画（走动时不用，所以单独在拖拽类里加） */
transform-origin: 50% 85%; // 锚点靠下，摆动更像真人
filter: drop-shadow(0 6px 18px rgba(0, 200, 255, 0.18));
transition: filter 0.35s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* 被鼠标抓住状态：外圈发光（粉紫蓝光晕）+ 略微缩小 + 轻微旋转抖动（JS控制） */
.assistant-char-wrap.dragging {
filter:
drop-shadow(0 0 14px rgba(255, 45, 149, 0.75))
drop-shadow(0 0 28px rgba(180, 77, 255, 0.6))
drop-shadow(0 0 48px rgba(0, 200, 255, 0.5))
drop-shadow(0 8px 22px rgba(0, 0, 0, 0.55));
animation: assistant-grab-jitter 0.18s infinite alternate;
z-index: 10099 !important; // 拖拽时进一步置顶，保证在所有浮层之上
}
@keyframes assistant-grab-jitter {
0% { transform: scale(0.94) rotate(-1.8deg); }
25% { transform: scale(0.942) rotate(1.4deg); }
50% { transform: scale(0.945) rotate(-1.2deg); }
75% { transform: scale(0.943) rotate(1.6deg); }
100% { transform: scale(0.94) rotate(1.8deg); }
}
/* 释放时的弹跳复位（单独类，mouseup临时加一下再移除） */
.assistant-char-wrap.assistant-drop-bounce {
animation: assistant-drop-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes assistant-drop-pop {
0% { transform: scale(0.94) rotate(0deg); }
35% { transform: scale(1.08) rotate(0deg); }
60% { transform: scale(0.975) rotate(0deg); }
82% { transform: scale(1.025) rotate(0deg); }
100% { transform: scale(1.0) rotate(0deg); }
}
/* 鼠标悬停在虚拟人身上时（还没抓）：轻微放大 + 柔光，提示"可以抓" */
.assistant-char-wrap:hover .assistant-frame-canvas,
.assistant-char-wrap:hover #assistant3d {
filter: brightness(1.06) saturate(1.12);
}
.assistant-char-wrap:hover {
filter:
drop-shadow(0 0 10px rgba(0, 200, 255, 0.45))
drop-shadow(0 0 22px rgba(255, 45, 149, 0.35))
drop-shadow(0 6px 18px rgba(0, 0, 0, 0.45));
}
/* ── 靠边睡觉状态 ── */
/* 容器整体：半透明 + 轻微倾斜（靠墙感）+ 呼吸缩放 */
.assistant-char-wrap.sleeping {
opacity: 0.78;
animation: assistant-sleep-breathe 3.6s ease-in-out infinite;
filter: drop-shadow(0 4px 12px rgba(0, 80, 160, 0.25)) brightness(0.85);
}
@keyframes assistant-sleep-breathe {
0%, 100% { transform: scale(1.0) rotate(-1.5deg); }
50% { transform: scale(1.015) rotate(-1.5deg); }
}
/* ZZZ 气泡（伪元素，浮起渐隐循环） */
.assistant-char-wrap.sleeping::after {
content: '💤';
position: absolute;
top: 8px;
right: -6px;
font-size: 26px;
pointer-events: none;
z-index: 10;
animation: assistant-sleep-zzz 2.8s ease-in-out infinite;
filter: drop-shadow(0 0 6px rgba(120, 180, 255, 0.6));
}
@keyframes assistant-sleep-zzz {
0% { opacity: 0; transform: translateY(8px) scale(0.7); }
20% { opacity: 1; transform: translateY(0) scale(1); }
50% { opacity: 0.9; transform: translateY(-12px) scale(1.05); }
80% { opacity: 0.5; transform: translateY(-24px) scale(0.95); }
100% { opacity: 0; transform: translateY(-36px) scale(0.8); }
}
/* 对话框容器（独立可拖拽） */
.assistant-panel-wrap {
position: fixed;
z-index: 9999;
pointer-events: auto;
contain: layout style;
/* 仅对 opacity 过渡（用于焦点显隐），不影响 left/top（避免拖拽抖动） */
transition: opacity 0.25s ease;
}
/* 焦点不在虚拟人/面板时自动隐藏（不影响虚拟人发声） */
.assistant-panel-wrap.auto-hidden {
opacity: 0;
pointer-events: none;
}
/* MIC 音频峰值/频段可视化条：放在制片指导面板前（上方） */
.assistant-audio-meter {
display: block;
width: 100%;
height: 22px;
margin-bottom: 4px;
border-radius: 8px;
background: linear-gradient(180deg, rgba(10, 6, 24, 0.9), rgba(10, 6, 24, 0.55));
border: 1px solid rgba(0, 220, 255, 0.35);
box-shadow:
0 0 10px rgba(0, 200, 255, 0.18) inset,
0 0 8px rgba(0, 200, 255, 0.15);
}
.assistant-3d {
width: 220px;
height: 280px;
pointer-events: none;
position: relative;
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
.assistant-3d canvas {
width: 100% !important;
height: 100% !important;
background: transparent !important;
display: block;
}
/* 帧动画Canvas */
.assistant-frame-canvas {
width: 220px;
height: 320px;
background: transparent !important;
display: block;
image-rendering: auto;
}
.assistant-handle {
pointer-events: auto;
cursor: move;
width: 60px;
height: 16px;
background: var(--bg2, #1a1a2e);
border: 1px solid var(--border, #333);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: var(--text3, #888);
font-size: 10px;
letter-spacing: 2px;
margin: 2px 0;
user-select: none;
}
.assistant-handle:hover {
background: var(--cyan, #00d4ff);
color: #fff;
}
.assistant-panel {
pointer-events: auto;
width: 280px;
background: linear-gradient(135deg, rgba(255,30,120,0.18) 0%, rgba(90,40,220,0.18) 50%, rgba(0,180,255,0.18) 100%),
rgba(18, 14, 38, 0.94);
backdrop-filter: blur(16px);
border: 2px solid transparent;
border-image: linear-gradient(135deg, #ff2d95 0%, #b44dff 50%, #00c8ff 100%) 1;
border-radius: 14px;
overflow: visible;
box-shadow:
0 0 0 1px rgba(255, 80, 180, 0.35),
0 0 20px rgba(255, 45, 149, 0.35),
0 0 40px rgba(180, 77, 255, 0.25),
0 10px 36px rgba(0, 0, 0, 0.55);
display: flex;
flex-direction: column;
position: relative;
animation: assistant-panel-pulse 3.2s ease-in-out infinite;
}
@keyframes assistant-panel-pulse {
0%, 100% { box-shadow: 0 0 0 1px rgba(255,80,180,0.35), 0 0 20px rgba(255,45,149,0.32), 0 0 40px rgba(180,77,255,0.22), 0 10px 36px rgba(0,0,0,0.55); }
50% { box-shadow: 0 0 0 1px rgba(255,80,180,0.55), 0 0 28px rgba(255,45,149,0.55), 0 0 56px rgba(0,200,255,0.35), 0 10px 36px rgba(0,0,0,0.55); }
}
/* 顶部装饰彩条（艳丽感）*/
.assistant-panel::before {
content: "";
position: absolute;
left: 0; right: 0; top: 0;
height: 3px;
background: linear-gradient(90deg, #ff2d95 0%, #ffc83d 25%, #2dffb0 50%, #4d79ff 75%, #b44dff 100%);
background-size: 200% 100%;
animation: assistant-bar-flow 4s linear infinite;
}
@keyframes assistant-bar-flow {
0% { background-position: 0% 50%; }
100% { background-position: 200% 50%; }
}
.assistant-panel.collapsed .assistant-input-row {
display: none;
}
.assistant-panel.collapsed .assistant-header {
padding: 6px 12px;
gap: 4px;
}
.assistant-panel.collapsed .assistant-header-title-row {
padding: 2px 0;
}
.assistant-panel.collapsed .assistant-header-controls-row {
padding: 0;
}
/* ── 透明信息气泡层：覆盖在控件上方，完全透明，气泡冒出后自动消失 ── */
.assistant-bubbles {
position: absolute;
left: 0;
right: 0;
/* 定位在 panel 的顶部上方（panel 在 panelWrap 内部，宽度相同 320px） */
bottom: calc(100% - 0px);
padding: 0 6px 8px 6px;
display: flex;
flex-direction: column; /* 从上到下排列，新气泡插入到最底部（靠近面板） */
justify-content: flex-end; /* 气泡从底部开始堆叠（向上生长） */
gap: 6px;
pointer-events: none; /* 完全透明，不拦截任何点击 */
background: transparent !important;
z-index: 10;
max-height: 60vh;
overflow: visible;
}
.assistant-bubbles .bubble {
pointer-events: auto;
animation: assistant-bubble-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes assistant-bubble-pop {
0% { opacity: 0; transform: translateY(8px) scale(0.85); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
.assistant-bubbles .bubble.bubble-fading {
animation: assistant-bubble-fade 0.5s ease-out both;
}
@keyframes assistant-bubble-fade {
0% { opacity: 1; transform: translateY(0) scale(1); }
100% { opacity: 0; transform: translateY(-12px) scale(0.92); }
}
/* 绑定按钮激活态 */
.assistant-avatar-btn.active-bind {
background: linear-gradient(135deg, #00c8ff, #4d79ff);
color: #fff;
box-shadow: 0 0 8px rgba(0, 200, 255, 0.7);
border-radius: 4px;
}
/* 收缩状态下气泡层依然可见（位于抬头+输入行上方） */
.assistant-panel-wrap.panel-collapsed .assistant-bubbles {
display: flex;
}
/* hint 气泡基础样式（沿用 bubble 布局，颜色由内联样式控制） */
.assistant-bubbles .bubble-hint {
align-self: center;
max-width: 92%;
background: linear-gradient(135deg, rgba(255, 200, 61, 0.95) 0%, rgba(255, 170, 0, 0.95) 100%);
color: #1a1a2e;
font-weight: 600;
font-size: 12px;
border: 1px solid rgba(255, 170, 0, 0.8);
box-shadow: 0 0 10px rgba(255, 200, 61, 0.5);
border-radius: 8px;
padding: 6px 10px;
}
.assistant-header {
display: flex;
flex-direction: column;
gap: 4px;
padding: 6px 10px;
background: linear-gradient(90deg, rgba(255,45,149,0.22) 0%, rgba(180,77,255,0.18) 50%, rgba(0,200,255,0.18) 100%);
border-bottom: 1px solid rgba(255, 100, 200, 0.35);
}
.assistant-header-title-row {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
.assistant-header-controls-row {
display: flex;
align-items: center;
gap: 4px;
width: 100%;
flex-wrap: nowrap;
}
.assistant-drag-grip {
color: #ff6fd0;
text-shadow: 0 0 6px rgba(255, 110, 210, 0.8);
font-weight: bold;
margin-right: 4px;
}
.assistant-title {
font-size: 12px;
font-weight: 700;
color: #fff;
background: linear-gradient(90deg, #ff6fd0 0%, #c38bff 50%, #6fdfff 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: 0.5px;
text-align: center;
}
.assistant-status {
font-size: 11px;
color: #ffc9ec;
text-shadow: 0 0 4px rgba(255, 110, 210, 0.7);
font-weight: 600;
}
.assistant-toggle {
background: linear-gradient(135deg, #ff2d95, #b44dff);
color: #fff;
border: none;
cursor: pointer;
font-size: 16px;
padding: 2px 8px;
line-height: 1;
border-radius: 6px;
box-shadow: 0 0 8px rgba(255, 45, 149, 0.55);
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.assistant-toggle:hover {
transform: translateY(-1px) scale(1.06);
box-shadow: 0 0 14px rgba(0, 200, 255, 0.7);
}
.assistant-messages {
max-height: 220px;
overflow-y: auto;
padding: 8px 10px;
display: flex;
flex-direction: column;
gap: 6px;
background: linear-gradient(180deg, rgba(255, 45, 149, 0.04) 0%, rgba(0, 200, 255, 0.05) 100%);
}
/* 滚动条艳丽化 */
.assistant-messages::-webkit-scrollbar {
width: 6px;
}
.assistant-messages::-webkit-scrollbar-track {
background: rgba(255, 45, 149, 0.08);
border-radius: 3px;
}
.assistant-messages::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #ff2d95, #b44dff);
border-radius: 3px;
box-shadow: 0 0 6px rgba(255, 45, 149, 0.6);
}
.bubble {
max-width: 85%;
padding: 6px 10px;
border-radius: 10px;
font-size: 12px;
line-height: 1.5;
word-break: break-word;
white-space: pre-wrap;
}
.bubble-user {
align-self: flex-end;
background: linear-gradient(135deg, #00c8ff 0%, #4d79ff 100%);
color: #fff;
font-weight: 600;
box-shadow: 0 0 12px rgba(0, 200, 255, 0.45);
border-bottom-right-radius: 4px;
}
.bubble-assistant {
align-self: flex-start;
background: linear-gradient(135deg, rgba(255, 45, 149, 0.28) 0%, rgba(180, 77, 255, 0.28) 100%);
color: #fff;
border: 1px solid rgba(255, 120, 200, 0.55);
box-shadow: 0 0 10px rgba(255, 45, 149, 0.3);
border-bottom-left-radius: 4px;
}
.assistant-input-row {
display: flex;
gap: 6px;
padding: 6px 10px;
border-top: 1px solid rgba(255, 100, 200, 0.35);
background: linear-gradient(90deg, rgba(255, 45, 149, 0.1) 0%, rgba(0, 200, 255, 0.08) 100%);
}
.assistant-input-row input {
flex: 1;
background: rgba(10, 6, 24, 0.6);
border: 1px solid rgba(255, 120, 200, 0.4);
border-radius: 6px;
padding: 5px 8px;
color: #fff;
font-size: 12px;
outline: none;
transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.assistant-input-row input:focus {
border-color: #ff6fd0;
box-shadow: 0 0 0 2px rgba(255, 110, 210, 0.25), 0 0 10px rgba(255, 45, 149, 0.55);
}
.assistant-send {
background: linear-gradient(135deg, #ff2d95 0%, #b44dff 50%, #00c8ff 100%);
background-size: 180% 180%;
color: #fff;
border: none;
border-radius: 6px;
padding: 6px 14px;
font-size: 13px;
cursor: pointer;
font-weight: 700;
letter-spacing: 0.5px;
box-shadow: 0 0 10px rgba(255, 45, 149, 0.55);
transition: transform 0.18s ease, box-shadow 0.18s ease, background-position 0.6s ease;
animation: assistant-btn-shine 3.6s linear infinite;
}
@keyframes assistant-btn-shine {
0% { background-position: 0% 50%; }
100% { background-position: 180% 50%; }
}
.assistant-send:hover {
transform: translateY(-1px) scale(1.04);
box-shadow: 0 0 18px rgba(0, 200, 255, 0.75);
}
.assistant-mic {
background: rgba(10, 6, 24, 0.6);
border: 1px solid rgba(180, 77, 255, 0.55);
border-radius: 6px;
padding: 6px 8px;
cursor: pointer;
font-size: 14px;
color: #e8c8ff;
transition: border-color 0.2s, box-shadow 0.2s, transform 0.18s;
}
.assistant-mic:hover {
border-color: #b44dff;
box-shadow: 0 0 10px rgba(180, 77, 255, 0.7);
transform: translateY(-1px);
}
.assistant-mic.active {
background: #ff4444;
border-color: #ff4444;
animation: assistantMicPulse 1s infinite;
}
@keyframes assistantMicPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(255,68,68,0.6); }
50% { box-shadow: 0 0 0 6px rgba(255,68,68,0); }
}
.assistant-messages::-webkit-scrollbar {
width: 5px;
}
.assistant-messages::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.15);
border-radius: 3px;
}
/* 主题适配 */
.theme-professional .assistant-panel {
background: rgba(10, 12, 25, 0.92);
border-color: rgba(255, 215, 0, 0.2);
}
.theme-professional .assistant-title {
color: var(--gold, #ffd700);
}
.theme-romance .assistant-panel {
background: rgba(40, 20, 50, 0.92);
border-color: rgba(255, 150, 200, 0.3);
}
.theme-romance .assistant-title {
color: #ff96c8;
}
/* 3D 容器增强（移除浮动动画，避免持续抖动） */
.assistant-3d {
filter: drop-shadow(0 4px 12px rgba(0, 212, 255, 0.3));
transition: filter 0.3s ease;
cursor: grab;
}
.assistant-3d:active {
cursor: grabbing;
animation-play-state: paused;
}
.assistant-3d:hover {
filter: drop-shadow(0 6px 20px rgba(0, 212, 255, 0.5));
}
/* 走动按钮激活态 */
.assistant-avatar-btn.active-walk {
background: rgba(0, 212, 255, 0.25) !important;
color: #00d4ff !important;
box-shadow: 0 0 8px rgba(0, 212, 255, 0.4);
}
@keyframes assistantFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
/* 状态指示器动画 */
.assistant-status {
display: inline-flex;
align-items: center;
gap: 4px;
/* 隐藏"待命中…/说话中…"等状态文字，只保留 ::before 的状态指示灯 */
font-size: 0;
color: transparent;
}
.assistant-status::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--text3, #888);
}
.assistant-status[data-status="thinking"]::before {
background: #ffaa00;
animation: assistantThinking 1s infinite;
}
.assistant-status[data-status="speaking"]::before {
background: #39FF14;
animation: assistantSpeaking 0.6s infinite;
}
.assistant-status[data-status="listening"]::before {
background: #5B8AFF;
animation: assistantListening 1s infinite;
}
@keyframes assistantThinking {
0%, 100% { opacity: 0.3; transform: scale(0.8); }
50% { opacity: 1; transform: scale(1.2); }
}
@keyframes assistantSpeaking {
0%, 100% { opacity: 0.5; }
50% { opacity: 1; }
}
@keyframes assistantListening {
0%, 100% { box-shadow: 0 0 0 0 rgba(91, 138, 255, 0.5); }
50% { box-shadow: 0 0 0 4px rgba(91, 138, 255, 0); }
}
/* 对话面板进入动画 */
.assistant-panel {
animation: assistantPanelIn 0.3s ease-out;
}
@keyframes assistantPanelIn {
from { opacity: 0; transform: translateY(10px) scale(0.95); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* 气泡动画 */
.bubble {
animation: bubbleIn 0.25s ease-out;
}
@keyframes bubbleIn {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
/* 助手说话时的特效边框 */
.assistant-wrap.speaking .assistant-3d {
filter: drop-shadow(0 4px 16px rgba(57, 255, 20, 0.5));
}
.assistant-wrap.thinking .assistant-3d {
filter: drop-shadow(0 4px 16px rgba(255, 170, 0, 0.4));
}
/* 对话面板更紧密 */
.assistant-panel.collapsed {
max-height: 70px;
overflow: hidden;
transition: max-height 0.3s ease;
}
.assistant-panel:not(.collapsed) {
max-height: none;
overflow: visible;
transition: max-height 0.3s ease;
}
/* 打字指示器 */
.bubble-assistant.typing::after {
content: '▋';
display: inline-block;
margin-left: 2px;
animation: assistantTyping 0.8s steps(2) infinite;
color: var(--cyan, #00d4ff);
}
@keyframes assistantTyping {
0% { opacity: 1; }
100% { opacity: 0; }
}
/* 形象按钮 */
.assistant-avatar-btn {
background: none;
border: 1px solid var(--border, #333);
border-radius: 6px;
color: var(--text2, #aaa);
cursor: pointer;
padding: 2px 6px;
transition: all 0.2s ease;
}
.assistant-avatar-btn:hover {
background: rgba(0, 212, 255, 0.15);
border-color: var(--cyan, #00d4ff);
color: var(--cyan, #00d4ff);
}
/* 形象上传弹窗 */
.assistant-avatar-modal {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(6px);
display: flex;
align-items: center;
justify-content: center;
z-index: 10000;
pointer-events: auto;
}
.assistant-avatar-modal-content {
background: var(--bg2, #1a1a2e);
border: 1px solid var(--border, #333);
border-radius: 16px;
width: 480px;
max-width: 92vw;
max-height: 90vh;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
animation: assistantModalIn 0.25s ease-out;
}
@keyframes assistantModalIn {
from { opacity: 0; transform: scale(0.95) translateY(10px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
.assistant-avatar-modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 20px;
border-bottom: 1px solid var(--border, #333);
font-size: 16px;
font-weight: 600;
color: var(--cyan, #00d4ff);
}
.assistant-avatar-close {
background: none;
border: none;
color: var(--text3, #888);
cursor: pointer;
font-size: 18px;
padding: 4px 8px;
border-radius: 6px;
}
.assistant-avatar-close:hover {
background: rgba(255, 255, 255, 0.1);
color: var(--text1, #eee);
}
.assistant-avatar-modal-body {
padding: 20px;
overflow-y: auto;
max-height: calc(90vh - 130px);
}
.assistant-avatar-hint {
font-size: 13px;
color: var(--text3, #888);
margin: 0 0 16px;
line-height: 1.6;
padding: 10px 14px;
background: rgba(0, 212, 255, 0.06);
border-left: 3px solid var(--cyan, #00d4ff);
border-radius: 6px;
}
.assistant-avatar-uploads {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 20px;
}
.assistant-avatar-upload-item {
border: 1px dashed var(--border, #444);
border-radius: 10px;
padding: 12px;
display: flex;
flex-direction: column;
gap: 8px;
transition: all 0.2s ease;
min-height: 160px;
}
.assistant-avatar-upload-item:hover {
border-color: var(--cyan, #00d4ff);
background: rgba(0, 212, 255, 0.04);
}
.assistant-avatar-upload-label {
font-size: 12px;
color: var(--text2, #bbb);
font-weight: 500;
}
.assistant-avatar-upload-preview {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.3);
border-radius: 8px;
min-height: 100px;
overflow: hidden;
position: relative;
}
.assistant-avatar-upload-preview img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.assistant-avatar-upload-btn {
background: rgba(255, 255, 255, 0.08);
border: 1px solid var(--border, #444);
border-radius: 6px;
color: var(--text2, #bbb);
cursor: pointer;
padding: 8px 14px;
font-size: 13px;
transition: all 0.2s ease;
}
.assistant-avatar-upload-btn:hover {
background: var(--cyan, #00d4ff);
color: #000;
border-color: var(--cyan, #00d4ff);
}
.assistant-avatar-actions {
display: flex;
gap: 10px;
margin-bottom: 10px;
}
.assistant-avatar-primary {
flex: 1;
background: var(--cyan, #00d4ff);
color: #000;
border: none;
border-radius: 8px;
padding: 12px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
.assistant-avatar-primary:hover {
opacity: 0.9;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 212, 255, 0.4);
}
.assistant-avatar-secondary {
background: rgba(255, 255, 255, 0.08);
border: 1px solid var(--border, #444);
border-radius: 8px;
color: var(--text2, #bbb);
cursor: pointer;
padding: 12px 20px;
font-size: 14px;
transition: all 0.2s ease;
}
.assistant-avatar-secondary:hover {
background: rgba(255, 100, 100, 0.15);
color: #ff6464;
border-color: #ff6464;
}
.assistant-avatar-status {
font-size: 13px;
text-align: center;
padding: 8px;
border-radius: 6px;
background: rgba(0, 0, 0, 0.2);
}
/* Tab切换 */
.assistant-tabs {
display: flex;
gap: 4px;
margin-bottom: 16px;
border-bottom: 1px solid var(--border, #333);
padding-bottom: 0;
}
.assistant-tab {
padding: 8px 16px;
cursor: pointer;
font-size: 13px;
color: var(--text3, #888);
border-radius: 8px 8px 0 0;
transition: all 0.2s ease;
border: 1px solid transparent;
}
.assistant-tab:hover {
color: var(--text1, #eee);
background: rgba(255, 255, 255, 0.05);
}
.assistant-tab.active {
color: var(--cyan, #00d4ff);
background: rgba(0, 212, 255, 0.1);
border-color: var(--border, #333);
border-bottom-color: transparent;
}
/* 动作帧列表 */
.assistant-frames-list {
display: flex;
flex-direction: column;
gap: 16px;
}
.assistant-frame-item {
border: 1px solid var(--border, #333);
border-radius: 10px;
padding: 12px;
background: rgba(0, 0, 0, 0.2);
}
.assistant-frame-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
gap: 8px;
}
.assistant-frame-label {
font-size: 13px;
font-weight: 600;
color: var(--text1, #eee);
}
.assistant-frame-count {
font-size: 12px;
color: var(--text3, #888);
background: rgba(255, 255, 255, 0.05);
padding: 2px 8px;
border-radius: 10px;
margin-left: auto;
}
.assistant-frame-clear {
font-size: 11px;
color: var(--text3, #888);
background: rgba(255, 80, 80, 0.08);
border: 1px solid rgba(255, 80, 80, 0.3);
border-radius: 6px;
padding: 2px 8px;
cursor: pointer;
transition: all 0.2s;
}
.assistant-frame-clear:hover {
color: #f88;
background: rgba(255, 80, 80, 0.2);
border-color: #f88;
}
.assistant-frame-thumbnails {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-bottom: 6px;
}
.frame-thumb {
width: 56px;
height: 56px;
border: 1px solid var(--border, #444);
border-radius: 6px;
background: rgba(0, 0, 0, 0.3);
background-size: cover;
background-position: center;
position: relative;
}
.frame-thumb-del {
position: absolute;
top: -6px;
right: -6px;
width: 18px;
height: 18px;
border-radius: 50%;
background: rgba(255, 60, 60, 0.95);
color: #fff;
border: none;
font-size: 11px;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.2s;
z-index: 2;
padding: 0;
}
.frame-thumb:hover .frame-thumb-del {
opacity: 1;
}
.frame-thumb-del:hover {
background: #f33;
transform: scale(1.15);
}
.assistant-frame-add {
width: 56px;
height: 56px;
border: 1px dashed var(--border, #555);
border-radius: 6px;
background: rgba(255, 255, 255, 0.03);
color: var(--text3, #888);
cursor: pointer;
font-size: 20px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.assistant-frame-add:hover {
border-color: var(--cyan, #00d4ff);
color: var(--cyan, #00d4ff);
background: rgba(0, 212, 255, 0.1);
}
.assistant-frame-desc {
font-size: 11px;
color: var(--text3, #666);
}
/* 对话框header作为拖拽手柄 */
.assistant-header {
cursor: grab;
user-select: none;
}
.assistant-header:active {
cursor: grabbing;
}
.assistant-panel-wrap.dragging .assistant-header {
cursor: grabbing;
}
.assistant-panel-wrap.pinned .assistant-header {
cursor: not-allowed;
}
.assistant-drag-grip {
font-size: 14px;
color: var(--text3, #666);
cursor: grab;
line-height: 1;
opacity: 0.6;
transition: opacity 0.2s;
}
.assistant-header:hover .assistant-drag-grip {
opacity: 1;
color: var(--cyan, #00d4ff);
}
/* 锁定按钮激活态 */
.assistant-avatar-btn.active-pin {
background: rgba(0, 221, 136, 0.25);
border: 1px solid #0d8;
border-radius: 6px;
}
.assistant-panel-wrap.pinned {
box-shadow: 0 0 0 2px rgba(0, 221, 136, 0.4), 0 8px 32px rgba(0,0,0,0.4);
border-radius: 12px;
}
/* ============================================================
* 无限画布 Canvas Tool CSS
* ============================================================ */
.ws-canvas-toolbar {
position: absolute;
top: 0; left: 0; right: 0;
height: 52px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 18px;
background: var(--bg-panel, #141c33);
border-bottom: 1px solid var(--border, #223355);
box-shadow: 0 2px 10px rgba(0,0,0,0.5);
z-index: 50;
}
.ws-canvas-title {
display: flex;
align-items: center;
gap: 12px;
font-size: 16px;
font-weight: 700;
color: var(--text, #e6efff);
letter-spacing: 1px;
}
.ws-canvas-title-text {
background: linear-gradient(90deg, #5bc8ff, #a06bff);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.ws-canvas-tool-actions {
display: flex;
align-items: center;
gap: 8px;
}
.ws-canvas-btn {
background: var(--bg, #0e1528);
color: var(--text, #e6efff);
border: 1px solid var(--cyan, #0af);
border-radius: 6px;
padding: 6px 14px;
font-size: 13px;
cursor: pointer;
transition: all .18s ease;
font-family: inherit;
}
.ws-canvas-btn:hover {
background: var(--cyan, #0af);
color: #001;
box-shadow: 0 0 10px var(--cyan, #0af);
}
.ws-canvas-btn-primary {
background: linear-gradient(135deg, #0cf, #a06bff);
border: none;
color: #001a2e;
font-weight: 600;
}
.ws-canvas-btn-primary:hover {
filter: brightness(1.1);
box-shadow: 0 0 14px rgba(91,200,255,0.6);
}
.ws-canvas-btn-danger {
border-color: #ff6b9d;
color: #ff6b9d;
}
.ws-canvas-btn-danger:hover {
background: #ff6b9d;
color: #fff;
box-shadow: 0 0 10px #ff6b9d;
}
.ws-canvas-btn-detect {
border-color: #ffd166;
color: #ffd166;
}
.ws-canvas-btn-detect:hover {
background: #ffd166;
color: #3a2a00;
box-shadow: 0 0 10px #ffd166;
}
.ws-canvas-scale-text {
font-size: 13px;
color: var(--cyan, #0cf);
font-family: monospace;
min-width: 56px;
text-align: right;
padding: 4px 8px;
background: rgba(0,204,255,0.08);
border: 1px solid rgba(0,204,255,0.25);
border-radius: 4px;
margin-left: 4px;
}
/* 资产列表面板 */
.ws-canvas-asset-panel {
position: absolute;
top: 52px;
left: 0;
width: 340px;
bottom: 0;
background: var(--bg-panel, #141c33);
border-right: 1px solid var(--border, #223355);
display: flex;
flex-direction: column;
z-index: 40;
box-shadow: 4px 0 24px rgba(0,0,0,0.4);
}
.ws-canvas-asset-header {
padding: 10px 14px;
font-size: 14px;
border-bottom: 1px solid var(--border, #223355);
background: rgba(0,204,255,0.05);
color: var(--text, #e6efff);
display: flex;
align-items: center;
justify-content: space-between;
}
.ws-canvas-asset-list {
flex: 1 1 auto;
overflow-y: auto;
overflow-x: hidden;
min-height: 0;
padding: 6px 4px 24px;
}
.ws-canvas-asset-cat-header {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
margin: 4px 2px;
cursor: pointer;
user-select: none;
border-radius: 6px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.06);
transition: background .15s ease;
}
.ws-canvas-asset-cat-header:hover {
background: rgba(91,200,255,0.08);
}
.ws-canvas-asset-cat-arrow {
font-size: 11px;
width: 14px;
text-align: center;
flex-shrink: 0;
}
.ws-canvas-asset-cat-dot {
width: 10px; height: 10px;
border-radius: 50%;
flex-shrink: 0;
box-shadow: 0 0 6px currentColor;
}
.ws-canvas-asset-cat-name {
flex: 1;
font-size: 13px;
font-weight: 600;
color: var(--text, #e6efff);
}
.ws-canvas-asset-cat-count {
font-size: 11px;
color: #99a;
font-family: monospace;
background: rgba(255,255,255,0.05);
padding: 1px 7px;
border-radius: 10px;
}
.ws-canvas-asset-cat-group {
display: flex;
flex-direction: column;
gap: 2px;
margin-bottom: 4px;
}
.ws-canvas-asset-item {
display: flex;
align-items: center;
gap: 10px;
padding: 5px 10px;
margin: 0 4px;
border-radius: 5px;
cursor: pointer;
border: 1px solid transparent;
transition: all .15s ease;
}
.ws-canvas-asset-item:hover {
background: rgba(91,200,255,0.1);
border-color: rgba(91,200,255,0.3);
transform: translateX(2px);
}
.ws-canvas-asset-item-thumb {
width: 40px;
height: 40px;
flex-shrink: 0;
border-radius: 4px;
border: 1px solid #5bc8ff;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: #0e1528;
}
.ws-canvas-asset-item-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.ws-canvas-asset-item-thumb span {
font-size: 10px;
font-weight: 600;
}
.ws-canvas-asset-item-info {
flex: 1;
min-width: 0;
}
.ws-canvas-asset-item-detail {
font-size: 12px;
color: #b8c4d9;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: 500;
}
/* 舞台和主画布 */
.ws-canvas-overlay {
position: absolute;
top: 52px;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
user-select: none;
/* 允许画布滚动查看全部内容，但节点通过translate移动显示 */
}
.ws-canvas-stage {
width: 100%;
height: 100%;
position: relative;
overflow: visible; /* 关键：不裁剪，节点可自由超出视口 */
background:
radial-gradient(circle at 20% 30%, rgba(91,200,255,0.04), transparent 40%),
radial-gradient(circle at 80% 70%, rgba(160,107,255,0.05), transparent 40%),
linear-gradient(180deg, #0a0f1f, #0d1428);
}
.ws-canvas-stage::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(91,200,255,0.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(91,200,255,0.06) 1px, transparent 1px);
background-size: 40px 40px;
pointer-events: none;
}
.ws-canvas-world {
position: absolute;
top: 0;
left: 0;
transform-origin: 0 0;
will-change: transform;
}
.ws-canvas-links {
position: absolute;
top: 0; left: 0;
pointer-events: none;
overflow: visible;
z-index: 1;
}
.ws-canvas-nodes {
position: absolute;
top: 0; left: 0;
z-index: 2;
}
.ws-canvas-node {
position: absolute;
background: var(--bg-panel, #141c33);
border: 2px solid #5bc8ff;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 14px rgba(0,0,0,0.5);
display: flex;
flex-direction: column;
z-index: 2;
transition: box-shadow .15s ease;
}
.ws-canvas-node:hover {
box-shadow: 0 8px 24px rgba(0,0,0,0.7), 0 0 0 2px rgba(91,200,255,0.4);
z-index: 50 !important;
}
.ws-canvas-node-img-wrap {
width: 100%;
flex: 1 1 auto;
min-height: 0;
background: #0a0f1f;
position: relative;
overflow: hidden;
}
.ws-canvas-node-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.ws-canvas-node-img-placeholder {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
}
.ws-canvas-node-code {
position: absolute;
top: 4px;
left: 4px;
font-size: 10px;
font-family: monospace;
padding: 1px 6px;
border-radius: 3px;
background: rgba(91,200,255,0.2);
color: #5bc8ff;
border: 1px solid rgba(91,200,255,0.6);
font-weight: 700;
z-index: 2;
letter-spacing: 0.5px;
white-space: nowrap;
}
.ws-canvas-node-cat {
position: absolute;
top: 4px;
right: 4px;
font-size: 10px;
padding: 1px 6px;
border-radius: 3px;
background: rgba(0,0,0,0.6);
backdrop-filter: blur(2px);
font-weight: 600;
z-index: 2;
}
.ws-canvas-node-name {
flex: 0 0 auto;
padding: 3px 6px;
font-size: 11px;
color: var(--text, #e6efff);
background: rgba(0,0,0,0.55);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border-top: 1px solid rgba(255,255,255,0.08);
text-align: center;
}
/* 无限画布：“✎ 改图”按钮（默认隐藏，卡片/分镜块 hover 时显示；禁用态灰不可点）*/
.ws-canvas-edit-btn {
opacity: 0;
visibility: hidden;
background: linear-gradient(135deg, #0b8cb8, #2a6aff);
color: #fff;
border: 1px solid #5ac9ff;
padding: 3px 8px;
border-radius: 5px;
cursor: pointer;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.3px;
box-shadow: 0 2px 10px rgba(10,130,255,0.4);
transition: opacity .15s ease, visibility .15s ease, transform .15s ease, background .15s ease;
font-family: inherit;
}
.ws-canvas-edit-btn:hover:not(.ws-btn-disabled) {
background: linear-gradient(135deg, #0ea9d8, #3b82f6);
transform: scale(1.06);
}
.ws-canvas-edit-btn.ws-btn-disabled {
opacity: 0.35;
background: #333;
color: #888;
border-color: #555;
cursor: not-allowed;
box-shadow: none;
}
/* 普通卡片：鼠标悬停节点时，图片容器中的改图按钮淡入显示 */
.ws-canvas-node:hover .ws-canvas-edit-btn,
.ws-canvas-node:focus-within .ws-canvas-edit-btn {
opacity: 1;
visibility: visible;
}
/* 无限画布：“🔒 隔离 / 🌐 全局”按钮（默认隐藏，节点 hover 时显示；激活态常驻高亮）*/
.ws-canvas-isolate-btn {
opacity: 0;
visibility: hidden;
background: linear-gradient(135deg, #6a3a8a, #9d4edd);
color: #fff;
border: 1px solid #c77dff;
padding: 3px 8px;
border-radius: 5px;
cursor: pointer;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.3px;
box-shadow: 0 2px 10px rgba(157,78,221,0.4);
transition: opacity .15s ease, visibility .15s ease, transform .15s ease, background .15s ease;
font-family: inherit;
}
.ws-canvas-isolate-btn:hover {
background: linear-gradient(135deg, #7d4ba3, #b066ff);
transform: scale(1.06);
}
/* 隔离激活态：常驻显示 + 高亮（紫色发光边框），即使鼠标不在节点上也能看到 */
.ws-canvas-isolate-btn.ws-isolate-active {
opacity: 1;
visibility: visible;
background: linear-gradient(135deg, #d4145a, #ff4d6d);
border-color: #ffd1dc;
box-shadow: 0 0 14px rgba(255,77,109,0.7);
}
/* 节点 hover 时隔离按钮淡入显示 */
.ws-canvas-node:hover .ws-canvas-isolate-btn,
.ws-canvas-node:focus-within .ws-canvas-isolate-btn {
opacity: 1;
visibility: visible;
}
/* 无限画布：“✂ 分离 / 🔄 恢复”按钮（默认隐藏，节点 hover 时显示；激活态常驻高亮）
* 与隔离按钮并排放在节点左上角（left:72px），分离=只显示本节点自己一个 */
.ws-canvas-detach-btn {
opacity: 0;
visibility: hidden;
background: linear-gradient(135deg, #8a5a3a, #d97706);
color: #fff;
border: 1px solid #fbbf24;
padding: 3px 8px;
border-radius: 5px;
cursor: pointer;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.3px;
box-shadow: 0 2px 10px rgba(217,119,6,0.4);
transition: opacity .15s ease, visibility .15s ease, transform .15s ease, background .15s ease;
font-family: inherit;
}
.ws-canvas-detach-btn:hover {
background: linear-gradient(135deg, #a06a3a, #f59e0b);
transform: scale(1.06);
}
/* 分离激活态：常驻显示 + 高亮（金色发光边框） */
.ws-canvas-detach-btn.ws-detach-active {
opacity: 1;
visibility: visible;
background: linear-gradient(135deg, #d97706, #fbbf24);
border-color: #fff3cd;
box-shadow: 0 0 14px rgba(251,191,36,0.8);
}
/* 分镜块上的分离按钮：常驻显示（与隔离按钮一致） */
.ws-canvas-node-shot_strip_block .ws-canvas-detach-btn {
opacity: 1;
visibility: visible;
}
/* ================ 分镜节点【场地】【道具】【画面】三区域样式 ================ */
.ws-canvas-node-shot_strip_block {
color: #f5f7ff;
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
}
.ws-strip-script-section {
background: rgba(0,0,0,0.35);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 6px;
padding: 4px 6px;
}
.ws-strip-script-title {
font-size: 11px;
font-weight: bold;
line-height: 1.3;
padding: 1px 0 2px;
margin-bottom: 2px;
border-bottom: 1px dashed rgba(255,255,255,0.15);
color: #fff;
}
.ws-strip-script-title-loc { color: #9ce5ff; border-color: rgba(156, 229, 255, 0.3); }
.ws-strip-script-title-prop { color: #ffd39c; border-color: rgba(255, 211, 156, 0.3); }
.ws-strip-script-title-pic { color: #c6ffb0; border-color: rgba(198, 255, 176, 0.3); }
.ws-strip-script-body {
font-size: 10.5px;
line-height: 1.45;
color: #e8ecff;
word-break: break-word;
white-space: normal;
max-height: 48px;
overflow: hidden;
}
.ws-strip-script-body-pic {
flex: 1 1 auto;
max-height: none;
overflow-y: auto;
padding-right: 2px;
}
.ws-strip-script-body-pic::-webkit-scrollbar { width: 4px; }
.ws-strip-script-body-pic::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 2px; }
/* 节点 hover 时分离按钮淡入显示 */
.ws-canvas-node:hover .ws-canvas-detach-btn,
.ws-canvas-node:focus-within .ws-canvas-detach-btn {
opacity: 1;
visibility: visible;
}
/* 小地图 */
.ws-canvas-minimap {
position: absolute;
right: 14px;
bottom: 14px;
width: 260px;
background: rgba(14,21,40,0.9);
border: 1px solid var(--border, #223355);
border-radius: 8px;
padding: 6px;
z-index: 45;
backdrop-filter: blur(4px);
box-shadow: 0 6px 18px rgba(0,0,0,0.5);
}
.ws-canvas-minimap-title {
font-size: 11px;
color: #9ab;
margin-bottom: 4px;
padding: 0 2px;
letter-spacing: 1px;
}
.ws-canvas-minimap-svg {
display: block;
width: 100%;
height: 160px;
background: #0a0f1f;
border-radius: 4px;
cursor: crosshair;
border: 1px solid #1a2236;
}
.ws-canvas-minimap-vp {
position: absolute;
border: 2px solid #0cf;
background: rgba(0,204,255,0.1);
pointer-events: none;
border-radius: 2px;
left: 6px;
top: 22px;
transition: left .05s linear, top .05s linear, width .05s linear, height .05s linear;
box-shadow: 0 0 8px rgba(0,204,255,0.6);
}
/* 操作提示 */
.ws-canvas-tips {
position: absolute;
left: 50%;
bottom: 20px;
transform: translateX(-50%);
padding: 8px 18px;
background: rgba(0,0,0,0.55);
border: 1px solid rgba(91,200,255,0.3);
border-radius: 20px;
font-size: 12px;
color: #b0c4de;
backdrop-filter: blur(3px);
pointer-events: none;
letter-spacing: 0.5px;
z-index: 42;
}
/* 兼容：皮肤变量后备 */
.ws-canvas-modal :root {
--bg: #0a0f1f;
--bg-panel: #141c33;
--text: #e6efff;
--cyan: #0cf;
--border: #223355;
}
/* ===== 场景-道具分析 功能样式（节点大卡片版） ===== */
/* 道具卡上的分析按钮：与.ws-prop-generate-btn风格一致，青蓝渐变 */
.ws-prop-scene-analysis-btn {
width: 100%;
padding: 6px 12px;
background: linear-gradient(135deg, #5BC8FF 0%, #2196F3 100%);
color: #0a0f1f;
border: none;
border-radius: 6px;
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: background 0.2s, box-shadow 0.2s;
margin-top: 4px;
}
.ws-prop-scene-analysis-btn:hover {
background: linear-gradient(135deg, #0cf 0%, #5BC8FF 100%);
box-shadow: 0 2px 10px rgba(91, 200, 255, 0.4);
}
.ws-prop-scene-analysis-btn:disabled {
background: #444;
color: #888;
cursor: not-allowed;
box-shadow: none;
}
/* 道具卡上的场地道具标签 */
.ws-prop-venue-tag {
display: inline-block;
margin-left: 6px;
padding: 2px 8px;
font-size: 11px;
color: #00cc66;
background: rgba(0, 204, 102, 0.12);
border: 1px solid rgba(0, 204, 102, 0.4);
border-radius: 10px;
vertical-align: middle;
letter-spacing: 0.3px;
font-weight: 500;
}
/* ========== 模态画布整体 ========== */
#ws-pva-modal {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
color: #e6efff;
}
/* 顶部工具栏 */
.ws-pva-toolbar {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 52px;
display: flex;
align-items: center;
padding: 0 24px;
gap: 24px;
background: rgba(15, 22, 42, 0.85);
border-bottom: 1px solid rgba(91, 200, 255, 0.2);
backdrop-filter: blur(8px);
z-index: 2;
}
.ws-pva-title {
font-size: 16px;
font-weight: 600;
color: #e6efff;
letter-spacing: 0.5px;
white-space: nowrap;
}
.ws-pva-status {
font-size: 13px;
color: #5BC8FF;
padding: 4px 14px;
background: rgba(91, 200, 255, 0.08);
border: 1px solid rgba(91, 200, 255, 0.25);
border-radius: 14px;
flex: 0 0 auto;
}
.ws-pva-toolbar-actions {
margin-left: auto;
display: flex;
align-items: center;
gap: 10px;
}
.ws-pva-btn {
padding: 6px 14px;
border-radius: 6px;
font-size: 13px;
cursor: pointer;
transition: all 0.2s;
border: 1px solid rgba(124, 92, 255, 0.35);
background: rgba(124, 92, 255, 0.12);
color: #e6dfff;
font-weight: 600;
letter-spacing: 0.3px;
white-space: nowrap;
}
.ws-pva-btn:hover {
background: rgba(124, 92, 255, 0.28);
border-color: rgba(124, 92, 255, 0.7);
color: #fff;
transform: translateY(-1px);
}
.ws-pva-btn:disabled,
.ws-pva-btn[disabled] {
opacity: 0.55;
cursor: not-allowed !important;
transform: none !important;
}
.ws-pva-close-btn {
padding: 6px 16px;
background: rgba(255, 85, 85, 0.15);
color: #ff8585;
border: 1px solid rgba(255, 85, 85, 0.4);
border-radius: 6px;
font-size: 13px;
cursor: pointer;
transition: all 0.2s;
}
.ws-pva-close-btn:hover {
background: rgba(255, 85, 85, 0.3);
color: #fff;
}
/* 舞台区域 */
.ws-pva-stage {
position: absolute;
top: 52px;
left: 0;
right: 0;
bottom: 50px;
overflow: hidden;
background:
radial-gradient(circle at 10% 20%, rgba(108, 255, 180, 0.04) 0%, transparent 35%),
radial-gradient(circle at 90% 80%, rgba(160, 107, 255, 0.04) 0%, transparent 35%),
radial-gradient(circle at 50% 50%, rgba(91, 200, 255, 0.03) 0%, transparent 50%),
rgba(8, 12, 25, 0.72);
cursor: grab;
}
.ws-pva-world {
position: absolute;
left: 0;
top: 0;
transform-origin: 0 0;
transition: transform 0.05s linear;
min-width: 1600px;
min-height: 1200px;
}
.ws-pva-links {
position: absolute;
left: 0;
top: 0;
pointer-events: none;
overflow: visible;
filter: drop-shadow(0 1px 0 rgba(0,0,0,0.3));
min-width: 1600px;
min-height: 1200px;
}
.ws-pva-nodes {
position: absolute;
left: 0;
top: 0;
overflow: visible;
min-width: 1600px;
min-height: 1200px;
}
/* 底部操作提示 */
.ws-pva-tips {
position: absolute;
left: 50%;
bottom: 0;
height: 50px;
transform: translateX(-50%);
display: flex;
align-items: center;
padding: 0 30px;
font-size: 12px;
color: #8ea6c8;
background: rgba(15, 22, 42, 0.85);
border-top: 1px solid rgba(91, 200, 255, 0.15);
backdrop-filter: blur(8px);
letter-spacing: 0.5px;
white-space: nowrap;
}
/* ========== 节点基础样式（大卡片版） ========== */
.ws-pva-node {
position: absolute;
border-radius: 12px;
padding: 12px;
box-sizing: border-box;
background: linear-gradient(180deg, #182244 0%, #111834 100%);
border: 1.5px solid #2d3e68;
color: #e6efff;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255,255,255,0.04);
transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
user-select: none;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
gap: 6px;
cursor: grab;
touch-action: none;
}
.ws-pva-node:active,
.ws-pva-node.ws-pva-dragging {
cursor: grabbing;
transform: scale(1.02);
box-shadow: 0 16px 36px rgba(124, 92, 255, 0.35), inset 0 1px 0 rgba(255,255,255,0.08);
border-color: #7c5cff;
z-index: 50;
transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.ws-pva-node:hover {
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255,255,255,0.06);
z-index: 5;
}
.ws-pva-node-code {
font-size: 11px;
font-family: "Consolas", "Monaco", monospace;
color: #8ea6c8;
letter-spacing: 0.5px;
line-height: 1.2;
font-weight: 600;
}
.ws-pva-node-name {
font-size: 12px;
font-weight: 500;
color: #e6efff;
text-align: center;
line-height: 1.3;
word-break: break-all;
}
.ws-pva-node-badge {
position: absolute;
top: -7px;
right: -7px;
padding: 2px 8px;
background: #ffd166;
color: #3a2a00;
font-size: 10px;
font-weight: 700;
border-radius: 10px;
letter-spacing: 0.3px;
box-shadow: 0 2px 8px rgba(255, 209, 102, 0.45);
z-index: 2;
}
.ws-pva-node-check {
position: absolute;
top: -10px;
left: -10px;
width: 22px;
height: 22px;
border-radius: 50%;
background: #00cc66;
color: #fff;
font-size: 14px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 8px rgba(0, 204, 102, 0.55);
z-index: 2;
}
/* ========== 道具资产节点（金色边框大卡） ========== */
.ws-pva-node-prop {
border-color: #ffd166;
border-width: 2.5px;
background: linear-gradient(180deg, rgba(255, 209, 102, 0.12) 0%, #151d3a 60%);
box-shadow:
0 0 0 3px rgba(255, 209, 102, 0.08),
0 10px 30px rgba(255, 209, 102, 0.22),
0 6px 20px rgba(0, 0, 0, 0.5);
}
.ws-pva-node-prop:hover {
box-shadow:
0 0 0 4px rgba(255, 209, 102, 0.12),
0 14px 38px rgba(255, 209, 102, 0.32),
0 12px 28px rgba(0, 0, 0, 0.55);
}
.ws-pva-node-prop .ws-pva-node-code {
color: #ffd166;
text-align: center;
font-size: 13px;
margin-top: 4px;
}
.ws-pva-node-prop .ws-pva-node-name {
color: #fff3cd;
font-size: 14px;
font-weight: 600;
text-align: center;
}
/* ========== 分镜块节点（无限画布风格大卡 · 绿色） ========== */
.ws-pva-node-shot {
border-color: #6cffb4;
border-width: 2px;
background:
linear-gradient(135deg, rgba(108, 255, 180, 0.16) 0%, rgba(108, 255, 180, 0.02) 40%),
linear-gradient(180deg, #18263f 0%, #0f1a32 100%);
padding: 14px;
justify-content: flex-start;
}
.ws-pva-shot-head {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px dashed rgba(108, 255, 180, 0.25);
padding-bottom: 8px;
margin-bottom: 8px;
}
.ws-pva-shot-tag {
font-size: 12px;
font-weight: 700;
color: #6cffb4;
letter-spacing: 0.5px;
}
.ws-pva-shot-time {
font-size: 11px;
color: #9dffce;
background: rgba(108, 255, 180, 0.08);
border: 1px solid rgba(108, 255, 180, 0.25);
padding: 2px 8px;
border-radius: 8px;
}
.ws-pva-shot-label {
font-size: 24px;
font-weight: 800;
color: #ffffff;
letter-spacing: 2px;
text-align: center;
padding: 4px 0;
text-shadow: 0 0 12px rgba(108, 255, 180, 0.35);
}
.ws-pva-shot-name {
font-size: 13px;
color: #c4ffe0;
text-align: center;
background: rgba(108, 255, 180, 0.07);
border: 1px solid rgba(108, 255, 180, 0.15);
border-radius: 8px;
padding: 6px 8px;
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: center;
line-height: 1.4;
}
.ws-pva-shot-foot {
font-size: 10px;
color: rgba(108, 255, 180, 0.65);
display: flex;
align-items: center;
gap: 6px;
letter-spacing: 0.8px;
margin-top: 6px;
}
.ws-pva-shot-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #6cffb4;
box-shadow: 0 0 8px rgba(108, 255, 180, 0.8);
display: inline-block;
}
/* ========== 场地节点（紫色·俯视图大卡） ========== */
.ws-pva-node-venue {
border-color: #a06bff;
border-width: 2px;
background: linear-gradient(180deg, rgba(160, 107, 255, 0.1) 0%, #141a36 70%);
padding: 0;
overflow: hidden;
}
.ws-pva-node-venue.ws-pva-venue-hit {
border-color: #00dd88;
box-shadow: 0 0 0 1px rgba(0, 221, 136, 0.5),
0 10px 30px rgba(0, 221, 136, 0.28),
inset 0 0 0 1px rgba(0, 221, 136, 0.25);
background: linear-gradient(180deg, rgba(0, 221, 136, 0.08) 0%, #121a2f 70%);
}
.ws-pva-venue-hit-block {
margin-top: 6px;
padding: 6px 8px;
background: linear-gradient(180deg, rgba(0, 221, 136, 0.12), rgba(0, 221, 136, 0.04));
border: 1px solid rgba(0, 221, 136, 0.35);
border-radius: 6px;
}
.ws-pva-venue-hit-head {
display: flex;
align-items: center;
gap: 6px;
line-height: 1.1;
padding-bottom: 3px;
border-bottom: 1px dashed rgba(0, 221, 136, 0.28);
}
.ws-pva-venue-hit-icon { font-size: 14px; }
.ws-pva-venue-hit-text {
flex: 1 1 auto;
color: #d4ffee;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.3px;
}
.ws-pva-venue-hit-text b { color: #fff; font-weight: 800; }
.ws-pva-venue-hit-score {
color: #00dd88;
font-weight: 800;
font-size: 12px;
padding: 2px 6px;
border-radius: 4px;
background: rgba(0, 221, 136, 0.12);
border: 1px solid rgba(0, 221, 136, 0.3);
}
.ws-pva-venue-hit-reason {
margin-top: 4px;
color: #b8efd9;
font-size: 11px;
line-height: 1.5;
max-height: 54px;
overflow: hidden;
text-overflow: ellipsis;
}
/* 物体命中本道具：物体卡样式 */
.ws-pva-node-object.ws-pva-obj-prop-candidate {
border-color: #00dd88 !important;
box-shadow: 0 0 0 1px rgba(0, 221, 136, 0.55),
0 8px 22px rgba(0, 221, 136, 0.3),
inset 0 0 0 1px rgba(0, 221, 136, 0.22) !important;
background: linear-gradient(180deg, rgba(0, 221, 136, 0.12) 0%, #121a2f 100%) !important;
}
.ws-pva-obj-status.ws-pva-obj-candidate {
background: linear-gradient(135deg, rgba(0, 221, 136, 0.92), rgba(0, 255, 160, 0.92));
color: #002614;
font-weight: 800;
letter-spacing: 0.3px;
box-shadow: 0 3px 8px rgba(0, 221, 136, 0.35);
}
.ws-pva-obj-hint {
margin-top: 3px;
font-size: 10.5px;
line-height: 1.45;
color: #aef3d2;
padding: 3px 5px;
background: rgba(0, 221, 136, 0.07);
border-left: 2px solid rgba(0, 221, 136, 0.5);
border-radius: 0 3px 3px 0;
max-height: 36px;
overflow: hidden;
text-overflow: ellipsis;
}
/* 场地 6 张图 2×3 网格 */
.ws-pva-venue-img-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 6px;
width: 100%;
padding: 10px 12px 4px;
box-sizing: border-box;
}
.ws-pva-venue-img-cell {
position: relative;
aspect-ratio: 4 / 3;
border-radius: 6px;
overflow: hidden;
background: linear-gradient(135deg, #1a2345, #2a3a60);
border: 1px solid rgba(160, 107, 255, 0.3);
}
.ws-pva-venue-img-cell > img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.ws-pva-venue-img-cell.ws-pva-venue-img-placeholder {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 2px;
color: #87a0d6;
background:
linear-gradient(135deg, rgba(160, 107, 255, 0.18), rgba(42, 58, 96, 0.4)),
repeating-linear-gradient(45deg, rgba(135, 160, 214, 0.06) 0 8px, transparent 8px 16px);
}
.ws-pva-venue-img-placeholder .ws-pva-venue-img-no {
position: absolute;
top: 3px;
left: 4px;
font-size: 10px;
font-weight: 700;
color: #aac6fb;
background: rgba(0, 0, 0, 0.35);
padding: 1px 5px;
border-radius: 3px;
letter-spacing: 0.3px;
}
.ws-pva-venue-img-placeholder .ws-pva-venue-img-icon {
font-size: 32px;
opacity: 0.85;
}
/* 视角名标签：右上角徽标，正常 cell 和占位 cell 都显示（有 label 时） */
.ws-pva-venue-img-cap {
position: absolute;
top: 3px;
right: 3px;
max-width: 70%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 10px;
font-weight: 700;
color: #fff;
padding: 2px 6px;
border-radius: 3px;
background: rgba(15, 23, 42, 0.55);
backdrop-filter: blur(2px);
border: 1px solid rgba(160, 107, 255, 0.35);
letter-spacing: 0.3px;
pointer-events: none;
z-index: 2;
}
.ws-pva-node-venue.ws-pva-venue-hit .ws-pva-venue-img-cap {
border-color: rgba(0, 221, 136, 0.65);
background: rgba(0, 33, 21, 0.55);
color: #d4ffee;
}
/* 命中时，6 图 cell 边框改成绿调 */
.ws-pva-node-venue.ws-pva-venue-hit .ws-pva-venue-img-cell {
border-color: rgba(0, 221, 136, 0.45);
box-shadow: inset 0 0 0 1px rgba(0, 221, 136, 0.22);
}
.ws-pva-venue-meta {
padding: 10px 12px 12px;
display: flex;
flex-direction: column;
gap: 10px;
}
/* 场地卡标题行：L编号 + 场地名称（对齐无限画布 ws-layout-header 风格） */
.ws-pva-venue-title {
display: flex;
align-items: baseline;
justify-content: flex-start;
gap: 10px;
padding-bottom: 6px;
border-bottom: 1px dashed rgba(160, 107, 255, 0.28);
}
.ws-pva-venue-title .ws-pva-node-code {
color: #c4a3ff;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.5px;
margin: 0;
padding: 0;
text-align: left;
}
.ws-pva-venue-title .ws-pva-node-name {
color: #f0e6ff;
font-size: 16px;
font-weight: 700;
letter-spacing: 0.3px;
margin: 0;
padding: 0;
text-align: left;
flex: 1 1 auto;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 场地描述原文块：布景设置场地卡里的完整描述 */
.ws-pva-venue-desc-block {
margin-top: 8px;
padding: 8px 10px;
background: rgba(255, 200, 100, 0.06);
border: 1px solid rgba(255, 200, 100, 0.18);
border-radius: 6px;
display: flex;
flex-direction: column;
gap: 4px;
}
.ws-pva-venue-desc-title {
color: #ffc87a;
font-size: 11px;
font-weight: 700;
letter-spacing: 1.2px;
line-height: 1;
padding-bottom: 2px;
border-bottom: 1px dashed rgba(255, 200, 100, 0.22);
}
/* 场地描述：取消滚动区，全部展开显示 */
.ws-pva-venue-desc-text {
color: #e3edff;
font-size: 12px;
line-height: 1.55;
max-height: none;
height: auto;
overflow: visible;
white-space: pre-wrap;
word-break: break-word;
padding-right: 0;
margin: 0;
}
/* LLM 分析中进度指示器（场地卡内显示） */
.ws-pva-venue-llm-pending {
margin-top: 8px;
padding: 12px 10px;
background: linear-gradient(135deg, rgba(91, 200, 255, 0.08) 0%, rgba(160, 107, 255, 0.06) 100%);
border: 1px solid rgba(91, 200, 255, 0.3);
border-radius: 8px;
display: flex;
align-items: center;
gap: 10px;
animation: wsPvaLlmPulse 1.8s ease-in-out infinite;
}
@keyframes wsPvaLlmPulse {
0%, 100% { border-color: rgba(91, 200, 255, 0.3); box-shadow: 0 0 0 0 rgba(91, 200, 255, 0.1); }
50% { border-color: rgba(91, 200, 255, 0.55); box-shadow: 0 0 0 4px rgba(91, 200, 255, 0.08); }
}
.ws-pva-llm-spinner {
flex-shrink: 0;
width: 22px;
height: 22px;
border: 3px solid rgba(91, 200, 255, 0.2);
border-top-color: #5BC8FF;
border-radius: 50%;
animation: wsPvaLlmSpin 0.8s linear infinite;
}
@keyframes wsPvaLlmSpin { to { transform: rotate(360deg); } }
.ws-pva-llm-pending-text {
color: #b8d8ff;
font-size: 12px;
line-height: 1.5;
font-weight: 600;
}
.ws-pva-llm-pending-sub {
color: #7a9ec0;
font-size: 10.5px;
font-weight: 400;
}
/* PVA 画布内部复用无限画布的 ws-layout-analysis，做局部微调（保证和无限画布像素级一致） */
.ws-pva-node-venue .ws-layout-analysis {
grid-template-rows: repeat(7, 40px);
gap: 4px;
padding: 4px 0 0 0;
margin: 0;
}
.ws-pva-node-venue .ws-layout-analysis-item {
/* 对齐无限画布：有值才显示底色框，空值不占位背景 */
display: flex;
align-items: flex-start;
background: rgba(160, 107, 255, 0.08);
padding: 4px 10px;
border-radius: 4px;
border: 1px solid rgba(160, 107, 255, 0.16);
}
.ws-pva-node-venue .ws-layout-analysis-item:empty {
background: transparent;
border: 1px dashed rgba(160, 107, 255, 0.1);
}
.ws-pva-node-venue .ws-layout-analysis-label {
color: #b9a7e0;
font-size: 12.5px;
line-height: 1;
padding-top: 6px;
margin-right: 6px;
flex-shrink: 0;
white-space: nowrap;
font-weight: 600;
}
.ws-pva-node-venue .ws-layout-analysis-value {
color: #f0e6ff;
font-size: 12.5px;
line-height: 1.55;
font-weight: 500;
word-break: break-all;
}
/* ========== 物体节点（真正卡片风格：图标+名称+分类+状态角标） ========== */
.ws-pva-node-object {
background: linear-gradient(180deg, #1e2948 0%, #182240 100%);
border-color: #3a4a70;
border-radius: 10px;
align-items: stretch;
justify-content: flex-start;
padding: 8px 10px;
cursor: pointer;
gap: 4px;
}
.ws-pva-node-object:hover {
border-color: #5BC8FF;
background: linear-gradient(180deg, #25335f 0%, #1a2548 100%);
transform: translateY(-2px) scale(1.02);
box-shadow: 0 8px 20px rgba(91, 200, 255, 0.18), 0 8px 20px rgba(0, 0, 0, 0.5);
}
.ws-pva-obj-top {
display: flex;
justify-content: space-between;
align-items: center;
height: 26px;
line-height: 1;
}
.ws-pva-obj-icon {
font-size: 22px;
line-height: 1;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}
.ws-pva-obj-status {
font-size: 10px;
padding: 3px 6px;
border-radius: 10px;
letter-spacing: 0.3px;
font-weight: 600;
}
.ws-pva-obj-rough {
color: #b8c7e0;
background: rgba(130, 149, 186, 0.15);
border: 1px solid rgba(130, 149, 186, 0.35);
}
.ws-pva-obj-llm {
color: #5BC8FF;
background: rgba(91, 200, 255, 0.12);
border: 1px solid rgba(91, 200, 255, 0.35);
}
.ws-pva-obj-name {
font-size: 13px;
color: #e6efff;
font-weight: 600;
text-align: center;
line-height: 1.25;
word-break: break-all;
margin: 2px 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.ws-pva-obj-cat {
font-size: 10px;
color: #8ea6c8;
text-align: center;
letter-spacing: 1px;
padding: 1px 0;
margin-top: auto;
}
/* 粗提取物体：降低视觉权重（灰边+虚线连接时已经是虚线，这里再压一点） */
.ws-pva-node-object[data-id^="obj-"] {
/* 默认样式都一样，通过 rough class 再细调 */
}
.ws-pva-node-object.rough {
opacity: 0.92;
filter: saturate(0.85);
}
.ws-pva-node-object.rough:hover {
opacity: 1;
filter: saturate(1);
}
/* 匹配的物体节点：金色高亮 */
.ws-pva-node-object.matched {
border-color: #ffd166;
border-width: 2.5px;
background: linear-gradient(180deg, rgba(255, 209, 102, 0.18) 0%, #1e2948 70%);
box-shadow:
0 0 0 3px rgba(255, 209, 102, 0.1),
0 6px 20px rgba(255, 209, 102, 0.3),
0 6px 16px rgba(0, 0, 0, 0.45);
}
.ws-pva-node-object.matched:hover {
box-shadow:
0 0 0 4px rgba(255, 209, 102, 0.14),
0 10px 26px rgba(255, 209, 102, 0.38),
0 10px 24px rgba(0, 0, 0, 0.5);
}
.ws-pva-node-object.matched .ws-pva-obj-name {
color: #ffe29a;
font-weight: 700;
}
/* 已标记为场地道具的物体节点（绿色边+✓） */
.ws-pva-node-object.venue-marked {
border-color: #00cc66 !important;
background: linear-gradient(180deg, rgba(0, 204, 102, 0.14) 0%, #1e2948 70%) !important;
}
.ws-pva-node-object.venue-marked .ws-pva-obj-name {
color: #c8ffe0 !important;
}
.ws-pva-node-object.venue-marked.matched {
border-color: #00cc66 !important;
background: linear-gradient(135deg, rgba(255, 209, 102, 0.1) 0%, rgba(0, 204, 102, 0.14) 100%) !important;
}
/* ========== 场地卡 - 全部属性 KV 列表 ========== */
/* 取消滚动区 + 场地卡下部不留白：desc-block 和 attrs-block 底部 padding 压到 0，去掉最后的空白 */
.ws-pva-venue-desc-block {
margin-top: 8px;
padding: 8px 10px 0; /* 下部 padding=0，不留白 */
background: rgba(255, 200, 100, 0.06);
border: 1px solid rgba(255, 200, 100, 0.18);
border-radius: 6px;
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 0;
}
.ws-pva-venue-attrs-block {
margin-top: 10px;
margin-bottom: 0;
padding: 8px 10px 0; /* 下部 padding=0，场地卡不留白 */
border: 1px solid rgba(95, 120, 180, 0.35);
background:
linear-gradient(180deg, rgba(96, 120, 255, 0.06) 0%, rgba(108, 255, 180, 0.04) 100%),
rgba(13, 20, 40, 0.6);
border-radius: 8px;
}
.ws-pva-venue-attrs-title {
font-size: 11.5px;
font-weight: 700;
color: #d6e0ff;
letter-spacing: 0.4px;
padding-bottom: 4px;
margin-bottom: 6px;
border-bottom: 1px dashed rgba(96, 120, 255, 0.3);
display: flex;
align-items: center;
gap: 6px;
}
/* 场地属性：取消滚动区，全部展开显示 */
.ws-pva-venue-attrs-scroll {
max-height: none;
height: auto;
overflow: visible;
overflow-x: visible;
display: flex;
flex-direction: column;
gap: 3px;
padding-right: 0;
margin: 0 0 0;
}
.ws-pva-venue-attr-row {
display: flex;
flex-direction: row;
align-items: flex-start;
padding: 3px 4px;
border-radius: 4px;
background: rgba(255, 255, 255, 0.02);
font-size: 11px;
line-height: 1.45;
border: 1px solid transparent;
transition: background 0.1s, border-color 0.1s;
}
.ws-pva-venue-attr-row:hover {
background: rgba(96, 120, 255, 0.08);
border-color: rgba(96, 120, 255, 0.25);
}
.ws-pva-venue-attr-key {
flex: 0 0 82px;
color: #8ea0d0;
font-weight: 600;
padding-right: 8px;
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ws-pva-venue-attr-val {
flex: 1 1 auto;
color: #dbe6ff;
word-break: break-all;
white-space: pre-wrap;
}
/* ========== 画布 Toolbar 新增按钮样式（适应画布 + LLM 主按钮细化） ========== */
.ws-pva-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
padding: 6px 12px;
border-radius: 7px;
border: 1px solid rgba(96, 120, 255, 0.45);
background: linear-gradient(180deg, rgba(96, 120, 255, 0.18) 0%, rgba(96, 120, 255, 0.08) 100%);
color: #e6ecff;
font-size: 12.5px;
font-weight: 600;
cursor: pointer;
transition: transform 0.08s, background 0.15s, box-shadow 0.15s, border-color 0.15s, filter 0.1s;
user-select: none;
white-space: nowrap;
}
.ws-pva-btn:hover {
border-color: rgba(108, 255, 180, 0.55);
background: linear-gradient(180deg, rgba(108, 255, 180, 0.2) 0%, rgba(96, 120, 255, 0.14) 100%);
box-shadow: 0 4px 14px rgba(96, 120, 255, 0.25);
transform: translateY(-0.5px);
filter: brightness(1.05);
}
.ws-pva-btn:active { transform: translateY(0.5px); filter: brightness(0.96); }
.ws-pva-btn:disabled {
opacity: 0.7;
cursor: not-allowed !important;
filter: grayscale(0.4) brightness(0.9);
transform: none;
box-shadow: none;
}
.ws-pva-btn.ws-pva-btn-primary {
border-color: rgba(108, 255, 180, 0.55);
background: linear-gradient(180deg, rgba(108, 255, 180, 0.22) 0%, rgba(96, 120, 255, 0.18) 100%);
color: #fff;
}
.ws-pva-btn.ws-pva-btn-primary:hover {
background: linear-gradient(180deg, rgba(108, 255, 180, 0.32) 0%, rgba(96, 120, 255, 0.26) 100%);
box-shadow: 0 5px 18px rgba(108, 255, 180, 0.32);
}
.ws-pva-btn.ws-pva-btn-warn {
border-color: rgba(255, 138, 61, 0.55);
background: linear-gradient(180deg, rgba(255, 138, 61, 0.22) 0%, rgba(255, 80, 80, 0.14) 100%);
color: #fff;
}
.ws-pva-btn.ws-pva-btn-warn:hover {
background: linear-gradient(180deg, rgba(255, 138, 61, 0.32) 0%, rgba(255, 80, 80, 0.2) 100%);
box-shadow: 0 5px 18px rgba(255, 138, 61, 0.32);
}
/* 锁图标（匹配物→道具连线中间，Bezier 中点） */
.ws-pva-lock-icon {
position: absolute;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(255, 80, 80, 0.14);
border: 2px solid rgba(255, 80, 80, 0.7);
cursor: pointer;
z-index: 5;
transition: all 0.25s ease;
box-shadow: 0 3px 10px rgba(0,0,0,0.35);
}
.ws-pva-lock-icon:hover {
transform: scale(1.15);
background: rgba(255, 80, 80, 0.24);
border-color: rgba(255, 80, 80, 0.95);
}
.ws-pva-lock-icon.locked {
background: rgba(108, 255, 180, 0.18);
border-color: rgba(108, 255, 180, 0.9);
box-shadow: 0 0 0 3px rgba(108, 255, 180, 0.12), 0 3px 12px rgba(108, 255, 180, 0.3);
animation: ws-pva-lock-pulse 2.2s ease-in-out infinite;
}
.ws-pva-lock-icon.locked:hover {
background: rgba(108, 255, 180, 0.28);
}
@keyframes ws-pva-lock-pulse {
0%, 100% { box-shadow: 0 0 0 3px rgba(108, 255, 180, 0.12), 0 3px 12px rgba(108, 255, 180, 0.3); }
50% { box-shadow: 0 0 0 7px rgba(108, 255, 180, 0.05), 0 3px 16px rgba(108, 255, 180, 0.4); }
}
.ws-pva-lock-emoji {
font-size: 18px;
line-height: 1;
user-select: none;
}
/* ================ PVA（场地道具分析独立画布）分镜卡 三区域样式 ================ */
.ws-pva-node-shot {
background: linear-gradient(180deg, rgba(30,46,90,0.96) 0%, rgba(16,24,50,0.98) 100%);
border: 1px solid rgba(108, 255, 180, 0.35);
border-radius: 12px;
box-shadow: 0 4px 18px rgba(0,0,0,0.5), 0 0 0 1px rgba(108,255,180,0.12) inset;
padding: 10px 12px;
box-sizing: border-box;
color: #f5f7ff;
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 6px;
}
.ws-pva-shot-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
flex-shrink: 0;
flex-wrap: nowrap;
}
/* PVA 画布下的 tag/time 专属样式（覆盖通用版，保持原来的蓝青配色） */
.ws-pva-shot-tag {
background: rgba(108, 255, 180, 0.14);
border: 1px solid rgba(108, 255, 180, 0.45);
color: #aaffdd;
font-weight: bold;
font-size: 11px;
padding: 3px 10px;
border-radius: 6px;
max-width: 70%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex-shrink: 0;
letter-spacing: normal;
}
.ws-pva-shot-time {
color: #cdd6ff;
font-size: 11px;
background: rgba(130, 160, 255, 0.14);
border: 1px solid rgba(130, 160, 255, 0.35);
padding: 3px 8px;
border-radius: 6px;
white-space: nowrap;
flex-shrink: 0;
}
/* shot-head 左区：tag + 分镜号 + 可选分镜名（同一行紧凑排列，避免 label/name 单独成行造成大面积空白） */
.ws-pva-shot-head-left {
display: flex;
align-items: center;
gap: 8px;
flex: 1 1 auto;
min-width: 0;
}
.ws-pva-shot-head-title {
display: inline-flex;
align-items: center;
gap: 6px;
min-width: 0;
overflow: hidden;
}
.ws-pva-shot-label {
font-size: 13px;
font-weight: bold;
color: #ffffff;
line-height: 1.35;
flex-shrink: 0;
white-space: nowrap;
}
.ws-pva-shot-name {
font-size: 11px;
color: #b8c4f0;
line-height: 1.3;
flex-shrink: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 去除原本 label/name 单独成行的大空白 */
.ws-pva-node-shot > .ws-pva-shot-label,
.ws-pva-node-shot > .ws-pva-shot-name {
display: none;
}
/* 底部冗余说明文字：直接隐藏，不再占空间 */
.ws-pva-shot-foot { display: none !important; }
.ws-pva-shot-script {
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: 6px;
min-height: 0;
margin-top: 2px;
}
.ws-pva-shot-script-row {
background: rgba(0,0,0,0.35);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 6px;
padding: 4px 6px 5px;
flex-shrink: 0;
display: flex;
flex-direction: column;
gap: 2px;
min-height: 0;
}
.ws-pva-shot-script-row-pic {
flex: 1 1 auto;
min-height: 80px;
}
.ws-pva-shot-script-title {
font-size: 11px;
font-weight: bold;
line-height: 1.35;
padding-bottom: 2px;
border-bottom: 1px dashed rgba(255,255,255,0.18);
}
.ws-pva-shot-script-title-loc { color: #9ce5ff; border-color: rgba(156, 229, 255, 0.32); }
.ws-pva-shot-script-title-prop { color: #ffd39c; border-color: rgba(255, 211, 156, 0.32); }
.ws-pva-shot-script-title-pic { color: #c6ffb0; border-color: rgba(198, 255, 176, 0.32); }
.ws-pva-shot-script-body {
font-size: 10.5px;
line-height: 1.48;
color: #eaeeff;
word-break: break-word;
white-space: normal;
max-height: 64px;
overflow: hidden;
}
.ws-pva-shot-script-body-pic {
flex: 1 1 auto;
max-height: none;
overflow-y: auto;
padding-right: 2px;
}
.ws-pva-shot-script-body-pic::-webkit-scrollbar { width: 4px; }
.ws-pva-shot-script-body-pic::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.22); border-radius: 2px; }
.ws-pva-shot-foot {
flex-shrink: 0;
font-size: 10px;
color: #8b98c9;
display: flex;
align-items: center;
gap: 6px;
margin-top: 2px;
}
.ws-pva-shot-dot {
display: inline-block;
width: 6px; height: 6px; border-radius: 50%;
background: #6cffb4;
box-shadow: 0 0 6px rgba(108,255,180,0.8);
}
/* =========================================================
🎞️ 视频管理工具条（场景卡网格 + 分镜横条 + 三态格子）
========================================================= */
/* 【对齐基准】视频管理 Section 整体：宽度永远占满 page-workspace 工作区 100%，
让 "视频管理工作条 / 场景卡最右卡 / 分镜视频工作区" 三者右边界像素一致。
page-workspace 左右 24px padding = 本节外层可视宽度；
本节内部统一：外框 100% 宽，内部容器 padding-right = 工作条 padding-right = 16px。*/
.ws-vm-section {
display: block !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* 强制隐藏视频管理区（覆盖 .ws-vm-section 的 display: block !important） */
.ws-vm-section.ws-section-hidden {
display: none !important;
}
/* 折叠内容层：取消任何 max-width / 最大宽 限制，满宽 */
.ws-vm-section > .ws-collapse-content {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
margin-top: 12px !important;
padding: 0 !important; /* 内外边距完全交给子容器，防止层叠后右边界差 */
}
/* 折叠状态：优先级更高，覆盖上面的 display:block */
.ws-vm-section > .ws-collapse-content.collapsed {
display: none !important;
}
/* 场景卡网格容器：padding 左右 = 视频管理工作条 ws-section-bar padding 左右 = 16px →
content-left/right 完全对齐，再给内部 grid 1fr 填满到同一右边界。
原 auto-fill + minmax(240,1fr)；右侧最后一列卡天然贴 16 内边距内边 → 同工作条右。*/
.ws-vm-scenes-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 14px;
padding: 14px 16px 6px 16px;
/* 满宽锁，防 flex/grid 父收缩 */
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* 分镜视频工作区（横条外部 wrap）：满宽，与工作条相同 box-sizing */
.ws-vm-strip-wrap {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
box-sizing: border-box !important;
display: block !important;
}
/* 单横条：margin 左右 16 = 工作条 padding 左右 16 */
.ws-vm-strip {
margin: 10px 16px 16px 16px;
background: var(--bg-panel);
border: 1px solid var(--border);
border-radius: 10px;
overflow: hidden;
display: block !important;
width: calc(100% - 32px) !important;
min-width: 0 !important;
max-width: calc(100% - 32px) !important;
box-sizing: border-box !important;
}
/* 单张场景卡 */
.ws-vm-scene-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 10px;
padding: 14px 14px 12px 14px;
cursor: pointer;
transition: transform 0.15s ease, border-color 0.2s ease, box-shadow 0.2s ease;
position: relative;
color: var(--text);
}
.ws-vm-scene-card:hover {
transform: translateY(-2px);
border-color: var(--cyan);
box-shadow: 0 4px 14px rgba(91, 200, 255, 0.18);
}
.ws-vm-scene-card.active {
border-color: var(--accent);
box-shadow: 0 0 0 2px rgba(57, 255, 20, 0.2), 0 4px 14px rgba(57, 255, 20, 0.18);
}
.ws-vm-scene-card-head {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
}
.ws-vm-scene-num {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 36px;
height: 28px;
padding: 0 8px;
border-radius: 6px;
background: linear-gradient(135deg, #5BC8FF 0%, #2196F3 100%);
color: #0a0f1f;
font-weight: 700;
font-size: 13px;
letter-spacing: 0.2px;
}
.ws-vm-scene-title {
flex: 1;
font-size: 13px;
line-height: 1.45;
color: var(--text);
word-break: break-all;
max-height: 3em;
overflow: hidden;
}
.ws-vm-scene-badges {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 10px;
}
.ws-vm-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 8px;
border-radius: 999px;
font-size: 11px;
line-height: 1.4;
border: 1px solid var(--border);
background: color-mix(in srgb, var(--cyan) 10%, var(--bg-card));
color: var(--text2);
}
.ws-vm-badge.ws-vm-green {
background: color-mix(in srgb, var(--green, #39FF14) 14%, var(--bg-card));
border-color: color-mix(in srgb, var(--green, #39FF14) 40%, var(--border));
color: var(--green, #39FF14);
}
.ws-vm-badge.ws-vm-video {
background: color-mix(in srgb, var(--purple, #9D4EDD) 14%, var(--bg-card));
border-color: color-mix(in srgb, var(--purple, #9D4EDD) 40%, var(--border));
color: var(--purple, #E9D8FF);
}
.ws-vm-badge.ws-vm-total {
background: color-mix(in srgb, var(--gold) 14%, var(--bg-card));
border-color: color-mix(in srgb, var(--gold) 40%, var(--border));
color: var(--gold);
}
.ws-vm-badge.ws-vm-project {
background: color-mix(in srgb, #4DABF7 14%, var(--bg-card));
border-color: color-mix(in srgb, #4DABF7 40%, var(--border));
color: #74C0FC;
}
.ws-vm-badge.ws-vm-not-ready {
background: color-mix(in srgb, #ff6677 12%, var(--bg-card));
border-color: color-mix(in srgb, #ff6677 42%, var(--border));
color: #ff9aac;
}
.ws-vm-badge.ws-vm-green-dim {
background: color-mix(in srgb, var(--green, #39FF14) 8%, var(--bg-card));
border-color: color-mix(in srgb, var(--green, #39FF14) 26%, var(--border));
color: color-mix(in srgb, var(--green, #39FF14) 82%, #fff);
opacity: 0.92;
}
.ws-vm-empty {
padding: 24px 16px;
text-align: center;
color: var(--text3);
font-size: 13px;
}
/* 宽横条：某场景下所有分镜格容器 */
.ws-vm-strip {
margin: 10px 16px 16px 16px;
background: var(--bg-panel);
border: 1px solid var(--border);
border-radius: 10px;
overflow: hidden;
}
.ws-vm-strip-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
border-bottom: 1px solid var(--border);
background: color-mix(in srgb, var(--cyan) 5%, var(--bg-panel));
}
.ws-vm-strip-title {
font-size: 13px;
color: var(--text);
font-weight: 600;
}
.ws-vm-strip-count {
font-size: 12px;
color: var(--text2);
}
/* ========== 分镜视频卡：固定尺寸，一排最多摆 5 个，超出横向滚动 ========== */
/* strip-body 可视宽 = 100% - 左右 padding 12*2；5 张 cell + 4 个 gap=10；
单卡固定宽 = calc((100% - 24px - 4*10px)/5) = calc((100% - 64px)/5)
→ 任何窗口宽度下 5 张刚合适填满，多余 → 水平滚动条
cell 本身尺寸永不自动缩放（flex:0 0 auto + 固定宽高） */
.ws-vm-strip-body {
display: flex;
flex-direction: row;
flex-wrap: nowrap !important; /* 强制单行 */
gap: 10px;
padding: 12px;
overflow-x: auto !important; /* 超 5 张 → 水平滚动 */
overflow-y: hidden !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
box-sizing: border-box !important;
scroll-behavior: smooth;
}
.ws-vm-strip-body::-webkit-scrollbar {
height: 8px !important;
}
.ws-vm-strip-body::-webkit-scrollbar-track {
background: color-mix(in srgb, var(--cyan, #5BC8FF) 6%, var(--bg-panel));
border-radius: 999px;
}
.ws-vm-strip-body::-webkit-scrollbar-thumb {
background: linear-gradient(90deg,
color-mix(in srgb, var(--cyan, #5BC8FF) 55%, transparent),
color-mix(in srgb, var(--purple, #9D4EDD) 50%, transparent));
border-radius: 999px;
border: 1px solid color-mix(in srgb, var(--cyan, #5BC8FF) 35%, transparent);
}
.ws-vm-strip-body::-webkit-scrollbar-thumb:hover {
filter: brightness(1.2);
}
/* 通用 cell 基底（视频 / 绿灯 / 紫灯 共用） —— 固定尺寸，不自适应 */
.ws-vm-cell {
flex: 0 0 auto !important; /* 永不伸缩 */
width: calc((100% - 24px - 4 * 10px) / 5) !important; /* 一行刚放 5 个；超出 strip-body 水平滚动 */
min-width: calc((100% - 24px - 4 * 10px) / 5) !important;
max-width: calc((100% - 24px - 4 * 10px) / 5) !important;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 10px;
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform 0.14s ease, box-shadow 0.2s ease, border-color 0.2s ease;
cursor: pointer;
box-sizing: border-box !important;
}
/* 窄屏保护：当计算宽 < 200px 时仍然固定 200，仍然走滚动（不会让卡片被压得看不清） */
@media (max-width: 1420px) {
.ws-vm-cell {
width: 240px !important;
min-width: 240px !important;
max-width: 240px !important;
}
}
.ws-vm-cell:hover {
transform: translateY(-2px);
border-color: var(--cyan);
box-shadow: 0 4px 14px rgba(91, 200, 255, 0.2);
}
.ws-vm-cell-title {
padding: 7px 10px 6px 10px;
font-size: 12px;
font-weight: 600;
color: var(--text);
border-bottom: 1px solid var(--border);
background: color-mix(in srgb, var(--cyan) 5%, var(--bg-card));
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.ws-vm-cell-title-left {
display: inline-flex;
align-items: center;
gap: 6px;
flex: 1;
min-width: 0;
}
.ws-vm-cell-title-left > span:first-child {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 0 1 auto;
max-width: 34%;
}
/* —— 红/绿信号灯（标题后指示有无视频）—— */
.ws-vm-light {
width: 10px;
height: 10px;
border-radius: 999px;
flex-shrink: 0;
display: inline-block;
position: relative;
}
.ws-vm-light--red {
background: radial-gradient(circle at 30% 30%, #ffb3bc, #ff4858 62%, #a2232f 100%);
box-shadow: 0 0 6px rgba(255, 72, 88, 0.75), 0 0 0 1px rgba(255, 72, 88, 0.35) inset;
}
.ws-vm-light--green {
background: radial-gradient(circle at 30% 30%, #baffb1, #39FF14 62%, #198a2a 100%);
box-shadow: 0 0 6px rgba(57, 255, 20, 0.7), 0 0 0 1px rgba(57, 255, 20, 0.35) inset;
animation: vmGreenPulse 1.7s ease-in-out infinite;
}
@keyframes vmGreenPulse {
0%, 100% { filter: brightness(1); }
50% { filter: brightness(1.25); }
}
/* —— 本分镜视频数量徽章（绿灯后显示）—— */
.ws-vm-video-count-badge {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 1px 7px;
border-radius: 999px;
font-size: 10.5px;
font-weight: 600;
line-height: 1.45;
color: #d5ffe2;
background: linear-gradient(135deg,
color-mix(in srgb, var(--green, #39FF14) 42%, #06142a),
color-mix(in srgb, var(--green, #39FF14) 20%, #06142a));
border: 1px solid color-mix(in srgb, var(--green, #39FF14) 55%, transparent);
flex-shrink: 0;
white-space: nowrap;
}
.ws-vm-cell-tag {
font-weight: 400;
font-size: 11px;
color: var(--text2);
background: var(--bg-panel);
padding: 2px 6px;
border-radius: 4px;
border: 1px solid var(--border);
}
.ws-vm-cell-body {
padding: 0;
flex: 1;
display: flex;
align-items: stretch;
justify-content: stretch;
aspect-ratio: 16 / 10;
background: #000;
}
.ws-vm-cell-body video {
width: 100%;
height: 100%;
object-fit: contain;
background: #000;
display: block;
}
.ws-vm-cell-foot {
padding: 6px 10px 8px 10px;
font-size: 11.5px;
color: var(--text2);
line-height: 1.45;
border-top: 1px solid var(--border);
background: var(--bg-panel);
}
/* 视频态 cell */
.ws-vm-cell-video {
border-color: rgba(91, 200, 255, 0.5);
box-shadow: 0 0 0 1px rgba(91, 200, 255, 0.08);
}
/* 绿灯 cell（准备好了，还没视频） */
.ws-vm-cell-ready .ws-vm-cell-body {
background: color-mix(in srgb, var(--green, #39FF14) 16%, var(--bg-card));
display: flex;
align-items: center;
justify-content: center;
border: 2px solid color-mix(in srgb, var(--green, #39FF14) 65%, transparent);
border-radius: 0;
margin: 0;
}
.ws-vm-cell-ready .ws-vm-cell-body::before {
content: "✅ 已就绪";
color: var(--green, #39FF14);
font-weight: 700;
font-size: 14px;
letter-spacing: 0.3px;
text-shadow: 0 0 8px rgba(57, 255, 20, 0.3);
}
.ws-vm-cell-ready {
border-color: color-mix(in srgb, var(--green, #39FF14) 50%, var(--border));
}
/* 紫灯 cell（还没准备好，也没视频） */
.ws-vm-cell-not-ready .ws-vm-cell-body {
background: color-mix(in srgb, var(--purple, #9D4EDD) 16%, var(--bg-card));
display: flex;
align-items: center;
justify-content: center;
border: 2px dashed color-mix(in srgb, var(--purple, #9D4EDD) 65%, transparent);
border-radius: 0;
}
.ws-vm-cell-not-ready .ws-vm-cell-body::before {
content: "⏳ 待准备";
color: var(--purple, #E9D8FF);
font-weight: 700;
font-size: 14px;
letter-spacing: 0.3px;
text-shadow: 0 0 8px rgba(157, 78, 221, 0.28);
}
.ws-vm-cell-not-ready {
border-color: color-mix(in srgb, var(--purple, #9D4EDD) 50%, var(--border));
}
/* ---- 分镜格复选框行（选为工程素材） ---- */
.ws-vm-cell-select-row {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 6px 10px 2px 10px;
border-top: 1px dashed var(--border);
background: var(--bg-panel);
font-size: 11.5px;
color: var(--text2);
user-select: none;
}
.ws-vm-cell-select-row input[type="checkbox"] {
width: 15px;
height: 15px;
accent-color: var(--cyan, #5BC8FF);
cursor: pointer;
}
.ws-vm-cell-select-row label {
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 5px;
margin: 0;
line-height: 1.2;
}
.ws-vm-cell-not-ready .ws-vm-cell-select-row input,
.ws-vm-cell-ready .ws-vm-cell-select-row input {
opacity: 0.4;
cursor: not-allowed;
accent-color: #888;
}
.ws-vm-cell-not-ready .ws-vm-cell-select-row label,
.ws-vm-cell-ready .ws-vm-cell-select-row label {
color: var(--text3);
cursor: not-allowed;
}
/* ---- 分镜格横条 head：已选徽标 + 新建工程按钮 ---- */
.ws-vm-strip-head .ws-vm-strip-head-right {
display: inline-flex;
align-items: center;
gap: 8px;
}
.ws-vm-selected-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 9px;
border-radius: 999px;
font-size: 11.5px;
line-height: 1.4;
border: 1px solid color-mix(in srgb, var(--cyan, #5BC8FF) 45%, var(--border));
background: color-mix(in srgb, var(--cyan, #5BC8FF) 14%, var(--bg-card));
color: var(--cyan, #5BC8FF);
font-weight: 600;
}
.ws-vm-selected-badge.ws-vm-sel-empty {
opacity: 0.55;
color: var(--text3);
background: var(--bg-panel);
border-color: var(--border);
}
.ws-vm-new-project-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
padding: 4px 11px;
font-size: 12px;
font-weight: 600;
border-radius: 6px;
border: 1px solid color-mix(in srgb, var(--cyan, #5BC8FF) 50%, var(--border));
background: linear-gradient(135deg, color-mix(in srgb, var(--cyan, #5BC8FF) 30%, transparent),
color-mix(in srgb, var(--cyan, #5BC8FF) 12%, transparent));
color: var(--text);
cursor: pointer;
transition: all .15s ease;
}
.ws-vm-new-project-btn:hover:not(:disabled) {
filter: brightness(1.08);
border-color: var(--cyan, #5BC8FF);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--cyan, #5BC8FF) 25%, transparent);
}
.ws-vm-new-project-btn:disabled {
opacity: 0.45;
cursor: not-allowed;
background: var(--bg-panel);
filter: grayscale(0.4);
}
/* ---- 工程卡条容器（分镜格横条下方） ----
★ 16px 对齐基准：margin 左右 = 16（与 strip 外边 / 场景卡 padding / 工作条 padding 完全相同），
border 外边框 右外侧 像素共线 → 上红箭头 横条/场景卡 与 下红箭头 工程卡条 共一条竖线。*/
.ws-vm-projects-bar {
margin: 12px 16px 16px 16px !important;
padding: 14px 14px 16px 14px;
background: color-mix(in srgb, var(--purple, #9D4EDD) 6%, var(--bg-panel));
border: 1px solid color-mix(in srgb, var(--purple, #9D4EDD) 22%, var(--border));
border-radius: 10px;
overflow: visible;
display: block !important;
width: calc(100% - 32px) !important;
min-width: 0 !important;
max-width: calc(100% - 32px) !important;
box-sizing: border-box !important;
}
.ws-vm-projects-bar-label {
font-size: 12px;
font-weight: 600;
color: var(--text2);
margin: 0 4px 10px 4px; /* label 与滚动卡条之间拉开 2px，为卡头阴影再留一条缝 */
display: flex;
align-items: center;
justify-content: space-between;
}
.ws-vm-projects-bar-label span em {
color: var(--purple, #E9D8FF);
font-style: normal;
margin: 0 2px;
}
.ws-vm-projects-bar-scroll {
display: flex;
gap: 12px; /* 卡间距 10→12，避免 hover 时外发光/上移 2px 被邻卡阴影盖住 */
overflow-x: auto;
overflow-y: visible; /* ⭐ 关键：横向卡条只负责横向滚动，纵向可见，不会切掉卡片的上边阴影和 active 顶部高亮边 */
padding: 4px 2px 10px 2px; /* 上方 +2px，给卡头 2px 的 hover translateY(-2px)/active gold top border 预留空间，绝对不会再被上边缘截断 */
scrollbar-gutter: stable;
}
.ws-vm-projects-bar-empty {
padding: 14px 18px;
text-align: center;
font-size: 12px;
color: var(--text3);
border: 1px dashed var(--border);
border-radius: 8px;
background: var(--bg-card);
min-height: 64px;
display: flex;
align-items: center;
justify-content: center;
}
/* ---- 工程卡 ---- */
.cut-pro-project-card {
flex: 0 0 248px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 9px;
padding: 10px 11px;
display: flex;
flex-direction: column;
gap: 7px;
transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease, background .18s ease;
position: relative;
}
.cut-pro-project-card.cppc-clickable {
cursor: pointer;
outline: none;
user-select: none;
}
.cut-pro-project-card.cppc-clickable:hover {
background: color-mix(in srgb, var(--cyan, #5BC8FF) 7%, var(--bg-card));
transform: translateY(-2px);
border-color: color-mix(in srgb, var(--cyan, #5BC8FF) 65%, var(--border));
box-shadow: 0 7px 20px rgba(91, 200, 255, 0.20);
}
.cut-pro-project-card.cppc-clickable:focus-visible {
border-color: color-mix(in srgb, var(--cyan, #5BC8FF) 85%, var(--border));
box-shadow: 0 0 0 2px color-mix(in srgb, var(--cyan, #5BC8FF) 30%, transparent),
0 5px 16px rgba(91, 200, 255, 0.20);
}
.cut-pro-project-card.cppc-clickable:active { transform: translateY(0) scale(0.995); }
.cut-pro-project-card:hover {
transform: translateY(-2px);
border-color: color-mix(in srgb, var(--cyan, #5BC8FF) 55%, var(--border));
box-shadow: 0 5px 16px rgba(91, 200, 255, 0.15);
}
.cut-pro-project-card.active {
border-color: var(--gold, #FFD166);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold, #FFD166) 30%, transparent),
0 4px 14px rgba(255, 209, 102, 0.18);
}
.cut-pro-project-card .cppc-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 8px;
}
.cut-pro-project-card .cppc-name {
font-size: 13px;
font-weight: 700;
color: var(--text);
line-height: 1.35;
/* ⭐工程名单独占一行 + 撑满整张卡宽度（ID 在下一行），长名字可以用 2 行完整显示 */
width: 100%;
max-width: 100%;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
white-space: normal;
word-break: break-word;
}
/* 前缀/后缀分两行显示：locked prefix 一行 + 用户自定义 suffix 一行
用户没填后缀时，suffix 容器不渲染，整体只占 1 行高度，不会留白 */
.cut-pro-project-card .cppc-name.cppc-name--stacked {
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
gap: 3px;
-webkit-line-clamp: unset; /* 覆盖父级 display:-webkit-box/line-clamp，flex 下子行各自截断 */
-webkit-box-orient: unset;
word-break: normal;
white-space: normal;
}
.cut-pro-project-card .cppc-name.cppc-name--stacked .cppc-name-prefix {
font-size: 12.5px;
font-weight: 700;
line-height: 1.3;
color: var(--text);
/* 锁定前缀紫色底纹，强化"不可修改部分"的视觉锚定 */
padding: 2px 7px;
border-radius: 6px;
background: color-mix(in srgb, var(--purple, #9D4EDD) 12%, transparent);
border: 1px solid color-mix(in srgb, var(--purple, #9D4EDD) 30%, var(--border));
width: 100%;
max-width: 100%;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cut-pro-project-card.active .cppc-name.cppc-name--stacked .cppc-name-prefix {
background: color-mix(in srgb, var(--gold, #FFD166) 12%, transparent);
border-color: color-mix(in srgb, var(--gold, #FFD166) 40%, var(--border));
color: var(--gold, #FFD166);
}
.cut-pro-project-card .cppc-name.cppc-name--stacked .cppc-name-suffix {
font-size: 12.5px;
font-weight: 700;
line-height: 1.3;
color: var(--cyan, #5BC8FF);
padding: 2px 7px;
border-radius: 6px;
background: color-mix(in srgb, var(--cyan, #5BC8FF) 10%, transparent);
border: 1px dashed color-mix(in srgb, var(--cyan, #5BC8FF) 35%, var(--border));
width: 100%;
max-width: 100%;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cut-pro-project-card .cppc-id-row {
display: flex;
align-items: center;
gap: 6px;
padding-top: 1px;
margin-top: -2px;
}
.cut-pro-project-card .cppc-id {
display: inline-block;
flex: 1 1 auto;
padding: 2px 7px;
border-radius: 12px;
background: color-mix(in srgb, var(--cyan, #5BC8FF) 8%, var(--bg-panel));
border: 1px solid color-mix(in srgb, var(--cyan, #5BC8FF) 25%, var(--border));
font-size: 11px;
color: color-mix(in srgb, var(--cyan, #5BC8FF) 85%, var(--text2));
font-family: Consolas, Menlo, monospace;
line-height: 1.35;
text-align: left;
letter-spacing: 0.02em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cut-pro-project-card .cppc-meta {
display: flex;
flex-wrap: wrap;
gap: 4px 7px;
font-size: 11px;
color: var(--text2);
line-height: 1.5;
}
.cut-pro-project-card .cppc-meta .cppc-tag {
padding: 1px 6px;
border-radius: 4px;
background: color-mix(in srgb, var(--cyan, #5BC8FF) 10%, var(--bg-panel));
border: 1px solid var(--border);
}
.cut-pro-project-card .cppc-meta .cppc-tag.cppc-gold {
background: color-mix(in srgb, var(--gold, #FFD166) 13%, var(--bg-panel));
border-color: color-mix(in srgb, var(--gold, #FFD166) 35%, var(--border));
color: var(--gold, #FFD166);
}
.cut-pro-project-card .cppc-updated {
font-size: 10.5px;
color: var(--text3);
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 新的一行布局：左侧时间 / 右侧删除按钮；彻底避免"删除按钮单独占一行"浪费高度 */
.cut-pro-project-card .cppc-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-top: 2px;
}
.cut-pro-project-card .cppc-foot .cppc-actions {
flex: 0 0 auto;
display: inline-flex;
gap: 6px;
margin: 0;
padding: 0;
}
.cut-pro-project-card .cppc-actions {
display: flex;
gap: 7px;
margin-top: 2px;
}
.cut-pro-project-card .cppc-actions button {
padding: 5px 8px;
font-size: 11px;
font-weight: 600;
border-radius: 6px;
cursor: pointer;
border: 1px solid var(--border);
transition: filter .15s ease, transform .1s ease, border-color .15s ease;
white-space: nowrap;
}
.cut-pro-project-card .cppc-actions button:hover { transform: translateY(-1px); filter: brightness(1.08); }
.cut-pro-project-card .cppc-btn-open {
flex: 1 1 0;
background: linear-gradient(135deg, color-mix(in srgb, var(--cyan, #5BC8FF) 30%, transparent),
color-mix(in srgb, var(--cyan, #5BC8FF) 10%, transparent));
color: var(--text);
border-color: color-mix(in srgb, var(--cyan, #5BC8FF) 45%, var(--border));
}
.cut-pro-project-card .cppc-btn-del {
flex: 0 0 auto;
background: color-mix(in srgb, rgba(255, 88, 104, 0.9) 18%, var(--bg-panel));
color: #ff6677;
border-color: color-mix(in srgb, rgba(255, 88, 104, 0.9) 40%, var(--border));
min-width: auto;
padding: 4px 10px 4px 8px;
line-height: 1.25;
}
.cut-pro-project-card.cppc-clickable .cppc-actions {
flex: 0 0 auto;
}
.cut-pro-project-card.cppc-clickable .cppc-btn-del { flex: 0 0 auto; min-width: 72px; }
/* section-bar 上的自定义按钮尺寸对齐（复用 ws-generate-ref-btn） */
.ws-vm-back-btn {
margin-right: 8px;
}
/* ---- 分镜卡 4 宫格（场景/角色/服装/道具）资源图排版 ---- */
.ws-vm-cell-body {
position: relative;
}
.ws-vm-four-grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 3px;
width: 100%;
height: 100%;
padding: 3px;
box-sizing: border-box;
background: #0a0f1c;
}
.ws-vm-four-grid--for-video {
background: #070a14;
/* 视频态的 4 宫格做"半透明叠层"提示：hover 前提示有资源可看 */
}
.ws-vm-asset-cell {
position: relative;
overflow: hidden;
border-radius: 4px;
background: #111a2e;
border: 1px solid rgba(91, 200, 255, 0.18);
display: flex;
align-items: center;
justify-content: center;
min-height: 0;
}
.ws-vm-asset-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
background: #111a2e;
}
.ws-vm-asset-missing {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
color: rgba(255, 255, 255, 0.35);
background: repeating-linear-gradient(
135deg,
rgba(255, 255, 255, 0.02),
rgba(255, 255, 255, 0.02) 6px,
rgba(255, 255, 255, 0.05) 6px,
rgba(255, 255, 255, 0.05) 12px
);
}
.ws-vm-asset-cap {
position: absolute;
left: 2px;
right: 2px;
bottom: 2px;
padding: 1px 4px;
font-size: 10px;
line-height: 1.3;
color: #eaf6ff;
background: rgba(5, 10, 20, 0.72);
border-radius: 3px;
text-align: center;
backdrop-filter: blur(1px);
pointer-events: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: 600;
letter-spacing: 0.2px;
text-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
}
/* 就绪 / 未备 态：取消原 ::before 纯文案覆盖，改由 5 灯布局主导视觉；保留状态边框色 */
.ws-vm-cell-ready .ws-vm-cell-body,
.ws-vm-cell-not-ready .ws-vm-cell-body {
display: block;
border: none;
background: transparent;
}
.ws-vm-cell-ready .ws-vm-cell-body::before,
.ws-vm-cell-not-ready .ws-vm-cell-body::before {
content: none;
}
/* ---- 分镜卡 body 5 灯（场/角/服/道/提）排版 ---- */
.ws-vm-five-lights {
width: 100%;
height: 100%;
padding: 8px 8px 10px 8px;
box-sizing: border-box;
/* Grid 2 行 5 列：永远不 wrap，窄卡也必露 5 灯 */
display: grid !important;
grid-template-columns: repeat(5, minmax(0, 1fr));
grid-template-rows: auto minmax(0, 1fr);
grid-template-areas:
"sum sum sum sum sum"
"l0 l1 l2 l3 l4";
gap: 5px 4px;
background: #0a0f1c;
position: relative;
}
.ws-vm-five-lights > .ws-vm-lights-summary {
grid-area: sum;
/* 让"资源就绪 X/Y"胶囊左右边与下方 5 个灯位(l0 左 ~ l4 右)严格对齐：
grid-area sum 跨 5 列 = 正好覆盖 l0..l4 的总宽度，stretch 填满就与 5 灯左右边严丝合缝 */
justify-self: stretch;
align-self: start;
width: 100%;
margin: 0;
/* 内部继续胶囊式：左右有 padding，但容器与 5 灯左右边一致 */
box-sizing: border-box;
justify-content: flex-start;
max-width: none;
}
/* 5 个灯按 DOM 顺序依次落到 l0..l4（结构：summary-div + 5 × light-item-div） */
.ws-vm-five-lights > :nth-child(2):is(.ws-vm-light-item) { grid-area: l0; }
.ws-vm-five-lights > :nth-child(3):is(.ws-vm-light-item) { grid-area: l1; }
.ws-vm-five-lights > :nth-child(4):is(.ws-vm-light-item) { grid-area: l2; }
.ws-vm-five-lights > :nth-child(5):is(.ws-vm-light-item) { grid-area: l3; }
.ws-vm-five-lights > :nth-child(6):is(.ws-vm-light-item) { grid-area: l4; }
/* fallback：所有 light-item 默认进入第二行 auto 排（兼容浏览器不支持 :is） */
@supports not (selector(.a:is(.b))) {
.ws-vm-five-lights > .ws-vm-light-item:nth-of-type(1) { grid-area: l0; }
.ws-vm-five-lights > .ws-vm-light-item:nth-of-type(2) { grid-area: l1; }
.ws-vm-five-lights > .ws-vm-light-item:nth-of-type(3) { grid-area: l2; }
.ws-vm-five-lights > .ws-vm-light-item:nth-of-type(4) { grid-area: l3; }
.ws-vm-five-lights > .ws-vm-light-item:nth-of-type(5) { grid-area: l4; }
}
.ws-vm-five-lights--for-video {
background: #070a14;
border-top: 2px solid color-mix(in srgb, var(--cyan, #5BC8FF) 65%, transparent);
padding-top: 8px;
}
.ws-vm-five-lights--all-ok {
background: radial-gradient(120% 90% at 50% -10%,
color-mix(in srgb, var(--green, #39FF14) 18%, transparent) 0%,
color-mix(in srgb, var(--green, #39FF14) 6%, transparent) 55%,
#0a0f1c 100%);
}
.ws-vm-five-lights--has-skip {
background: radial-gradient(120% 90% at 50% -10%,
color-mix(in srgb, #f6c445 16%, transparent) 0%,
color-mix(in srgb, #f6c445 5%, transparent) 55%,
#0a0f1c 100%);
}
.ws-vm-cell-ready .ws-vm-five-lights {
border-top: 2px solid color-mix(in srgb, var(--green, #39FF14) 60%, transparent);
padding-top: 8px;
}
.ws-vm-cell-not-ready .ws-vm-five-lights {
background: radial-gradient(120% 90% at 50% -10%,
color-mix(in srgb, var(--purple, #9D4EDD) 16%, transparent) 0%,
color-mix(in srgb, var(--purple, #9D4EDD) 5%, transparent) 55%,
#0a0f1c 100%);
border-top: 2px dashed color-mix(in srgb, var(--purple, #9D4EDD) 60%, transparent);
padding-top: 8px;
}
/* 5 灯摘要：顶部「全部就绪 / 待完善 / 部分正常缺少」 —— 字体整体缩小，窄卡不溢出 */
.ws-vm-lights-summary {
padding: 3px 10px;
border-radius: 999px;
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.2px;
border: 1px solid var(--border);
display: inline-flex;
align-items: center;
gap: 5px;
line-height: 1.3;
flex-wrap: nowrap;
justify-content: center;
overflow: hidden;
text-overflow: ellipsis;
}
.ws-vm-lights-sub {
font-weight: 400;
font-size: 9.5px;
opacity: 0.85;
color: inherit;
padding: 1px 4px 1px 5px;
border-left: 1px solid rgba(255, 255, 255, 0.22);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 170px;
min-width: 0;
}
.ws-vm-lights-summary--ok {
background: color-mix(in srgb, var(--green, #39FF14) 14%, #06142a);
border-color: color-mix(in srgb, var(--green, #39FF14) 45%, var(--border));
color: color-mix(in srgb, var(--green, #39FF14) 92%, #fff);
box-shadow: 0 0 12px rgba(57, 255, 20, 0.18);
}
.ws-vm-lights-summary--no {
background: color-mix(in srgb, #ff6677 14%, #06142a);
border-color: color-mix(in srgb, #ff6677 46%, var(--border));
color: #ffd3da;
box-shadow: 0 0 12px rgba(255, 102, 119, 0.2);
}
.ws-vm-lights-summary--skip {
background: color-mix(in srgb, #f6c445 13%, #06142a);
border-color: color-mix(in srgb, #f6c445 45%, var(--border));
color: #ffecc6;
box-shadow: 0 0 10px rgba(246, 196, 69, 0.18);
}
/* 灯位小格：在 Grid 单元格内完全铺满，min-width=0 保证不撑破 */
.ws-vm-light-item {
width: 100%;
height: 100%;
min-width: 0;
min-height: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
padding: 4px 2px;
border-radius: 7px;
border: 1px solid rgba(91, 200, 255, 0.15);
background: rgba(17, 26, 46, 0.75);
overflow: hidden;
}
/* 圆圈灯：整体缩小到 16px，窄卡也 5 列一行排满不再 wrap */
.ws-vm-light-dot {
display: inline-block;
width: 16px;
height: 16px;
border-radius: 999px;
flex-shrink: 0;
position: relative;
}
.ws-vm-light-dot::after {
content: "";
position: absolute;
inset: -2px;
border-radius: 999px;
border: 1px solid transparent;
pointer-events: none;
}
.ws-vm-light-dot--ok {
background: radial-gradient(circle at 30% 30%,
#d2ffc6 0%,
#6aff62 35%,
#1fbf34 70%,
#0c5d18 100%);
box-shadow:
0 0 8px rgba(57, 255, 20, 0.7),
inset 0 -2px 3px rgba(0, 0, 0, 0.3),
inset 0 2px 3px rgba(255, 255, 255, 0.35);
}
.ws-vm-light-dot--ok::after {
border-color: color-mix(in srgb, var(--green, #39FF14) 55%, transparent);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--green, #39FF14) 15%, transparent) inset;
}
.ws-vm-light-dot--no {
background: radial-gradient(circle at 30% 30%,
#ffd2d6 0%,
#ff7585 35%,
#cc2f40 70%,
#6f1220 100%);
box-shadow:
0 0 8px rgba(255, 72, 88, 0.72),
inset 0 -2px 3px rgba(0, 0, 0, 0.3),
inset 0 2px 3px rgba(255, 255, 255, 0.35);
}
.ws-vm-light-dot--no::after {
border-color: color-mix(in srgb, #ff5a6a 55%, transparent);
box-shadow: 0 0 0 1px color-mix(in srgb, #ff5a6a 15%, transparent) inset;
}
/* 🟡 黄灯：本分镜"正常不需要"该项（visible=false） */
.ws-vm-light-dot--skip {
background: radial-gradient(circle at 30% 30%,
#fff4cf 0%,
#ffd56a 35%,
#d79b13 70%,
#6d4706 100%);
box-shadow:
0 0 8px rgba(246, 196, 69, 0.65),
inset 0 -2px 3px rgba(0, 0, 0, 0.3),
inset 0 2px 3px rgba(255, 255, 255, 0.35);
opacity: 0.96;
}
.ws-vm-light-dot--skip::after {
border-color: color-mix(in srgb, #f6c445 55%, transparent);
box-shadow: 0 0 0 1px color-mix(in srgb, #f6c445 16%, transparent) inset;
}
/* 灯位下方字标（🏠场 / 🎭角 / 👕服 / 📦道 / 📝提）—— 缩小确保 5 列一行排满 */
.ws-vm-light-label {
font-size: 9.5px;
font-weight: 600;
color: #e8f2ff;
letter-spacing: 0.2px;
text-shadow: 0 0 4px rgba(0, 0, 0, 0.55);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
/* 每个灯位格子按灯色做差异化边框（方便一眼区分 ok/no/skip） */
.ws-vm-light-item--ok {
border-color: color-mix(in srgb, var(--green, #39FF14) 38%, rgba(91, 200, 255, 0.15)) !important;
background: linear-gradient(180deg,
color-mix(in srgb, var(--green, #39FF14) 10%, rgba(17, 26, 46, 0.78)) 0%,
color-mix(in srgb, var(--green, #39FF14) 4%, rgba(17, 26, 46, 0.92)) 100%) !important;
}
.ws-vm-light-item--no {
border-color: color-mix(in srgb, #ff5a6a 40%, rgba(91, 200, 255, 0.15)) !important;
background: linear-gradient(180deg,
color-mix(in srgb, #ff5a6a 10%, rgba(17, 26, 46, 0.78)) 0%,
color-mix(in srgb, #ff5a6a 4%, rgba(17, 26, 46, 0.92)) 100%) !important;
}
.ws-vm-light-item--skip {
border-color: color-mix(in srgb, #f6c445 38%, rgba(91, 200, 255, 0.15)) !important;
background: linear-gradient(180deg,
color-mix(in srgb, #f6c445 9%, rgba(17, 26, 46, 0.78)) 0%,
color-mix(in srgb, #f6c445 3%, rgba(17, 26, 46, 0.92)) 100%) !important;
opacity: 0.95;
}
.ws-vm-light-item--skip .ws-vm-light-label {
opacity: 0.8;
}
/* 按 cell 状态做整体底色（在 item--ok/no/skip 基础上再叠加轻量色） */
.ws-vm-cell-ready .ws-vm-five-lights {
border-top-color: color-mix(in srgb, var(--green, #39FF14) 60%, transparent);
}
.ws-vm-cell-not-ready .ws-vm-five-lights {
border-top-color: color-mix(in srgb, var(--purple, #9D4EDD) 60%, transparent);
}
.ws-vm-cell-video .ws-vm-five-lights {
border-top-color: color-mix(in srgb, var(--cyan, #5BC8FF) 65%, transparent);
}
/* 视频态 hover 时给卡片外层额外描边，让"正在预览"更明显 */
.ws-vm-cell.ws-vm-cell-video:hover {
border-color: var(--cyan, #5BC8FF);
box-shadow: 0 4px 18px rgba(91, 200, 255, 0.28), 0 0 0 1px rgba(91, 200, 255, 0.15);
}
/* cell body：5 灯容器占满可用纵向空间（flex 1 避免被 select-row / foot 挤扁），aspect 调 16:8 更矮胖更适合横排 5 灯
气泡现在是 body 级全局单例，这里不再需要 position: relative */
.ws-vm-cell-body {
aspect-ratio: 16 / 8;
min-height: 150px;
flex: 1 1 auto;
display: block;
}
/* =========================================================
✂️ 专业剪辑工具条（Cut Pro） — 完全命名空间 cut-pro-*
========================================================= */
/* ---- 顶栏 section bar ---- */
.cut-pro-topbar {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 16px;
background: linear-gradient(90deg, rgba(91,200,255,0.08), rgba(157,78,221,0.08));
border-bottom: 1px solid var(--border);
}
.cut-pro-topbar-title {
font-size: 14px;
font-weight: 700;
letter-spacing: 0.5px;
color: var(--text);
display: flex;
align-items: center;
gap: 8px;
flex: 0 0 auto;
}
.cut-pro-topbar-title::before {
content: "✂️";
filter: drop-shadow(0 0 4px rgba(91,200,255,0.6));
}
.cut-pro-topbar-badges {
display: flex;
gap: 8px;
align-items: center;
flex: 1;
}
.cut-pro-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 10px;
border-radius: 999px;
font-size: 11px;
line-height: 1.4;
border: 1px solid var(--border);
background: color-mix(in srgb, var(--cyan) 10%, var(--bg-card));
color: var(--text2);
}
.cut-pro-badge.cut-pro-badge-green {
background: color-mix(in srgb, var(--green) 14%, var(--bg-card));
border-color: color-mix(in srgb, var(--green) 40%, var(--border));
color: var(--green);
}
.cut-pro-badge.cut-pro-badge-gold {
background: color-mix(in srgb, var(--gold) 14%, var(--bg-card));
border-color: color-mix(in srgb, var(--gold) 40%, var(--border));
color: var(--gold);
}
.cut-pro-badge.cut-pro-badge-purple {
background: color-mix(in srgb, var(--purple) 14%, var(--bg-card));
border-color: color-mix(in srgb, var(--purple) 40%, var(--border));
color: #E9D8FF;
}
.cut-pro-topbar-actions {
display: flex;
gap: 8px;
align-items: center;
}
/* ⭐ 精剪工作室标题行设置组件 */
.cut-pro-panel-settings {
display: flex;
gap: 6px;
align-items: center;
flex: 1;
justify-content: center;
padding: 0 10px;
}
.cut-pro-panel-head .cut-pro-panel-title {
flex-shrink: 0;
}
.cut-pro-panel-head .cut-pro-panel-actions {
flex-shrink: 0;
}
.cut-pro-topbar-set-item {
display: flex;
align-items: center;
gap: 0;
}
/* 标签样式 - 显示标签 */
.cut-pro-topbar-set-label {
font-size: 11px;
color: var(--text3, #89A0BF);
white-space: nowrap;
line-height: 1;
}
.cut-pro-topbar-set-ctl {
height: 24px;
min-height: 24px;
max-height: 24px;
font-size: 11px;
line-height: 1;
padding: 2px 6px;
background: rgba(30, 40, 60, 0.9);
border: 1px solid rgba(100, 120, 180, 0.3);
border-radius: 4px;
color: var(--text2, #C0D0E8);
outline: none;
box-sizing: border-box;
min-width: auto;
max-width: none;
cursor: pointer;
}
.cut-pro-topbar-set-ctl:focus {
border-color: var(--cyan, #5BC8FF);
box-shadow: 0 0 0 1px rgba(91, 200, 255, 0.3);
}
.cut-pro-topbar-set-ctl:hover {
border-color: rgba(100, 120, 180, 0.5);
background: rgba(40, 50, 70, 0.9);
}
/* select箭头样式 */
.cut-pro-topbar-set-ctl.select {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%2389A0BF' d='M5 6L0 0h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 5px center;
padding-right: 16px;
}
/* input[type=number] 隐藏箭头 */
.cut-pro-topbar-set-ctl[type="number"] {
width: 50px;
text-align: center;
}
.cut-pro-topbar-set-ctl[type="number"]::-webkit-inner-spin-button,
.cut-pro-topbar-set-ctl[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.cut-pro-topbar-set-ctl[type="number"] {
-moz-appearance: textfield;
}
/* ⭐ 预览区域右下角素材信息 - 放在播放器控件右侧 */
.st-pv-asset-info {
position: absolute;
bottom: 8px;
right: 60px;
background: rgba(0, 0, 0, 0.7);
border: 1px solid rgba(100, 120, 180, 0.3);
border-radius: 3px;
padding: 2px 6px;
font-size: 10px;
line-height: 1.3;
color: var(--text2, #C0D0E8);
display: flex;
align-items: center;
gap: 3px;
pointer-events: none;
z-index: 20;
max-width: 45%;
backdrop-filter: blur(4px);
white-space: nowrap;
}
.st-pv-asset-label {
color: var(--text3, #89A0BF);
font-weight: 400;
}
.st-pv-asset-name {
color: var(--cyan, #5BC8FF);
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 200px;
}
.st-pv-asset-dot {
color: var(--text3, #89A0BF);
margin: 0 2px;
}
.st-pv-asset-dur {
color: var(--text3, #89A0BF);
font-weight: 400;
}
.st-pv-asset-dur-val {
color: var(--text2, #C0D0E8);
font-variant-numeric: tabular-nums;
}
.cut-pro-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
padding: 6px 14px;
border-radius: 6px;
background: linear-gradient(135deg, #5BC8FF 0%, #3B82F6 100%);
color: #06142a;
font-size: 12px;
font-weight: 600;
border: none;
cursor: pointer;
transition: transform 0.12s, filter 0.2s, box-shadow 0.2s;
box-shadow: 0 0 0 1px rgba(91,200,255,0.25);
white-space: nowrap;
}
.cut-pro-btn:hover {
filter: brightness(1.1);
transform: translateY(-1px);
box-shadow: 0 3px 10px rgba(91,200,255,0.3);
}
.cut-pro-btn:disabled {
opacity: 0.45;
cursor: not-allowed;
transform: none;
filter: grayscale(0.4);
}
.cut-pro-btn.cut-pro-btn-sm { padding: 4px 10px; font-size: 11px; }
.cut-pro-btn.cut-pro-btn-xs { padding: 3px 8px; font-size: 10px; }
.cut-pro-btn.cut-pro-btn-green {
background: linear-gradient(135deg, #39FF14 0%, #14c07c 100%);
color: #05180a;
box-shadow: 0 0 0 1px rgba(57,255,20,0.3);
}
.cut-pro-btn.cut-pro-btn-gold {
background: linear-gradient(135deg, #FFD166 0%, #f59e0b 100%);
color: #2a1a00;
box-shadow: 0 0 0 1px rgba(255,209,102,0.3);
}
.cut-pro-btn.cut-pro-btn-purple {
background: linear-gradient(135deg, #9D4EDD 0%, #6d28d9 100%);
color: #fff;
box-shadow: 0 0 0 1px rgba(157,78,221,0.3);
}
.cut-pro-btn.cut-pro-btn-red {
background: linear-gradient(135deg, #ff4d6d 0%, #c9184a 100%);
color: #fff;
box-shadow: 0 0 0 1px rgba(255,77,109,0.3);
}
.cut-pro-btn.cut-pro-btn-ghost {
background: transparent;
color: var(--text);
border: 1px solid var(--border);
box-shadow: none;
}
.cut-pro-btn.cut-pro-btn-ghost:hover {
border-color: var(--cyan);
background: color-mix(in srgb, var(--cyan) 6%, var(--bg-card));
}
/* ---- 主布局：Timeline 占整页宽度（最下面）；音频字幕最右列；素材库+PipelineTab最左列；工作室中列 ----
* 采用 grid-column / grid-row 列号定位，100% 确定性避免 grid-template-areas 与旧 class 的隐式跨列/跨行冲突。
* 上排（从左 → 右）：
* Col1 (480px 宽 · 最左边) → 📚 素材库 ↔ ⏱️ 后台任务 · Pipeline（同一区域 Tab 切换合并）
* Col2 (1fr 弹性 · 中间) → 精剪工作室参数 + 预览视频
* Col3 (300px 窄 · 最右边) → 🔊 音频 / 💬 字幕（整列撑满）
* 下排（最下面）：Timeline 横跨 3 列 = 整个界面宽度
*/
.cut-pro-layout {
padding: 12px 16px 16px 16px;
display: flex;
flex-direction: column;
gap: 0;
min-height: 992px;
width: 100%;
box-sizing: border-box;
}
.cut-pro-toprow {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 12px;
width: 100%;
min-height: 500px;
box-sizing: border-box;
align-items: stretch;
flex: 1 1 0% !important;
height: 0 !important;
max-height: calc(100vh - 260px) !important;
}
/* --- 上排：3 列依次放 库 / Studio / 右列容器 --- */
.cut-pro-lib {
flex: 0 0 420px !important;
min-width: 280px !important;
max-width: 420px !important;
min-height: 500px;
height: auto;
overflow: hidden;
}
/* 左栏 Panel 容器：整体高度对齐 cut-pro-lib，外层不允许滚，滚动只发生在 section 内的 grid */
.cut-pro-lib > .cut-pro-panel {
height: 100% !important; /* 吃满外层 1120px */
min-height: 0 !important;
max-height: 100% !important;
overflow: hidden !important; /* ⭐ Panel 绝不滚 */
}
.cut-pro-lib > .cut-pro-panel > .cut-pro-panel-body {
flex: 1 1 0% !important; /* ⭐ FIX12：使用flex填满父容器剩余空间，而非固定像素 */
height: 0 !important; /* ⭐ FIX12：flex:1需要height:0才能正确计算 */
min-height: 0 !important;
max-height: none !important; /* ⭐ FIX12：取消硬编码calc(1120px - 56px) */
overflow: hidden !important; /* ⭐⭐⭐ 核心修复：把之前的 overflow:auto 改成 hidden！
之前这里 overflow:auto 导致内容超过时「整个左栏面板一起滚」，
现在改成 panel-body 自身禁止滚动 → 滚动只能发生在 section 内部 (grid 层) */
}
.cut-pro-studio {
flex: 1 1 auto;
min-width: 0;
max-width: 100%;
min-height: 500px;
height: auto;
overflow: hidden;
}
.cut-pro-rightcol {
flex: 0 0 330px !important;
min-width: 240px !important;
max-width: 330px !important;
min-height: 500px;
height: 100%;
display: flex;
flex-direction: column;
gap: 0;
box-sizing: border-box;
overflow: hidden;
align-self: stretch;
max-height: calc(100vh - 260px) !important;
}
.cut-pro-rightcol > .cut-pro-audiosubs {
flex: 1 1 auto;
min-height: 0;
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
}
.cut-pro-as-body {
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
}
/* --- 下排：时间线 flex-basis:100% 保证换到第二行 --- */
.cut-pro-timeline {
flex: 0 0 100%;
flex-basis: 100%;
min-height: 360px;
width: 100%;
box-sizing: border-box;
margin-top: 12px;
}
/* 清空旧版独立 grid-area 绑定（Pipeline/AudioSubs 现在不是 grid 主单元格） */
.cut-pro-audiosubs,
.cut-pro-pipeline {
grid-area: auto !important;
grid-column: auto !important;
grid-row: auto !important;
}
.cut-pro-panel {
background: var(--bg-panel);
border: 1px solid var(--border);
border-radius: 10px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.cut-pro-panel-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 5px 10px;
background: color-mix(in srgb, var(--cyan) 6%, var(--bg-panel));
border-bottom: 1px solid var(--border);
font-size: 12px;
font-weight: 600;
color: var(--text);
letter-spacing: 0.3px;
}
.cut-pro-panel-head .cut-pro-panel-title {
display: flex;
align-items: center;
gap: 6px;
}
.cut-pro-panel-head .cut-pro-panel-title::before {
content: "";
display: inline-block;
width: 4px;
height: 14px;
border-radius: 2px;
background: linear-gradient(180deg, var(--cyan), var(--purple));
}
.cut-pro-panel-head .cut-pro-panel-actions {
display: flex;
align-items: center;
gap: 2px;
}
.cut-pro-panel-head .cut-pro-panel-actions > .cut-pro-tl-icon-btn {
margin: 0 1px;
}
.cut-pro-panel-body {
flex: 1;
overflow: auto;
padding: 0;
min-height: 0;
}
/* ---- Lib 库（左栏：卡片两分组「原始素材 / 生成素材」） ----
旧目录节点样式（cut-pro-lib-node）保留兼容，但新渲染不再使用。 */
/* [旧 grid-area 已迁移到 17028~17085 的显式 grid-column/row 定位区] cut-pro-lib */
.cut-pro-lib { /* 新布局定义已覆盖：grid-column:1 grid-row:1 */ }
.cut-pro-lib-tree {
display: flex;
flex-direction: column;
gap: 2px !important;
font-size: 12px;
padding: 0;
height: 100% !important;
max-height: 100% !important;
min-height: 0 !important;
box-sizing: border-box !important;
overflow: auto !important;
overflow-x: hidden !important;
}
/* ⭐ FIX11：需求1 — 原始素材 ▲▼ 收放按钮 永久隐藏（即使有残留 HTML 也不可见不可点）*/
.cpl-section-toggle,
.cpl-toggle-ico {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
width: 0 !important;
height: 0 !important;
padding: 0 !important;
margin: 0 !important;
pointer-events: none !important;
}
/* ---- ①/② 两大分组的 section 容器（回归 block，简单可靠，避免 flex 链断） ---- */
.cpl-section {
border: 1px solid var(--border);
background: var(--bg-card);
border-radius: 6px;
padding: 0 2px 0 2px;
box-shadow: 0 1px 0 rgba(0,0,0,0.06);
box-sizing: border-box !important;
display: block !important;
overflow: hidden !important;
width: 100% !important;
position: static !important;
clear: both !important;
}
/* ① 原始素材 section：自然高度，末尾加 2px 额外 margin 与生成素材再拉开一点，与 gap 成双保险 */
.cpl-section.cpl-section-originals {
border-color: color-mix(in srgb, var(--cyan,#5BC8FF) 30%, var(--border));
background: color-mix(in srgb, var(--cyan,#5BC8FF) 4%, var(--bg-card));
flex: 0 0 auto !important;
margin-bottom: 2px !important;
}
/* ② 上传素材 section：自然高度，和原始素材同样风格 */
.cpl-section.cpl-section-others {
border-color: color-mix(in srgb, var(--purple,#9D4EDD) 30%, var(--border));
background: color-mix(in srgb, var(--purple,#9D4EDD) 4%, var(--bg-card));
flex: 0 0 auto !important;
margin-top: 2px !important;
}
/* ② 生成素材 section：允许无限增长，不限制高度 */
.cpl-section.cpl-section-derived {
border-color: color-mix(in srgb, var(--purple,#9D4EDD) 28%, var(--border));
background: color-mix(in srgb, var(--purple,#9D4EDD) 4%, var(--bg-card));
flex: 0 0 auto !important; /* 不弹性伸缩，按内容高度 */
min-height: 0 !important;
overflow: visible !important; /* 不裁剪，允许溢出 */
max-height: none !important; /* 不限制最大高度 */
margin-top: 2px !important;
display: block !important; /* 改为 block，不使用 flex column */
}
.cpl-section.collapsed {
padding: 0 2px 0 2px !important;
max-height: none !important;
min-height: 0 !important;
height: auto !important;
}
.cpl-section.cpl-section-derived > .cpl-section-body {
display: block !important; /* 改为 block，按内容高度 */
overflow: visible !important; /* 不裁剪，允许溢出 */
flex: 0 0 auto !important; /* 不弹性伸缩，按内容高度 */
min-height: 0 !important;
max-height: none !important; /* 不限制最大高度 */
height: auto !important; /* 按内容高度 */
}
.cpl-section.cpl-section-derived .cpl-section-desc {
display: block !important;
margin-bottom: 4px !important;
}
.cpl-section-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 4px;
margin-bottom: 0;
}
/* 右侧徽标 + 收放箭头容器 */
.cpl-section-head-right {
display: inline-flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
min-width: 0;
}
/* 原始素材区收放箭头按钮（▲▼） */
.cpl-section-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
min-width: 22px;
max-width: 22px;
padding: 0;
margin: 0;
border: 1px solid color-mix(in srgb, var(--cyan,#5BC8FF) 35%, var(--border));
border-radius: 6px;
background: linear-gradient(135deg,
color-mix(in srgb, var(--cyan,#5BC8FF) 22%, transparent),
color-mix(in srgb, var(--cyan,#5BC8FF) 8%, transparent));
color: color-mix(in srgb, var(--cyan,#5BC8FF) 92%, #fff);
cursor: pointer;
line-height: 1;
box-sizing: border-box !important;
transition: transform .15s ease, background .15s ease, border-color .15s ease;
user-select: none;
}
.cpl-section-toggle:hover {
border-color: color-mix(in srgb, var(--cyan,#5BC8FF) 70%, var(--border));
background: linear-gradient(135deg,
color-mix(in srgb, var(--cyan,#5BC8FF) 40%, transparent),
color-mix(in srgb, var(--cyan,#5BC8FF) 18%, transparent));
transform: translateY(-1px);
}
.cpl-section-toggle:active { transform: translateY(0) scale(0.95); }
.cpl-toggle-ico {
font-size: 12px;
font-weight: 800;
line-height: 1;
letter-spacing: 0;
display: inline-block;
vertical-align: middle;
}
/* body 包裹层：用于折叠动画 */
.cpl-section-body {
overflow: visible;
max-height: none;
transition: none !important;
opacity: 1;
-webkit-transition: none !important;
animation: none !important;
-webkit-animation: none !important;
}
/* collapsed 后 body 完全隐藏，section 只剩 head */
.cpl-section.collapsed > .cpl-section-body {
max-height: 0 !important;
opacity: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
pointer-events: none !important;
}
.cpl-section.collapsed {
padding-bottom: 8px !important;
}
/* originals 折叠态：只显示标题 + ▼ 展开箭头；隐藏徽标 / 灰字提示 / 其它任何元素 */
.cpl-section.cpl-section-originals.collapsed .cpl-section-badge {
display: none !important;
}
.cpl-section.cpl-section-originals.collapsed .cpl-section-head-right::before {
content: "" !important;
display: none !important;
}
.cpl-section-title {
font-size: 13px;
font-weight: 800;
letter-spacing: .02em;
color: var(--text);
line-height: 1.3;
}
.cpl-section-originals .cpl-section-title { color: color-mix(in srgb, var(--cyan,#5BC8FF) 70%, var(--text)); }
.cpl-section-derived .cpl-section-title { color: color-mix(in srgb, var(--purple,#9D4EDD) 75%, var(--text)); }
.cpl-count {
display: inline-block;
min-width: 22px;
padding: 1px 7px;
margin-left: 6px;
border-radius: 999px;
background: var(--bg-panel);
border: 1px solid var(--border);
font-size: 10.5px;
font-weight: 700;
color: var(--text2);
text-align: center;
line-height: 1.4;
vertical-align: middle;
}
.cpl-section-badge {
font-size: 10.5px;
padding: 2px 7px;
border-radius: 8px;
border: 1px dashed var(--border);
color: var(--text3);
background: rgba(255,255,255,0.02);
letter-spacing: .04em;
white-space: nowrap;
}
.cpl-section-desc {
font-size: 11.5px;
color: var(--text3);
line-height: 1.45;
margin: 2px 2px 10px 2px;
}
.cpl-empty-row {
padding: 14px 16px;
text-align: center;
font-size: 12px;
color: var(--text3);
border: 1px dashed var(--border);
border-radius: 8px;
background: rgba(255,255,255,0.015);
}
.cpl-empty-row.cpl-empty-row--soft { opacity: .85; }
/* ---- 卡 1-2 列自适应：
FIX9：
- 原始素材 ★强制 1 排×2 列(最多2卡可见)★：超出横向滚动，永远1排；
- 生成素材 ★强制 2 列×3 排(最多6卡可见)★：超出纵向滚动，永远3排；*/
.cpl-card-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
/* ═══════════════════════════════════════════════════════════════
FIX9：原始素材滚动区 — 固定 1 排 × 2 列（=2素材），超出横向滚动
═══════════════════════════════════════════════════════════════ */
html body .cpl-section-originals .cpl-card-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
grid-template-rows: 72px !important;
grid-auto-rows: 0 !important;
grid-auto-flow: column !important;
grid-auto-columns: minmax(0, 1fr) !important;
height: 72px !important;
max-height: 72px !important;
min-height: 72px !important;
gap: 8px !important;
overflow-x: scroll !important;
overflow-y: hidden !important;
padding-right: 4px !important;
scrollbar-width: thin !important;
align-content: start !important;
justify-content: start !important;
box-sizing: border-box !important;
}
/* ID 级再兜底：压过 style.css 原有 L17535 */
html body #cutProOriginalsSection .cpl-card-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
grid-template-rows: 72px !important;
grid-auto-rows: 0 !important;
grid-auto-flow: column !important;
height: 72px !important;
max-height: 72px !important;
min-height: 72px !important;
overflow-x: scroll !important;
overflow-y: hidden !important;
}
/* 窄屏 @1280：原始仍 1 排，不变 2 排 */
@media (max-width: 1280px) {
html body .cpl-section-originals .cpl-card-grid,
html body #cutProOriginalsSection .cpl-card-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
grid-template-rows: 72px !important;
grid-auto-rows: 0 !important;
max-height: 72px !important;
height: 72px !important;
min-height: 72px !important;
overflow-x: scroll !important;
overflow-y: hidden !important;
}
}
/* 原始素材滚动条：横向细青色 */
.cpl-section-originals .cpl-card-grid::-webkit-scrollbar { height: 6px; width: 6px; }
.cpl-section-originals .cpl-card-grid::-webkit-scrollbar-thumb {
background: color-mix(in srgb, var(--cyan,#5BC8FF) 35%, transparent);
border-radius: 3px;
}
/* ═══════════════════════════════════════════════════════════════
FIX9：原始素材区 — 不可缩放 / 不可折叠（锁死固定高度 & flex 权 & 禁止 resize）
═══════════════════════════════════════════════════════════════ */
html body section#cutProOriginalsSection,
html body .cpl-section-originals {
overflow: hidden !important;
flex: 0 0 auto !important; /* flex 权归零，不再参与父容器等比缩放 */
resize: none !important; /* 彻底禁任何浏览器原生 resize 拖拽 */
max-height: none !important;
min-height: 0 !important;
}
html body #cutProOriginalsSection > .cpl-section-body,
html body .cpl-section-originals > .cpl-section-body {
height: 80px !important;
max-height: 80px !important;
min-height: 80px !important;
overflow: hidden !important;
box-sizing: border-box !important;
flex: 0 0 auto !important;
resize: none !important;
padding-top: 4px !important;
padding-bottom: 4px !important;
}
/* 彻底废掉 collapsed 折叠：无论是否有 orig-collapsed class，都保持 1 排尺寸 */
html body .cut-pro-lib-tree.orig-collapsed #cutProOriginalsSection > .cpl-section-body,
html body.cpl-orig-collapsed #cutProOriginalsSection > .cpl-section-body,
html body .cut-pro-lib-tree.orig-collapsed .cpl-section-originals > .cpl-section-body,
html body.cpl-orig-collapsed .cpl-section-originals > .cpl-section-body {
height: 80px !important;
max-height: 80px !important;
min-height: 80px !important;
padding-top: 4px !important;
padding-bottom: 4px !important;
overflow: hidden !important;
flex: 0 0 auto !important;
resize: none !important;
}
/* ═══════════════════════════════════════════════════════════════
FIX9：生成素材滚动区 — 固定 3 排 × 2 列（=6素材），超出纵向滚动
═══════════════════════════════════════════════════════════════ */
html body .cpl-card-grid.cpl-card-grid--derived {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
grid-template-rows: repeat(3, 72px) !important;
grid-auto-rows: 72px !important;
gap: 8px !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow-y: auto !important;
overflow-x: hidden !important;
padding-right: 4px !important;
padding-bottom: 0 !important;
align-content: start !important;
scrollbar-width: thin !important;
display: grid !important;
flex: 1 1 auto !important;
box-sizing: border-box !important;
}
html body #cutProDerivedGrid {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
grid-template-rows: none !important; /* 允许无限增长，不固定行数 */
grid-auto-rows: 72px !important;
grid-auto-flow: row !important;
gap: 12px !important;
height: auto !important;
max-height: none !important;
min-height: 0 !important;
overflow: visible !important; /* 不内部滚动 */
padding-right: 6px !important;
align-content: start !important;
box-sizing: content-box !important;
flex: none !important;
}
/* FIX9：收拢态也允许无限增长 */
html body .cut-pro-lib-tree.orig-collapsed .cpl-card-grid.cpl-card-grid--derived,
html body.cpl-orig-collapsed .cpl-card-grid.cpl-card-grid--derived {
grid-template-rows: none !important;
height: auto !important;
max-height: none !important;
min-height: 0 !important;
}
html body .cut-pro-lib-tree.orig-collapsed #cutProDerivedGrid,
html body.cpl-orig-collapsed #cutProDerivedGrid {
grid-template-rows: none !important;
height: auto !important;
max-height: none !important;
min-height: 0 !important;
overflow: visible !important;
}
/* 窄屏 @1280：派生也允许无限增长 */
@media (max-width: 1280px) {
html body .cpl-card-grid.cpl-card-grid--derived {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
grid-template-rows: none !important;
height: auto !important;
max-height: none !important;
min-height: 0 !important;
}
html body .cut-pro-lib-tree.orig-collapsed .cpl-card-grid.cpl-card-grid--derived,
html body.cpl-orig-collapsed .cpl-card-grid.cpl-card-grid--derived {
grid-template-rows: none !important;
height: auto !important;
max-height: none !important;
min-height: 0 !important;
}
}
/* 派生滚动条样式（保留紫色） */
.cpl-card-grid.cpl-card-grid--derived::-webkit-scrollbar,
#cutProDerivedGrid::-webkit-scrollbar { width: 6px !important; }
.cpl-card-grid.cpl-card-grid--derived::-webkit-scrollbar-thumb,
#cutProDerivedGrid::-webkit-scrollbar-thumb {
background: color-mix(in srgb, var(--purple,#9D4EDD) 42%, transparent) !important;
border-radius: 3px !important;
min-height: 24px !important;
}
.cpl-card-grid.cpl-card-grid--derived::-webkit-scrollbar-track,
#cutProDerivedGrid::-webkit-scrollbar-track {
background: color-mix(in srgb, var(--purple,#9D4EDD) 8%, transparent) !important;
border-radius: 3px !important;
}
/* ---- 单张素材卡片 ---- */
.cut-pro-lib-card {
position: relative;
display: flex;
flex-direction: column;
background: var(--bg-panel);
border: 1px solid var(--border);
border-radius: 10px;
overflow: hidden;
cursor: pointer;
transition: border-color .15s, box-shadow .15s, transform .12s ease, background .15s;
}
/* ---- 🟣 生成素材精简卡：整卡 = 封面图，取消 cplc-body 占位，避免"字太多 + 挤缩略图"---- */
.cut-pro-lib-card.derived.derived-slim,
.cut-pro-lib-card.original.original-slim {
background: #000;
}
.cut-pro-lib-card.derived.derived-slim .cplc-thumb,
.cut-pro-lib-card.original.original-slim .cplc-thumb {
/* 取消 body，让缩略图 100% 占卡 → 缩略图就是整张卡的视觉主体 */
aspect-ratio: 16 / 9;
}
.cut-pro-lib-card:hover {
transform: translateY(-2px);
border-color: color-mix(in srgb, var(--cyan,#5BC8FF) 45%, var(--border));
box-shadow: 0 8px 20px rgba(91, 200, 255, 0.10), 0 2px 0 rgba(255,255,255,0.03) inset;
}
.cut-pro-lib-card.active {
border-color: var(--gold, #FFD166);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold, #FFD166) 28%, transparent),
0 6px 14px rgba(255, 209, 102, 0.16);
}
/* 原始/生成 精简卡 hover 发光色各保持自己的"身份色"，不混色 */
.cut-pro-lib-card.original.original-slim:hover {
border-color: color-mix(in srgb, var(--cyan,#5BC8FF) 55%, var(--border));
box-shadow: 0 8px 20px rgba(91, 200, 255, 0.12), 0 2px 0 rgba(255,255,255,0.03) inset;
}
/* ⭐ 工程模式·原始素材锁死（original-locked）：
* - hover 不再抬起/发光，保持与普通态一致
* - 灰度 + cursor:not-allowed，直观提示"不可直接操作"
* - 仅「📋 复制为生成素材」按钮可用 */
.cut-pro-lib-card.original.original-slim.original-locked {
cursor: not-allowed !important;
opacity: 0.92 !important;
border-color: color-mix(in srgb, var(--cyan,#5BC8FF) 22%, var(--border)) !important;
}
.cut-pro-lib-card.original.original-slim.original-locked:hover {
transform: none !important;
border-color: color-mix(in srgb, var(--cyan,#5BC8FF) 32%, var(--border)) !important;
box-shadow: 0 2px 0 rgba(255,255,255,0.02) inset !important;
}
.cut-pro-lib-card.derived:hover {
border-color: color-mix(in srgb, var(--purple,#9D4EDD) 55%, var(--border));
box-shadow: 0 8px 20px rgba(157, 78, 221, 0.12), 0 2px 0 rgba(255,255,255,0.03) inset;
}
/* ===== 统一素材卡（非破坏性架构） ===== */
.cut-pro-lib-card.unified {
border-radius: 10px;
transition: border-color .18s ease, box-shadow .18s ease, transform .12s ease;
}
.cut-pro-lib-card.unified:hover {
border-color: var(--gold, #ffd166);
box-shadow: 0 6px 18px rgba(255, 209, 102, 0.12);
transform: translateY(-1px);
}
.cut-pro-lib-card.unified.original {
border-left: 3px solid var(--cyan, #00bcd4);
}
.cut-pro-lib-card.unified.upload {
border-left: 3px solid var(--purple, #9D4EDD);
}
/* 素材卡片删除动画 */
.cut-pro-lib-card.removing {
animation: cplc-card-remove 0.25s ease-out forwards;
pointer-events: none;
}
@keyframes cplc-card-remove {
0% {
opacity: 1;
transform: scale(1);
max-height: 200px;
margin: initial;
padding: initial;
}
100% {
opacity: 0;
transform: scale(0.8);
max-height: 0;
margin: 0;
padding: 0;
border-width: 0;
}
}
/* 类型指示器 - 顶部颜色横线 */
.cplc-type-indicator {
width: 100%;
height: 3px;
flex-shrink: 0;
border-radius: 0;
}
/* 类型底部标签 */
.cplc-type-footer {
display: flex;
align-items: center;
padding: 3px 8px;
background: color-mix(in srgb, var(--bg-card) 60%, var(--bg-panel));
border-top: 1px solid var(--border);
}
.cplc-type-label {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.5px;
}
/* 上传区 */
.cut-pro-upload-area {
border: none;
border-radius: 0;
padding: 0;
margin-bottom: 4px;
background: transparent;
text-align: left;
transition: border-color .2s, background .2s;
}
.cut-pro-upload-area:hover,
.cut-pro-upload-area.drag-over {
border-color: transparent;
background: transparent;
}
.cut-pro-upload-area h4 {
margin: 0 0 8px;
font-size: 13px;
color: var(--gold, #ffd166);
display: flex;
align-items: center;
gap: 6px;
justify-content: center;
}
.cut-pro-upload-area p {
margin: 0 0 10px;
font-size: 12px;
color: var(--text2);
}
.cut-pro-upload-area .cut-pro-upload-btns {
display: flex;
gap: 8px;
justify-content: center;
flex-wrap: wrap;
}
.cut-pro-upload-area .cut-pro-upload-btns button {
padding: 6px 14px;
font-size: 12px;
border-radius: 6px;
border: 1px solid var(--border);
background: var(--bg-card);
color: var(--text);
cursor: pointer;
transition: border-color .18s, background .18s;
}
.cut-pro-upload-area .cut-pro-upload-btns button:hover {
border-color: var(--gold, #ffd166);
background: rgba(255, 209, 102, 0.1);
}
#cutProUploadStatus {
margin-top: 8px;
font-size: 11px;
color: var(--text2);
}
/* 新上传按钮样式 - 确保 input 正确覆盖按钮 */
.cut-pro-upload-btn {
position: relative !important;
overflow: hidden;
user-select: none;
-webkit-user-select: none;
}
.cut-pro-upload-btn-mini {
position: relative !important;
overflow: hidden;
user-select: none;
-webkit-user-select: none;
transition: color .15s ease, opacity .15s ease;
}
.cut-pro-upload-btn-mini:hover {
color: #fff !important;
opacity: 0.9;
}
.cut-pro-upload-btn > input[type="file"] {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
opacity: 0 !important;
cursor: pointer !important;
z-index: 10 !important;
}
.cut-pro-upload-btn-wrap {
display: inline-block;
}
/* 素材区 section 标题 */
.cpl-section-title {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 600;
color: var(--text2);
margin: 12px 0 6px;
padding-bottom: 4px;
border-bottom: 1px solid var(--border);
}
.cpl-section-title .cpl-section-count {
font-size: 10px;
color: var(--text3);
background: var(--bg-card);
padding: 1px 6px;
border-radius: 10px;
}
/* 封面缩略区：强制 16:9 比例 */
.cplc-thumb {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
background: #000;
overflow: hidden;
display: block;
}
.cplc-thumb-img,
.cplc-thumb-video,
.cplc-thumb-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.cplc-thumb-canvas { display: none; } /* 视频 decode 完才由 JS 切 block，避免闪烁白 */
.cplc-thumb-video { pointer-events: none; }
.cplc-thumb-fallback {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
background: linear-gradient(180deg, rgba(30,30,40,0.55), rgba(10,10,16,0.85));
color: var(--text3);
}
.cplc-fallback-ico { font-size: 28px; line-height: 1; }
.cplc-fallback-txt { font-size: 11px; letter-spacing: .03em; }
/* 音频素材卡片 */
.cplc-thumb-audio {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
background: linear-gradient(135deg, #1a0a3c 0%, #2a0a5c 50%, #0a1a3c 100%);
color: #e0c8ff;
}
.cplc-thumb-audio .cplc-thumb-ico {
font-size: 36px;
line-height: 1;
filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.6));
}
.cplc-thumb-wave {
width: 80%;
height: 20px;
background: repeating-linear-gradient(
90deg,
#a855f7 0px, #a855f7 2px,
transparent 2px, transparent 4px,
#7c3aed 4px, #7c3aed 5px,
transparent 5px, transparent 8px
);
opacity: 0.7;
}
.cplc-thumb-audio-player {
position: absolute;
bottom: 2px;
left: 4px;
right: 4px;
width: calc(100% - 8px);
height: 28px;
opacity: 0.9;
z-index: 3;
}
/* 字幕素材卡片 */
.cplc-thumb-subtitle {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
background: linear-gradient(135deg, #0a2a1a 0%, #0a3c2a 50%, #0a1a3c 100%);
color: #9ee0c8;
}
.cplc-thumb-subtitle .cplc-thumb-ico {
font-size: 32px;
line-height: 1;
filter: drop-shadow(0 0 6px rgba(82, 196, 126, 0.5));
}
.cplc-thumb-subtitle-preview {
font-size: 11px;
opacity: 0.7;
max-width: 85%;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 通用缩略图中央图标 */
.cplc-thumb-ico {
font-size: 36px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
}
/* 顶角落标：左 🔒 原始 / 🟣 生成；右 时长胶囊 */
.cplc-badges-top {
position: absolute;
inset: 8px 8px auto 8px;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 6px;
pointer-events: none;
}
.cplc-badges-top--slim { inset: 5px 6px auto 6px; gap: 4px; }
.cplc-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 7px;
border-radius: 999px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: .02em;
line-height: 1.4;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
/* 生成素材精简版：徽标缩成一个小点，不抢缩略图 */
.cplc-badge.cplc-badge--slim {
padding: 0;
width: 18px; height: 18px;
justify-content: center;
font-size: 11px;
line-height: 1;
}
.cplc-badge-lock {
background: color-mix(in srgb, var(--cyan,#5BC8FF) 30%, rgba(10,12,20,0.72));
color: #E3F6FF;
border: 1px solid color-mix(in srgb, var(--cyan,#5BC8FF) 45%, rgba(255,255,255,0.2));
}
.cplc-badge-edit {
background: color-mix(in srgb, var(--purple,#9D4EDD) 34%, rgba(14,10,24,0.72));
color: #F0DEFF;
border: 1px solid color-mix(in srgb, var(--purple,#9D4EDD) 50%, rgba(255,255,255,0.2));
}
.cplc-dur {
padding: 2px 7px;
border-radius: 6px;
background: rgba(0,0,0,0.62);
color: #fff;
font-size: 10.5px;
font-family: Consolas, Menlo, monospace;
font-weight: 700;
letter-spacing: .03em;
line-height: 1.4;
border: 1px solid rgba(255,255,255,0.14);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.cplc-dur--slim {
padding: 1px 5px;
font-size: 9.5px;
border-radius: 4px;
}
/* 精简卡下沿一行文件名（渐变透明，不挡画面底部）*/
.cplc-namebar {
position: absolute;
left: 0; right: 0; bottom: 0;
padding: 16px 8px 4px 8px;
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.78) 70%, rgba(0,0,0,0.92) 100%);
color: #f2f2f2;
z-index: 2;
pointer-events: none;
}
.cplc-namebar-txt {
display: block;
width: 100%;
max-width: 100%;
font-size: 10.5px;
font-weight: 600;
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
/* 精简卡操作按钮：默认隐藏，卡 hover 才从右下冒出，不占空间 */
.cplc-hover-actions {
position: absolute;
right: 6px; bottom: 24px;
display: flex;
gap: 6px;
z-index: 3;
opacity: 0.85;
transform: translateY(0);
pointer-events: auto;
transition: opacity .15s ease, transform .15s ease;
}
.cut-pro-lib-card.derived.derived-slim:hover .cplc-hover-actions,
.cut-pro-lib-card.original.original-slim:hover .cplc-hover-actions,
.cut-pro-lib-card.unified:hover .cplc-hover-actions,
.cplc-thumb:hover .cplc-hover-actions {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.cplc-hover-actions .cut-pro-btn {
padding: 4px 7px;
font-size: 10.5px;
font-weight: 700;
line-height: 1.2;
min-height: 0;
box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
.cplc-hover-actions .cplc-icon-btn {
width: 28px;
height: 28px;
border-radius: 50%;
border: 1.5px solid rgba(255,255,255,0.55);
background: rgba(15,25,40,0.75);
backdrop-filter: blur(6px);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all .15s ease;
box-shadow: 0 2px 8px rgba(0,0,0,0.5);
padding: 0;
}
.cplc-hover-actions .cplc-icon-btn:hover {
background: rgba(30,50,80,0.9);
border-color: rgba(255,255,255,0.9);
transform: scale(1.08);
}
.cplc-hover-actions .cplc-icon-btn svg {
width: 14px;
height: 14px;
fill: none;
stroke: #fff;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.cplc-hover-actions .cplc-icon-btn.cplc-icon-delete {
border-color: rgba(255,100,100,0.7);
background: rgba(80,15,20,0.75);
}
.cplc-hover-actions .cplc-icon-btn.cplc-icon-delete:hover {
background: rgba(160,30,40,0.9);
border-color: rgba(255,120,120,1);
}
.cplc-hover-actions .cplc-icon-btn.cplc-icon-delete svg {
stroke: #ffc8c8;
}
.cplc-hover-actions .cplc-icon-btn.cplc-icon-download {
border-color: rgba(100,180,255,0.7);
background: rgba(15,60,100,0.75);
}
.cplc-hover-actions .cplc-icon-btn.cplc-icon-download:hover {
background: rgba(30,100,160,0.9);
border-color: rgba(130,200,255,1);
}
.cplc-hover-actions .cplc-icon-btn.cplc-icon-download svg {
stroke: #c8e5ff;
}
/* 卡身（名 + 元数据 + 操作行） */
.cplc-body {
display: flex;
flex-direction: column;
gap: 6px;
padding: 9px 10px 10px 10px;
}
.cplc-name {
font-size: 12.5px;
font-weight: 700;
color: var(--text);
line-height: 1.3;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
white-space: normal;
word-break: break-word;
}
.cplc-meta-row {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.cplc-meta-tag {
display: inline-block;
padding: 2px 6px;
border-radius: 6px;
background: color-mix(in srgb, var(--cyan,#5BC8FF) 8%, var(--bg-panel));
border: 1px solid color-mix(in srgb, var(--cyan,#5BC8FF) 20%, var(--border));
color: color-mix(in srgb, var(--cyan,#5BC8FF) 75%, var(--text2));
font-size: 10.5px;
font-weight: 600;
line-height: 1.4;
white-space: nowrap;
}
.cut-pro-lib-card.derived .cplc-meta-tag {
background: color-mix(in srgb, var(--purple,#9D4EDD) 8%, var(--bg-panel));
border-color: color-mix(in srgb, var(--purple,#9D4EDD) 22%, var(--border));
color: color-mix(in srgb, var(--purple,#9D4EDD) 78%, var(--text2));
}
.cplc-actions {
display: flex;
gap: 6px;
margin-top: 2px;
}
.cplc-actions .cut-pro-btn { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ---- (旧：目录树节点；保留样式但新库不再使用) ---- */
.cut-pro-lib-node {
padding: 5px 8px;
border-radius: 5px;
cursor: pointer;
display: flex;
align-items: center;
gap: 6px;
color: var(--text2);
transition: background 0.15s, color 0.15s;
user-select: none;
}
.cut-pro-lib-node:hover {
background: var(--bg-hover);
color: var(--text);
}
.cut-pro-lib-node.active {
background: color-mix(in srgb, var(--cyan) 14%, var(--bg-card));
color: var(--text);
font-weight: 600;
border-left: 2px solid var(--cyan);
}
.cut-pro-lib-node .cut-pro-lib-icon { width: 14px; text-align: center; flex-shrink: 0; }
.cut-pro-lib-node .cut-pro-lib-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cut-pro-lib-node .cut-pro-lib-meta {
font-size: 10px;
color: var(--text3);
flex-shrink: 0;
}
.cut-pro-lib-group-title {
margin: 10px 2px 4px 2px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.8px;
color: var(--text3);
text-transform: uppercase;
padding-bottom: 3px;
border-bottom: 1px dashed var(--border);
}
/* ---- Studio 精剪参数 + 视频预览：左右两栏 ---- */
/* [旧 grid-area 已迁移到 17028~17085 显式 grid-column/row 区] cut-pro-studio */
.cut-pro-studio { /* 新布局定义：grid-column:2 grid-row:1 */ }
.cut-pro-studio-split {
display: grid;
grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
gap: 8px;
align-items: stretch;
}
.cut-pro-studio-left {
display: flex;
flex-direction: column;
gap: 4px;
font-size: 12px;
min-width: 0;
}
.cut-pro-studio-right {
display: flex;
flex-direction: column;
min-width: 0;
}
/* 每一行：label 固定宽(右对齐 + 中点线对齐) → 控件列(撑满剩余)，所有 label/控件上下左右对齐 */
.cut-pro-studio-line {
display: grid;
grid-template-columns: 112px minmax(0, 1fr);
gap: 6px;
align-items: center;
}
.cut-pro-studio-line.cut-pro-studio-item--top { align-items: start; } /* textarea 行让 label 顶对齐 */
.cut-pro-studio-item {
display: flex;
flex-direction: column;
gap: 4px;
}
/* ⭐ 关键修复：当 cut-pro-studio-line 同时挂 cut-pro-studio-item（精剪工作室对齐模式）时，
强制保持 grid，不让 .cut-pro-studio-item 的 display:flex / column 覆盖掉，
这样 label 与 下拉框/数字框 永久在同一排（grid 两列对齐） */
.cut-pro-studio-line.cut-pro-studio-item {
display: grid !important;
flex-direction: row !important; /* 兜底清掉 column */
}
.cut-pro-studio-item.cut-pro-full { grid-column: 1 / -1; }
.cut-pro-studio-item label {
color: var(--text2);
font-size: 11px;
letter-spacing: 0.2px;
}
/* 对齐模式下的 label：写入 grid 第一列，宽度固定、【居左对齐】，label 文字从左顶格开始 */
.cut-pro-studio-line.cut-pro-studio-item--aligned > label {
width: 100%;
padding-left: 2px;
padding-right: 0;
text-align: left;
color: var(--text2);
font-weight: 600;
font-size: 11.5px;
line-height: 1.5;
letter-spacing: .02em;
align-self: center;
white-space: nowrap;
min-height: 28px;
display: flex;
align-items: center;
justify-content: flex-start;
}
.cut-pro-studio-line.cut-pro-studio-item--aligned.cut-pro-studio-item--top > label {
padding-top: 6px;
align-items: flex-start;
}
.cut-pro-studio-item input[type="text"],
.cut-pro-studio-item input[type="number"],
.cut-pro-studio-item select,
.cut-pro-studio-item textarea {
width: 100%;
padding: 5px 9px;
background: var(--bg-dark);
border: 1px solid var(--border);
border-radius: 5px;
color: var(--text);
font-size: 12px;
outline: none;
font-family: inherit;
/* 对齐模式下让控件与 label 中高对齐，height 统一 28 使得 4 行控件在同一水平线 */
min-height: 28px;
box-sizing: border-box;
}
.cut-pro-studio-item input:focus,
.cut-pro-studio-item select:focus,
.cut-pro-studio-item textarea:focus {
border-color: var(--cyan);
box-shadow: 0 0 0 2px rgba(91,200,255,0.12);
}
.cut-pro-studio-item textarea {
resize: vertical;
min-height: 54px;
max-height: 110px;
line-height: 1.4;
}
/* ---------- 右独立面板·音频滑杆行：3列紧凑对齐（避免数值 100%→1005% 超宽溢出）---------- */
.cut-pro-studio-range-row {
display: grid;
/* label 64 + gap8 + slider 1fr + gap8 + value 58 = 合 138+1fr；面板宽300扣padding20剩280 → slider≈142 能拖 */
grid-template-columns: 64px minmax(0, 1fr) 58px !important;
column-gap: 8px !important;
row-gap: 0 !important;
align-items: center !important;
height: 30px !important;
min-height: 30px !important;
width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
padding: 0 2px !important;
margin: 0 !important;
}
.cut-pro-studio-range-row > span:first-child {
/* label 列：居左、单行、不折、8 对齐 */
width: 64px !important;
max-width: 64px !important;
height: 28px;
display: inline-flex !important;
align-items: center !important;
justify-content: flex-start !important;
padding: 0 !important;
font-size: 11.5px !important;
font-weight: 600 !important;
color: var(--text2);
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
box-sizing: border-box !important;
flex-shrink: 0 !important;
flex-grow: 0 !important;
text-align: left !important;
}
.cut-pro-studio-range-row input[type="range"] {
width: 100% !important;
height: 28px !important;
margin: 0 !important;
padding: 0 !important;
accent-color: var(--cyan);
display: block !important;
min-width: 0 !important;
box-sizing: border-box !important;
grid-column: 2 / 3 !important;
}
.cut-pro-studio-range-row > span:last-child {
/* 数值列：固定 58、居中、禁止溢出（1005% 被彻底关住） */
width: 58px !important;
max-width: 58px !important;
min-width: 58px !important;
height: 28px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 3px !important;
box-sizing: border-box !important;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 12px !important;
font-weight: 600 !important;
color: var(--green,#39FF14);
background: color-mix(in srgb, var(--green,#39FF14) 14%, var(--bg-soft));
border: 1px solid color-mix(in srgb, var(--green,#39FF14) 52%, var(--border));
border-radius: 4px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: clip !important;
flex-shrink: 0 !important;
flex-grow: 0 !important;
text-align: center !important;
grid-column: 3 / 4 !important;
}
/* —— 精剪工作室滑块行新增：独立 cut-pro-studio-line 中的"尺标 + 数值"统一结构 ——
* cut-pro-fx-field：控件列内部 grid (range 撑满 + 数值 78px 固定)
* cut-pro-fx-val：数值"显示框"样式，与其他下拉框/input 保持同一视觉层次（28px 高、圆角、蓝描边、居中）
*/
.cut-pro-studio-line .cut-pro-fx-field input[type="range"] {
width: 100%;
accent-color: var(--cyan);
margin: 0;
padding: 0;
display: block;
}
.cut-pro-fx-val {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 0;
width: 100%;
height: 28px;
padding: 0 6px;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 12px;
font-weight: 600;
color: var(--cyan);
background: color-mix(in srgb, var(--cyan,#5BC8FF) 10%, var(--bg-soft));
border: 1px solid color-mix(in srgb, var(--cyan,#5BC8FF) 35%, var(--border));
border-radius: 6px;
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.015);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
letter-spacing: 0.02em;
}
/* ====== 精剪工作室：左列参数区 "两个一排" 两列网格 ======
* 容器驱动：外层 grid 明确两列；子项 cut-pro-studio-line 直接流动，
* 不破坏每行内部 label → 控件 的单条结构，保证左右对齐。
*/
.cut-pro-studio-left.cut-pro-studio-left--grid2 {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px 18px; /* 行间距 10px，列间距 18px */
align-content: start;
}
/* 两列场景下，每条 line 的 label 列宽从 112px 缩到 84px（给控件列留足横向空间） */
.cut-pro-studio-left.cut-pro-studio-left--grid2 > .cut-pro-studio-line {
grid-template-columns: 84px minmax(0, 1fr) !important;
min-width: 0; /* grid 防溢出 */
}
.cut-pro-studio-left.cut-pro-studio-left--grid2 > .cut-pro-studio-item--top {
align-items: start;
}
/* 滑块的 cut-pro-fx-field 内部数值列 78px → 两列场景缩到 70px */
.cut-pro-studio-left.cut-pro-studio-left--grid2 .cut-pro-fx-field {
grid-template-columns: minmax(0, 1fr) 70px !important;
gap: 8px !important;
}
/* 滤镜 (高级) textarea 行 — 两列合并占一整行 */
.cut-pro-studio-left.cut-pro-studio-left--grid2 > .cut-pro-fx-line--full {
grid-column: 1 / -1 !important;
}
/* ---- 右边开辟的视频播放区：与左列等高 ---- */
.cut-pro-studio-preview {
margin-top: 8px;
padding: 8px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--bg-dark);
display: flex;
align-items: center;
justify-content: center;
min-height: 120px;
position: relative;
overflow: hidden;
}
/* 右栏视频区：撑满右列整行高度，与左侧参数列底部对齐，视频有独立黑盒空间 */
.cut-pro-studio-preview.cut-pro-studio-preview--right {
margin-top: 0;
width: 100%;
height: 100%;
min-height: 260px;
max-height: 100%;
padding: 10px;
background: #05070b;
border: 1px solid color-mix(in srgb, var(--cyan,#5BC8FF) 22%, var(--border));
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
overflow: hidden;
}
/* 右栏视频：宽高撑满预览区，object-fit: contain 保证不裁切 + 居中 */
.cut-pro-studio-preview video {
max-width: 100%;
max-height: 100%;
border-radius: 4px;
}
.cut-pro-studio-preview.cut-pro-studio-preview--right video,
.cut-pro-studio-preview.cut-pro-studio-preview--right img {
max-width: unset !important;
max-height: unset !important;
width: 100%;
height: 100%;
object-fit: contain;
}
.cut-pro-studio-preview-placeholder {
color: var(--text3);
font-size: 11px;
letter-spacing: 0.4px;
text-align: center;
padding: 12px;
}
.cut-pro-orig-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: 999px;
font-size: 10px;
background: linear-gradient(135deg, rgba(57,255,20,0.18), rgba(20,255,20,0.08));
border: 1px solid color-mix(in srgb, var(--green) 50%, var(--border));
color: var(--green);
font-weight: 600;
letter-spacing: 0.3px;
}
.cut-pro-orig-badge::before {
content: "🛡";
filter: drop-shadow(0 0 3px rgba(57,255,20,0.6));
}
/* =============================================================
* ★ 精剪工作室 · 红框按参考图 2列×2行 重建
* 左上：输出 5 行 | 右上：音频 3 行 + 时间 2 格 + 三色按钮 + 上传BGM + 断点条
* 左下：滤镜 6 项 | 右下：视频预览（16:9 + 底部进度条/播放控件）
* ★ 2026-08-16 对齐 v2：把 st-grid / st-tr-top / st-meta 全部改为**硬像素**，
* 并对每个"可能撑破列宽"的子项加 max-width + min-width:0 + overflow:hidden，
* 解决：① 三色按钮 "切断（两段都保留）" 原 nowrap 长字 → 挤到淡入秒绿框上；
* ② 右栏音频独立面板越过红线；
* ③ 输出 / 滤镜 左列基线不统一。
* Studio 内宽 736（760 外宽 − 2×12 padding）
* → 左列 324（输出+滤镜）、gap 14、右列 398（音频+时间+预览）= 324+14+398 = 736
* ============================================================= */
.st-grid {
display: grid !important;
/* ⭐ 2026-08-20 修改：画面单行 + 预览全屏布局 */
grid-template-columns: 1fr !important;
grid-template-rows: 1fr !important;
grid-auto-rows: minmax(0, auto) !important;
grid-template-areas:
"pv" !important;
column-gap: 14px !important;
row-gap: 12px !important;
padding: 12px !important;
align-items: stretch !important;
justify-items: stretch !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
box-sizing: border-box !important;
overflow: hidden !important;
height: 100% !important;
min-height: 0 !important;
}
.st-grid--ref {
grid-template-columns: 1fr !important;
grid-template-rows: auto 1fr !important;
}
.st-block {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0 !important;
max-width: 100% !important;
width: 100% !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
/* 左输出列/滤镜列：不再锁死 324px，跟随 Studio 面板宽度同步扩大 */
.st-block--tl { gap: 6px; max-width: 100% !important; min-width: 0 !important; width: 100% !important; }
.st-block--bl { gap: 6px; max-width: 100% !important; min-width: 0 !important; width: 100% !important; }
/* 预览列：跟随右列满宽（不再锁 398px） */
.st-block--br { width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
/* 右上：3 行，让"断点信息条下边缘 = 左输出比率控件下边缘"
左输出(st-block--tl)总高 174 = 5 × 30 + 4 × 6
本块：3 行内容 + 2 gap × 10 → 行 1=52, 行 2=56, 行 3=46 → 合计 52+10+56+10+46 = 174
结果：断点信息条(行3)底 = 输出比率(左5行最后一行)底。完美对齐。 */
.st-block--tr {
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
overflow: hidden !important;
min-height: 174px !important;
max-height: 174px !important;
height: 174px !important;
}
/* 取消"每行强行 30"的旧限制，让下面的 st-meta/st-ve/st-ve-info 自己精确占高 */
.st-block--tr > .st-tr-row {
box-sizing: border-box !important;
min-width: 0 !important;
width: 100% !important;
overflow: hidden !important;
display: flex !important;
align-items: stretch !important;
justify-content: stretch !important;
height: auto !important;
min-height: auto !important;
max-height: none !important;
}
/* --- 行 1：当前帧/片段时间/勾 → 外高 52；内部值框贴行底，与左边"输出分辨率 1920×1080"控件底 大致同水平 --- */
.st-meta {
display: grid !important;
grid-template-columns: 32% 53% 15% !important; /* 保持 128:210:54 比例，列宽随父自动 */
column-gap: 1% !important;
row-gap: 0 !important;
align-items: end !important;
justify-items: stretch !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
height: 52px !important;
min-height: 52px !important;
max-height: 52px !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
.st-meta--top { row-gap: 0 !important; }
.st-meta-col {
display: flex;
flex-direction: column;
gap: 0 !important;
min-width: 0 !important;
max-width: 100% !important;
height: 100% !important;
justify-content: flex-end !important;
}
.st-meta-col--wider { max-width: 100% !important; min-width: 0 !important; width: 100% !important; }
.st-meta-label {
height: 0 !important;
line-height: 0 !important;
font-size: 0 !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
color: transparent !important;
opacity: 0 !important;
pointer-events: none !important;
overflow: hidden !important;
visibility: hidden !important;
}
.st-meta-value {
height: 28px !important;
line-height: 28px !important;
padding: 0 8px !important;
background: var(--bg-soft);
border: 1px solid var(--border);
border-radius: 4px;
color: var(--cyan);
font-family: ui-monospace, Menlo, Consolas, monospace;
font-size: 12px !important;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
box-sizing: border-box !important;
min-width: 0 !important;
max-width: 100% !important;
width: 100% !important;
margin: 0 0 2px 0 !important; /* 值框底 = 行底 - 2px 贴底 */
flex: 0 0 auto !important;
}
.st-meta-col--right .st-meta-value { color: var(--text2); font-weight: 500; }
.st-optframe {
height: 28px !important;
min-height: 28px !important;
max-height: 28px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
background: var(--bg-soft);
border: 1px solid var(--border);
border-radius: 4px;
font-size: 0 !important;
color: var(--text2);
overflow: hidden !important;
min-width: 0 !important;
max-width: 100% !important;
width: 100% !important;
margin: 0 0 2px 0 !important; /* 勾选框底 = 值框底 = 同行底 基线一致 */
flex: 0 0 auto !important;
}
.st-optframe input[type="checkbox"] { accent-color: var(--cyan); width:18px !important; height:18px !important; margin:0 !important; flex:0 0 auto !important; }
.st-optframe-label { display: none !important; }
/* --- 行 2：三色切按钮 → 外高 56；内部按钮高 46 居中，底离行底 5px，顶离行顶 5px --- */
.st-ve {
display: flex !important;
gap: 1.5% !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
height: 56px !important;
min-height: 56px !important;
max-height: 56px !important;
box-sizing: border-box !important;
overflow: hidden !important;
flex: 0 0 auto !important;
align-items: center !important;
justify-content: space-between !important;
}
.st-ve--ref { gap: 1.5% !important; }
.st-ve-btn {
flex: 1 1 0 !important;
min-width: 0 !important;
max-width: 100% !important;
height: 46px !important;
min-height: 46px !important;
max-height: 46px !important;
padding: 0 6px !important;
border-radius: 5px;
background: var(--bg-soft);
font-size: 11px !important;
font-weight: 700 !important;
cursor: pointer;
transition: all 0.15s;
display: inline-flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
gap: 0 !important;
text-align: center !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
font-family: inherit !important;
box-sizing: border-box !important;
letter-spacing: 0.02em;
line-height: 1.15 !important;
border-width: 1.5px !important;
border-style: solid !important;
margin: 0 !important;
}
.st-ve-btn small { display: none !important; }
/* --- 行 3：断点/选中片段信息条 → 外高 46；整行底 = 174 = 左 输出比例 底 --- */
.st-ve-info {
display: flex !important;
gap: 10px !important;
align-items: center !important;
justify-content: flex-start !important;
height: 46px !important;
min-height: 46px !important;
max-height: 46px !important;
padding: 0 10px !important;
margin: 0 !important;
font-size: 11px !important;
line-height: 22px !important;
color: var(--text3);
background: var(--bg-soft);
border: 1px solid var(--border);
border-radius: 4px;
white-space: nowrap;
overflow: hidden !important;
text-overflow: ellipsis !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
flex: 0 0 auto !important;
}
.st-ve-info--ref { background: var(--bg-dark); }
.st-ve-info b { color: var(--cyan); font-weight: 600; }
.st-ve-sep { color: var(--text3); opacity: 0.6; }
/* --- 占位行（已经删 HTML），这里给它双保险隐藏 --- */
.st-tr-ph { display: none !important; height: 0 !important; visibility: hidden !important; }
/* ---------- 通用行：严格 30px 高 ---------- */
.st-row {
display: grid !important;
grid-template-columns: 84px minmax(0, 1fr) 54px !important;
column-gap: 8px !important;
row-gap: 0 !important;
align-items: center !important;
justify-items: stretch !important;
height: 30px !important;
min-height: 30px !important;
max-height: 30px !important;
width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
}
.st-row > *:nth-child(2):last-child {
grid-column: 2 / -1 !important;
width: 100% !important;
min-width: 0 !important;
height: 28px !important;
align-self: center !important;
}
.st-row > *:only-child {
grid-column: 1 / -1 !important;
width: 100% !important;
}
/* ---------- 输出设置行（两列：74 label + 控件，合 74+8+242=324）---------- */
.st-row--out {
grid-template-columns: 74px minmax(0, 1fr) !important;
column-gap: 8px !important;
}
.st-row--out .st-label {
width: 74px !important;
max-width: 74px !important;
min-width: 74px !important;
font-size: 11px !important;
}
.st-row--out .st-ctl {
grid-column: 2 / 3 !important;
height: 28px !important;
align-self: center !important;
}
/* ---------- 音频设置行（三列：56 label + 滑杆 + 58 绿值）----------
列宽 56 + 4 gap + 滑杆 + 4 gap + 58 = 122 → 140 列里滑杆实际 18px 可画
为了"仍能用"，label 字号缩到 10，滑杆视觉突出
若后续要更大滑杆，把 st-tr-top 140/248 改 150/238 即可。 */
.st-row--aud {
grid-template-columns: 56px minmax(0, 1fr) 58px !important;
column-gap: 4px !important;
}
.st-row--aud .st-label {
width: 56px !important;
max-width: 56px !important;
min-width: 56px !important;
font-size: 10px !important;
padding: 0 2px !important;
letter-spacing: 0 !important;
}
/* ---------- 滤镜设置行（左下：24 图标 + 滑杆 + 58 数值）----------
324 列：24 + 8 gap + 滑杆 + 8 gap + 58 = 242 → 滑杆 226，很宽 */
.st-row--fx {
grid-template-columns: 24px minmax(0, 1fr) 58px !important;
column-gap: 8px !important;
}
.st-fx-icon {
width: 24px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 4px;
background: color-mix(in srgb, var(--cyan,#5BC8FF) 10%, transparent);
border: 1px solid color-mix(in srgb, var(--cyan,#5BC8FF) 28%, transparent);
color: var(--cyan);
font-size: 12px;
user-select: none;
cursor: default;
box-sizing: border-box;
line-height: 1;
flex-shrink: 0;
}
.st-val--fx {
color: var(--text);
background: var(--bg-soft);
border-color: var(--border);
border-radius: 4px;
font-weight: 500;
}
/* textarea / 滤镜行 label 顶对齐，行高 auto */
.st-row--top { height: auto; min-height: 56px; align-items: start; }
.st-sep {
height: 0;
border-top: 1px dashed color-mix(in srgb, var(--border) 70%, transparent);
margin: 2px 0;
}
/* ---------- label ---------- */
.st-label {
width: 100%;
min-width: 0;
max-width: 100%;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: flex-start;
padding: 0 2px;
box-sizing: border-box;
color: var(--text2);
font-weight: 600;
font-size: 11.5px;
letter-spacing: 0.02em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex-shrink: 1;
}
.st-label--r { justify-content: flex-start; }
.st-row--top > .st-label {
align-items: flex-start;
padding-top: 5px;
height: auto;
min-height: 28px;
}
/* ---------- 控件(select/input/textarea) 28px 高 ---------- */
.st-ctl {
width: 100%;
height: 28px;
padding: 4px 9px;
background: var(--bg-dark);
border: 1px solid var(--border);
border-radius: 5px;
color: var(--text);
font-size: 12px;
outline: none;
font-family: inherit;
box-sizing: border-box;
line-height: 1.4;
transition: border-color 0.15s, box-shadow 0.15s;
}
.st-ctl:focus {
border-color: var(--cyan);
box-shadow: 0 0 0 2px rgba(91,200,255,0.12);
}
.st-ctl--textarea {
height: auto;
min-height: 54px;
max-height: 110px;
resize: vertical;
line-height: 1.4;
}
/* ---------- 滑杆 ---------- */
.st-range {
width: 100%;
height: 28px;
margin: 0;
padding: 0;
accent-color: var(--cyan);
display: block;
box-sizing: border-box;
cursor: pointer;
}
.st-range::-webkit-slider-runnable-track { height: 4px; }
.st-range::-moz-range-track { height: 4px; }
.st-range::-webkit-slider-thumb { margin-top: -6px; }
/* ---------- 数值显示框：严格 28px 高 + 固定行高，保证与滑杆/label 基线齐 ---------- */
.st-val {
width: 100% !important;
min-width: 0 !important;
height: 28px !important;
min-height: 28px !important;
max-height: 28px !important;
line-height: 26px;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 4px !important;
box-sizing: border-box !important;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
font-size: 11.5px !important;
font-weight: 600 !important;
color: var(--cyan);
background: color-mix(in srgb, var(--cyan,#5BC8FF) 10%, var(--bg-soft));
border: 1px solid color-mix(in srgb, var(--cyan,#5BC8FF) 35%, var(--border));
border-radius: 4px !important;
white-space: nowrap;
overflow: hidden !important;
text-overflow: clip !important;
flex: 0 0 auto !important;
}
.st-val--green {
color: var(--green,#39FF14);
background: color-mix(in srgb, var(--green,#39FF14) 14%, var(--bg-soft));
border-color: color-mix(in srgb, var(--green,#39FF14) 52%, var(--border));
border-radius: 4px;
}
.st-val--ghost {
background: transparent;
border-color: transparent;
color: var(--text3);
}
/* ======================== 预览（响应式播放器）======================== */
.st-preview {
width: 100%;
flex: 1 1 auto;
min-height: 0;
box-sizing: border-box;
padding: 0;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--bg-dark);
overflow: visible;
display: flex;
flex-direction: column;
/* 确保预览区域有最小高度 */
min-height: 200px;
}
.st-preview--ref { border-radius: 8px; border-color: #1a2536; }
.st-preview-box {
position: relative;
width: 100%;
/* ⭐ 可以缩小以容纳控件条 */
flex: 1 1 auto;
min-height: 0;
max-height: 100%;
background: #05070b;
/* ⭐ 添加内边距为取景框留出空间 */
padding: 2px;
box-sizing: border-box;
overflow: hidden;
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
border-radius: 8px;
/* ⭐ 允许内容溢出可见，确保视频完整显示 */
overflow: visible;
}
.st-preview-box--ref { border-radius: 8px; }
.st-preview-inner {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--text3);
font-size: 12px;
text-align: center;
padding: 8px;
/* ⭐ 关键：设置z-index确保主视频层在背景层之上 */
z-index: 2;
}
.st-preview-hint {
line-height: 1.6;
letter-spacing: 0.3px;
}
.st-preview-box video,
.st-preview-box img {
position: relative;
width: 100%;
height: 100%;
object-fit: contain;
display: block;
/* ⭐ 主视频层，z-index:2 确保在V2背景层(z-index:1)之上 */
z-index: 2;
max-width: 100%;
max-height: 100%;
}
/* ⭐ V2视频背景层（作为底层，全屏显示） */
.cut-pro-overlay-container-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
background: transparent;
pointer-events: none;
}
/* ⭐ 当V2视频显示时，给容器添加黑色背景 */
.cut-pro-overlay-container-bg.active {
background: #000;
}
.cut-pro-overlay-video-bg {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
/* ⭐ 添加调试用标签 */
.cut-pro-overlay-container-bg::after {
content: 'V2 背景';
position: absolute;
top: 8px;
left: 8px;
background: rgba(102, 126, 234, 0.9);
color: #fff;
font-size: 10px;
padding: 2px 6px;
border-radius: 3px;
pointer-events: none;
font-weight: 600;
z-index: 5;
}
/* ⭐ 字幕显示层（在预览播放器中显示字幕） */
.cut-pro-subtitle-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: flex-end;
justify-content: center;
pointer-events: none;
z-index: 100; /* ⭐ 提高z-index，确保在视频之上 */
padding: 20px;
box-sizing: border-box;
visibility: hidden; /* ⭐ 默认隐藏，通过JS显示 */
}
.cut-pro-subtitle-overlay[data-pos="top"] {
align-items: flex-start;
}
.cut-pro-subtitle-overlay[data-pos="center"] {
align-items: center;
}
.cut-pro-subtitle-text {
max-width: 90%;
text-align: center;
color: #fff;
font-size: 28px;
font-weight: bold;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000,
0 0 8px rgba(0, 0, 0, 0.8);
line-height: 1.5;
padding: 4px 12px;
background: transparent;
border-radius: 0;
word-wrap: break-word;
white-space: pre-wrap;
}
/* ⭐ 主视频带抠像mask时的透明效果 */
.st-preview-box.video-masked video {
/* 使用mask-image让抠像区域透明，显示底层V2视频 */
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
/* ⭐ 叠加视频标签（调试用） */
.cut-pro-overlay-container-bg::after {
content: 'V2 背景';
position: absolute;
top: 8px;
left: 8px;
background: rgba(102, 126, 234, 0.9);
color: #fff;
font-size: 10px;
padding: 2px 6px;
border-radius: 3px;
pointer-events: none;
font-weight: 600;
z-index: 5;
}
/* —— 预览画面下方控件条（放在视频下方，不遮挡视频） —— */
.st-pv-ctrls {
position: static;
width: 100%;
padding: 8px 10px;
display: flex;
flex-direction: column;
gap: 4px;
box-sizing: border-box;
background: rgba(10, 15, 25, 0.95);
border-radius: 0 0 8px 8px;
margin-top: 4px;
/* ⭐ 确保控件条永不被挤压 */
flex-shrink: 0;
}
.st-pv-bar {
position: relative;
width: 100%;
height: 8px;
background: rgba(255,255,255,0.12);
border-radius: 4px;
cursor: pointer;
flex-shrink: 0;
}
.st-pv-bar-fill {
position: absolute;
top: 0; left: 0; bottom: 0;
width: 0%;
background: linear-gradient(90deg, var(--cyan,#5BC8FF), #7fdfff);
border-radius: 4px;
}
.st-pv-bar-thumb {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 14px; height: 14px;
background: #fff;
border: 2px solid var(--cyan,#5BC8FF);
border-radius: 50%;
box-shadow: 0 0 6px rgba(91,200,255,.7);
left: 0%;
cursor: grab;
}
.st-pv-bar-thumb:active {
cursor: grabbing;
}
.st-pv-row {
display: flex;
align-items: center;
gap: 6px;
height: 28px;
color: #fff;
}
.st-pv-ic {
width: 28px; height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.12);
color: #fff;
border-radius: 5px;
cursor: pointer;
font-size: 12px;
padding: 0;
line-height: 1;
transition: background 0.15s, border-color 0.15s;
}
.st-pv-ic:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.28); }
.st-pv-time {
font-family: ui-monospace, Menlo, Consolas, monospace;
font-size: 12px;
color: #fff;
opacity: 0.92;
letter-spacing: 0.3px;
padding-left: 2px;
white-space: nowrap;
}
.st-pv-sp { flex: 1 1 auto; min-width: 0; }
/* ======================== 右上：时间帧 / 可优化帧 勾选框
图2 全宽 398：三列 128（当前帧 "00:12.041"，字宽96，128够）
｜ 210（片段时间 "00:00:00 - 00:00:12.041" 长文字，19字等宽）
｜ 54（只放 16×16 checkbox，不再写 label，tooltip 有完整）
= 128 + 210 + 54 + gap 3×2 = 398 完美闭合。
======================== */
.st-meta {
display: grid !important;
grid-template-columns: 128px 210px 54px !important;
column-gap: 3px !important;
row-gap: 3px !important;
align-items: stretch !important;
justify-items: stretch !important;
width: 398px !important;
min-width: 398px !important;
max-width: 398px !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
.st-meta--top { gap: 3px !important; }
.st-meta-col {
display: flex;
flex-direction: column;
gap: 3px !important;
min-width: 0 !important;
max-width: 100% !important;
}
/* 片段时间 210 列，显式锁长（比当前帧宽，以免长字被截到"00:0..."） */
.st-meta-col--wider {
max-width: 210px !important;
min-width: 210px !important;
width: 210px !important;
}
.st-meta-label {
height: 14px;
line-height: 14px;
font-size: 10px;
color: var(--text3);
letter-spacing: 0.2px;
padding-left: 1px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.st-meta-value {
height: 26px !important;
line-height: 26px !important;
padding: 0 8px !important;
background: var(--bg-soft);
border: 1px solid var(--border);
border-radius: 4px;
color: var(--cyan);
font-family: ui-monospace, Menlo, Consolas, monospace;
font-size: 12px !important;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
box-sizing: border-box !important;
min-width: 0 !important;
max-width: 100% !important;
}
.st-meta-col--right .st-meta-value {
color: var(--text2);
font-weight: 500;
}
.st-optframe {
height: 26px !important;
min-height: 26px !important;
max-height: 26px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
background: var(--bg-soft);
border: 1px solid var(--border);
border-radius: 4px;
font-size: 0 !important; /* 隐藏"可优化帧(A)"长字，防止顶破列 */
color: var(--text2);
overflow: hidden !important;
min-width: 0 !important;
max-width: 54px !important;
width: 54px !important;
}
.st-optframe input[type="checkbox"] {
accent-color: var(--cyan);
width: 18px !important;
height: 18px !important;
flex: 0 0 auto !important;
margin: 0 !important;
}
.st-optframe-label { display: none !important; } /* 窄列里放不下长文字，tooltip 替代 */
/* 三色按钮：整行 398 宽 gap 4×2 = 8 → 每 btn (398-8)/3 = 130
图2 按钮 1 行文字（不再两行小副标）→ "切（两段都保留）/切（保留前段）/切（保留后段）"
字体 11 粗字，130×34，完全够显示 8~10 个中文字。 */
.st-ve {
display: flex !important;
gap: 4px !important;
width: 398px !important;
min-width: 398px !important;
max-width: 398px !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
.st-ve--ref { gap: 4px !important; }
.st-ve-btn {
flex: 1 1 0 !important;
min-width: 0 !important;
max-width: 100% !important;
height: 34px !important;
padding: 0 8px !important;
border-radius: 5px;
background: var(--bg-soft);
font-size: 11.5px !important;
font-weight: 700 !important;
cursor: pointer;
transition: all 0.15s;
display: inline-flex !important;
flex-direction: row !important; /* 图2 1 行横排 */
align-items: center !important;
justify-content: center !important;
gap: 0 !important;
text-align: center !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
font-family: inherit !important;
box-sizing: border-box !important;
letter-spacing: 0.02em;
line-height: 1.15 !important;
border-width: 1.5px !important;
border-style: solid !important;
}
/* 已删除 old 纵向 small；残留 small 节点默认隐藏，避免 CSS 作用在空节点上 */
.st-ve-btn small { display: none !important; }
/* ★ 切断：蓝边框 蓝字体 */
.st-ve-btn--split {
border-color: #5BC8FF;
color: #5BC8FF;
background: color-mix(in srgb, #5BC8FF 12%, var(--bg-soft));
}
/* ★ 前切：黄边框 黄字体 */
.st-ve-btn--front {
border-color: #FFD53D;
color: #FFD53D;
background: color-mix(in srgb, #FFD53D 10%, var(--bg-soft));
}
/* ★ 后切：绿边框 绿字体 */
.st-ve-btn--tail {
border-color: #39FF14;
color: #39FF14;
background: color-mix(in srgb, #39FF14 10%, var(--bg-soft));
}
.st-ve-btn:hover:not(:disabled) {
filter: brightness(1.15);
transform: translateY(-1px);
}
.st-ve-btn:active:not(:disabled) { transform: translateY(0); }
.st-ve-btn:disabled { opacity: 0.5; cursor: not-allowed; filter: none; }
/* ======================== 断点/选中片段 信息条（右上：398 列下全宽，≤ 398）======================== */
.st-ve-info {
display: flex !important;
gap: 10px;
align-items: center;
padding: 4px 9px;
font-size: 11px;
color: var(--text3);
background: var(--bg-soft);
border: 1px solid var(--border);
border-radius: 4px;
white-space: nowrap;
overflow: hidden !important;
text-overflow: ellipsis !important;
width: 100% !important;
max-width: 398px !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
.st-ve-info--ref {
background: var(--bg-dark);
}
.st-ve-info b { color: var(--cyan); font-weight: 600; }
.st-ve-sep { color: var(--text3); opacity: 0.6; }
/* ======================== 上传 BGM（右上：st-block--tr 下 ≤ 398）======================== */
.st-upload {
width: 100% !important;
max-width: 398px !important;
height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 0 10px;
box-sizing: border-box !important;
border-radius: 6px;
border: 1px dashed var(--cyan);
background: color-mix(in srgb, var(--cyan,#5BC8FF) 8%, var(--bg-soft));
color: var(--cyan);
font-size: 11px !important;
font-weight: 600;
cursor: pointer;
transition: all 0.15s;
white-space: nowrap;
overflow: hidden !important;
text-overflow: ellipsis !important;
min-width: 0 !important;
}
.st-upload--ref {
background: color-mix(in srgb, var(--cyan,#5BC8FF) 10%, var(--bg-dark));
border-style: dashed;
text-align: left;
justify-content: flex-start;
padding-left: 12px !important;
border-radius: 4px;
}
.st-upload:hover {
border-style: solid;
background: color-mix(in srgb, var(--cyan,#5BC8FF) 14%, var(--bg-soft));
transform: translateY(-1px);
}
.st-upload-plus {
width: 18px; height: 18px; line-height: 16px;
border-radius: 50%;
border: 1px solid currentColor;
text-align: center;
font-weight: 700;
flex-shrink: 0;
}
.st-upload input[type="file"] { display: none; }
/* ---- Timeline 时间线（中） ---- */
/* [旧 grid-area 已迁移到 17028~17085 显式 grid-column:1/-1 跨3列整宽区] cut-pro-timeline */
.cut-pro-timeline { /* 新布局定义：grid-column:1/-1 grid-row:2 · 横跨3列整宽 */ }
.cut-pro-tl-toolbar {
display: flex;
align-items: stretch;
gap: 6px;
padding: 3px 8px;
border-bottom: 1px solid var(--border);
background: color-mix(in srgb, var(--bg-card) 50%, var(--bg-panel));
font-size: 11px;
color: var(--text2);
}
.cut-pro-tl-time {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: "Consolas", monospace;
font-size: 11px;
color: var(--cyan);
background: var(--bg-dark);
padding: 2px 8px;
border-radius: 4px;
border: 1px solid var(--border);
}
.cut-pro-tl-ruler {
position: relative;
width: 100%;
height: 20px;
cursor: grab;
cursor: -webkit-grab;
/* ★ 50px 竖线背景的起点 x=0，与下方 .cut-pro-tl-track-lane 的 lane 内部 x=0 严格重合，
这样 ruler 上的竖线与每一条 lane 上的竖线在同一列，形成连续视觉网格。 */
background-image: repeating-linear-gradient(
90deg,
transparent 0,
transparent 49px,
rgba(91,200,255,0.12) 49px,
rgba(91,200,255,0.12) 50px
);
background-position: 0 0;
background-repeat: repeat;
border-bottom: 1px solid var(--border);
overflow: hidden;
}
.cut-pro-tl-ruler span {
position: absolute;
top: 5px;
font-size: 10px;
color: var(--text3);
font-family: "Consolas", monospace;
transform: translateX(-50%);
}
.cut-pro-tl-tracks {
display: block;
width: 100%;
overflow: visible;
min-height: 308px !important;
cursor: crosshair;
}
.cut-pro-tl-tracks .cut-pro-tl-clip,
.cut-pro-tl-tracks .cut-pro-tl-handle-l,
.cut-pro-tl-tracks .cut-pro-tl-handle-r {
cursor: pointer;
}
.cut-pro-tl-track-lane {
cursor: grab;
cursor: -webkit-grab;
}
.cut-pro-tl-track {
display: block;
width: 100%;
box-sizing: border-box;
border-bottom: 1px solid var(--border);
min-height: 44px;
height: 44px;
}
/* track-label 旧样式保留用于紧凑/大图模式等特殊场景 */
.cut-pro-tl-track-label {
flex: 0 0 86px;
padding: 4px 6px;
border-right: 1px solid var(--border);
font-size: 11px;
font-weight: 600;
display: flex;
flex-direction: column;
gap: 2px;
background: color-mix(in srgb, var(--bg-card) 60%, var(--bg-panel));
color: var(--text);
min-height: 44px;
}
.cut-pro-tl-track-label small {
color: var(--text3);
font-weight: 400;
font-size: 10px;
}
.cut-pro-tl-track-lane {
display: block;
width: 100%;
position: relative;
background:
repeating-linear-gradient(
90deg,
transparent 0,
transparent 49px,
rgba(255,255,255,0.02) 49px,
rgba(255,255,255,0.02) 50px
);
min-height: 44px;
height: 100%;
box-sizing: border-box;
}
.cut-pro-tl-clip {
position: absolute;
top: 4px;
bottom: 4px;
border-radius: 5px;
border: 1px solid var(--border);
background: linear-gradient(135deg, rgba(91,200,255,0.25), rgba(91,200,255,0.08));
padding: 4px 7px;
font-size: 10px;
color: var(--text);
overflow: hidden;
cursor: pointer;
transition: transform 0.1s, box-shadow 0.2s;
user-select: none;
}
.cut-pro-tl-clip:hover {
box-shadow: 0 0 0 1px var(--cyan), 0 2px 10px rgba(91,200,255,0.2);
z-index: 2;
}
.cut-pro-tl-clip.active {
border-color: var(--cyan);
box-shadow: 0 0 0 1px var(--cyan), 0 0 12px rgba(91,200,255,0.35);
z-index: 3;
}
.cut-pro-tl-clip .cut-pro-tl-clip-name {
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cut-pro-tl-clip .cut-pro-tl-clip-meta {
color: var(--text3);
font-family: "Consolas", monospace;
margin-top: 1px;
}
/* 不同轨道配色（clip 边框色区分） */
.cut-pro-track-v1 .cut-pro-tl-clip { background: linear-gradient(135deg, rgba(91,200,255,0.28), rgba(59,130,246,0.1)); }
.cut-pro-track-v2 .cut-pro-tl-clip { background: linear-gradient(135deg, rgba(59,130,246,0.28), rgba(37,99,235,0.1)); }
.cut-pro-track-a1 .cut-pro-tl-clip { background: linear-gradient(135deg, rgba(57,255,20,0.22), rgba(20,192,124,0.08)); }
.cut-pro-track-a2 .cut-pro-tl-clip { background: linear-gradient(135deg, rgba(20,192,124,0.22), rgba(16,185,129,0.08)); }
.cut-pro-track-subs .cut-pro-tl-clip { background: linear-gradient(135deg, rgba(255,209,102,0.24), rgba(245,158,11,0.08)); }
.cut-pro-track-fx .cut-pro-tl-clip { background: linear-gradient(135deg, rgba(157,78,221,0.24), rgba(109,40,217,0.08)); }
.cut-pro-track-overlay .cut-pro-tl-clip { background: linear-gradient(135deg, rgba(255,77,109,0.22), rgba(201,24,74,0.08)); }
/* ---- Timeline 可视化裁剪增强（Step 1） ---- */
/* ruler 次刻度线：每 1s 主线 + 每 0.2s 浅灰次线 */
.cut-pro-tl-ruler {
cursor: crosshair;
}
.cut-pro-tl-ruler .cut-pro-ruler-tick-maj {
position: absolute;
top: 0;
bottom: 0;
width: 1px;
background: rgba(180, 180, 200, 0.75);
pointer-events: none;
}
.cut-pro-tl-ruler .cut-pro-ruler-tick-min {
position: absolute;
top: 6px;
bottom: 0;
width: 1px;
background: rgba(200, 200, 215, 0.35);
pointer-events: none;
}
.cut-pro-tl-ruler .cut-pro-ruler-tick-label {
position: absolute;
top: 1px;
display: inline-block;
/* ★ 严格水平居中：让"数字中心 x = 主刻度线 drawX"，与 clip absStart*px 严格 1:1 对齐。
* 因为 drawX = TL_LEFT_PAD(86px) + sec*px，最左 0s 数字从 86px 开始，完全不会被 ruler 左边界裁剪，
* 所以不再需要 translateX(3px) 的"保命右移"（否则数字中心相对刻度偏移 3px，违反对齐要求）。*/
transform: translateX(-50%);
font-size: 10.5px;
line-height: 1.1;
color: var(--muted, #aab0bd);
font-variant-numeric: tabular-nums;
letter-spacing: 0.3px;
white-space: nowrap;
pointer-events: none;
user-select: none;
opacity: 0.95;
z-index: 1;
}
.cut-pro-tl-ruler:hover {
background: rgba(91,200,255,0.05);
}
/* playhead 跨轨道全高 + 绿色高亮指示线 + 顶部红色三角箭头 */
.cut-pro-tl-playhead {
position: absolute;
top: 0;
width: 2px;
background: linear-gradient(180deg, #22ff88, #00cc55);
z-index: 15;
box-shadow: 0 0 8px rgba(34, 255, 136, 0.7);
transition: box-shadow 0.15s;
pointer-events: none;
}
.cut-pro-tl-playhead::before {
content: "";
position: absolute;
top: -1px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 8px solid #ff2244;
filter: drop-shadow(0 0 4px rgba(255, 34, 68, 0.8));
pointer-events: auto;
cursor: ew-resize;
user-select: none;
-webkit-user-select: none;
}
.cut-pro-tl-playhead:hover {
box-shadow: 0 0 12px rgba(34, 255, 136, 0.95), 0 0 24px rgba(34, 255, 136, 0.4);
width: 3px;
}
.cut-pro-tl-playhead:hover::before {
border-top-color: #ff0033;
}
.cut-pro-tl-playhead.dragging {
width: 3px;
background: #00ff66;
}
.cut-pro-tl-playhead.dragging::before {
border-top-color: #ff0033;
}
/* clip 选中描边 + 阴影 */
.cut-pro-tl-clip.active {
border: 2px solid #ffd76a !important;
box-shadow: 0 0 0 2px rgba(255,215,106,0.35), 0 4px 14px rgba(255,215,106,0.25) !important;
z-index: 5 !important;
}
/* clip 裁剪左右手柄 */
.cut-pro-tl-handle-l, .cut-pro-tl-handle-r {
position: absolute;
top: 0;
bottom: 0;
width: 7px;
cursor: ew-resize;
z-index: 6;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.12s;
}
.cut-pro-tl-handle-l { left: 0; border-right: 1px solid rgba(255,255,255,0.12); border-top-left-radius: 6px; border-bottom-left-radius: 6px; }
.cut-pro-tl-handle-r { right: 0; border-left: 1px solid rgba(255,255,255,0.12); border-top-right-radius: 6px; border-bottom-right-radius: 6px; }
.cut-pro-tl-handle-l:hover, .cut-pro-tl-handle-r:hover {
background: rgba(91,200,255,0.55);
}
.cut-pro-tl-handle-l::after, .cut-pro-tl-handle-r::after {
content: "⋮⋮";
font-size: 10px;
color: rgba(255,255,255,0.95);
font-weight: 700;
letter-spacing: -1px;
}
/* clip 切断预览竖线 */
.cut-pro-tl-clip-split-line {
position: absolute;
top: 0;
bottom: 0;
width: 2px;
background: repeating-linear-gradient(180deg, #ff4466 0 4px, transparent 4px 8px);
z-index: 7;
pointer-events: none;
}
.cut-pro-tl-clip-split-line::before {
content: "✂";
position: absolute;
top: -9px;
left: 50%;
transform: translateX(-50%);
background: #ff4466;
color: #fff;
font-size: 9px;
width: 16px;
height: 16px;
line-height: 16px;
text-align: center;
border-radius: 50%;
box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
/* zoom 按钮组 */
.cut-pro-zoom-group {
display: inline-flex;
align-items: center;
gap: 2px;
margin-left: 8px;
background: rgba(91,200,255,0.06);
border: 1px solid var(--border);
border-radius: 6px;
padding: 2px;
}
.cut-pro-zoom-group button {
border: none;
background: transparent;
color: var(--text);
font-size: 10px;
font-weight: 600;
padding: 2px 8px;
border-radius: 4px;
cursor: pointer;
height: 22px;
line-height: 18px;
min-width: 24px;
}
.cut-pro-zoom-group button:hover {
background: rgba(91,200,255,0.22);
}
.cut-pro-zoom-group button.active {
background: var(--cyan);
color: #fff;
box-shadow: 0 1px 4px rgba(91,200,255,0.5);
}
.cut-pro-zoom-label {
font-size: 10px;
color: var(--text2);
padding: 0 6px 0 2px;
font-weight: 600;
font-family: Consolas, monospace;
}
/* ================================================================
* ★ 剪映同款 时间线工具栏（上排 21 图标 + 分隔 / 下排 时间显示）
* ================================================================ */
/* 整个 toolbar 容器：两行 flex column */
.cut-pro-tl-toolbar {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 2px;
padding: 3px 8px 4px 8px;
border-bottom: 1px solid var(--border);
background: color-mix(in srgb, var(--bg-card) 55%, var(--bg-panel));
}
.cut-pro-tl-toolbar-row {
display: flex;
align-items: center;
gap: 2px;
min-height: 24px;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
}
.cut-pro-tl-toolbar-row::-webkit-scrollbar {
height: 4px;
}
.cut-pro-tl-toolbar-row::-webkit-scrollbar-thumb {
background: var(--border);
border-radius: 2px;
}
/* 第二行（时间 / 轨道标签）：更紧凑，gap 大一点 */
.cut-pro-tl-toolbar-row--info {
min-height: 20px;
gap: 6px;
padding-top: 2px;
border-top: 1px dashed color-mix(in srgb, var(--border) 65%, transparent);
margin-top: 1px;
flex-wrap: nowrap;
overflow-x: auto;
}
/* 宽屏保持一排完整图标 */
@media (min-width: 1600px) {
.cut-pro-tl-toolbar-row:not(.cut-pro-tl-toolbar-row--info) { overflow-x: visible; }
}
/* ★ 方形图标按钮 24×24（剪映 1:1 紧凑） */
.cut-pro-tl-icon-btn {
width: 24px;
height: 24px;
border-radius: 4px;
background: transparent;
color: var(--text);
border: 1px solid transparent;
font-size: 12px;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex: 0 0 auto;
padding: 0;
box-sizing: border-box;
transition: background .15s, border-color .15s, color .15s, transform .1s;
font-family: inherit;
}
.cut-pro-tl-icon-btn:hover {
background: color-mix(in srgb, var(--cyan, #5BC8FF) 10%, transparent);
border-color: var(--border);
}
.cut-pro-tl-icon-btn:active { transform: translateY(1px); }
.cut-pro-tl-icon-btn:disabled {
opacity: .4;
cursor: not-allowed;
background: transparent !important;
border-color: transparent !important;
}
/* Toggle 激活态（磁吸 / 波形 / 轨道高度 档位）：青框高亮 */
.cut-pro-tl-icon-btn.active {
background: color-mix(in srgb, var(--cyan, #5BC8FF) 16%, transparent);
border-color: color-mix(in srgb, var(--cyan, #5BC8FF) 55%, var(--border));
color: var(--cyan, #5BC8FF);
box-shadow: 0 0 0 2px rgba(91, 200, 255, 0.08);
}
/* 强调色：加入时间线（蓝主色，原 cut-pro-btn 蓝）*/
.cut-pro-tl-icon-btn--accent {
background: linear-gradient(135deg, rgba(91, 200, 255, 0.85), rgba(59, 130, 246, 0.85));
color: #05162a;
font-weight: 700;
border-color: transparent;
box-shadow: 0 0 0 1px rgba(91, 200, 255, 0.25);
}
.cut-pro-tl-icon-btn--accent:hover {
filter: brightness(1.1);
background: linear-gradient(135deg, rgba(91, 200, 255, 1), rgba(59, 130, 246, 1));
border-color: transparent;
}
.cut-pro-tl-icon-btn--accent:disabled { opacity: .45; filter: grayscale(.4); }
/* 分割按钮 "][" 图标 */
.cut-pro-tl-split-icon {
display: block;
color: inherit;
pointer-events: none;
}
.cut-pro-tl-icon-btn--primary .cut-pro-tl-split-icon {
color: var(--cyan, #5BC8FF);
}
/* 括号图标 "[" 和 "]" */
.cut-pro-tl-bracket-icon {
display: block;
color: inherit;
pointer-events: none;
}
/* 垃圾桶删除图标 */
.cut-pro-tl-delete-icon {
display: block;
color: inherit;
pointer-events: none;
}
/* 青色按钮样式 */
.cut-pro-tl-icon-btn--cyan {
color: var(--cyan, #5BC8FF);
}
.cut-pro-tl-icon-btn--cyan:hover {
background: color-mix(in srgb, var(--cyan, #5BC8FF) 14%, transparent);
border-color: color-mix(in srgb, var(--cyan, #5BC8FF) 55%, var(--border));
}
.cut-pro-tl-icon-btn--cyan:disabled {
opacity: .4;
color: var(--cyan, #5BC8FF);
}
/* 危险色：删除 / 清空（红主色，原 cut-pro-btn-red）*/
.cut-pro-tl-icon-btn--danger {
color: color-mix(in srgb, var(--danger, #ff5b72) 85%, var(--text));
}
.cut-pro-tl-icon-btn--danger:hover {
background: color-mix(in srgb, var(--danger, #ff5b72) 14%, transparent);
border-color: color-mix(in srgb, var(--danger, #ff5b72) 45%, var(--border));
color: var(--danger, #ff5b72);
}
/* 主色：剪刀分割（深蓝主色） */
.cut-pro-tl-icon-btn--primary {
color: var(--cyan, #5BC8FF);
font-weight: 700;
}
.cut-pro-tl-icon-btn--primary:hover {
background: color-mix(in srgb, var(--cyan, #5BC8FF) 12%, transparent);
border-color: color-mix(in srgb, var(--cyan, #5BC8FF) 40%, var(--border));
}
/* 分组竖分隔符 */
.cut-pro-tl-sep {
flex: 0 0 auto;
width: 1px;
height: 16px;
background: var(--border);
margin: 0 3px 0 4px;
align-self: center;
border-radius: 1px;
opacity: .85;
}
/* 轨道高度 3 档：三颗按钮包一层，视觉形成一组 */
.cut-pro-tl-track-modes {
display: inline-flex;
align-items: center;
gap: 2px;
padding: 2px;
margin-left: 6px;
background: rgba(91, 200, 255, 0.05);
border: 1px solid var(--border);
border-radius: 6px;
}
.cut-pro-tl-track-modes .cut-pro-tl-icon-btn {
width: 24px;
height: 24px;
border-radius: 4px;
font-size: 10px;
}
/* ★ 剪映式 缩放滑杆（− ／ range ／ ＋ ／ 🔍 ／ 数字） */
.cut-pro-zoom-slider {
display: inline-flex;
align-items: center;
gap: 4px;
margin-left: 8px;
padding: 2px 6px 2px 2px;
background: rgba(91, 200, 255, 0.06);
border: 1px solid var(--border);
border-radius: 6px;
height: 26px;
box-sizing: border-box;
}
.cut-pro-panel-head .cut-pro-zoom-slider {
height: 24px;
background: rgba(91, 200, 255, 0.1);
border-color: color-mix(in srgb, var(--cyan) 40%, var(--border));
}
.cut-pro-panel-head .cut-pro-tl-icon-btn {
width: 24px;
height: 24px;
border-radius: 5px;
font-size: 12px;
}
.cut-pro-panel-head .cut-pro-tl-icon-btn:hover {
background: rgba(91, 200, 255, 0.22);
color: var(--cyan, #5BC8FF);
}
.cut-pro-panel-head .cut-pro-zoom-slider > button {
width: 20px;
height: 20px;
font-size: 12px;
}
.cut-pro-panel-head .cut-pro-zoom-slider > input[type="range"] {
height: 20px;
}
.cut-pro-panel-head .cut-pro-zoom-slider .cut-pro-zoom-label {
font-size: 11px;
}
.cut-pro-panel-head .cut-pro-zoom-slider .cut-pro-zoom-magnifier {
font-size: 11px;
}
.cut-pro-zoom-slider > input[type="range"] {
width: 120px;
height: 22px;
accent-color: var(--cyan, #5BC8FF);
cursor: pointer;
padding: 0;
margin: 0 2px;
}
.cut-pro-zoom-magnifier {
font-size: 12px;
color: var(--text3);
padding: 0 2px;
}
/* 继承 zoom-label（原 cut-pro-zoom-label 样式）：宽度 / 颜色不用改 */
.cut-pro-zoom-slider .cut-pro-zoom-label {
padding: 0 4px 0 0;
}
/* ★ 齿轮下拉菜单 */
.cut-pro-tl-settings-menu {
position: absolute;
right: 0;
top: 34px;
min-width: 190px;
z-index: 80;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 8px;
padding: 6px;
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(255,255,255,0.02);
}
.cut-pro-tl-settings-menu ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.cut-pro-tl-settings-menu li {
padding: 7px 10px;
border-radius: 5px;
font-size: 12px;
color: var(--text);
cursor: pointer;
display: flex;
align-items: center;
gap: 6px;
}
.cut-pro-tl-settings-menu li:hover {
background: color-mix(in srgb, var(--cyan, #5BC8FF) 10%, var(--bg-card));
color: var(--cyan, #5BC8FF);
}
.cut-pro-tl-settings-menu li.sep {
padding: 0;
height: 1px;
background: var(--border);
margin: 4px 4px;
cursor: default;
pointer-events: none;
}
/* ★ 轨道 3 档高度（挂到 .cut-pro-tl-tracks 上） */
/* ⭐ FIX12：三档都重写 track height+min-height + tracks min-height(7×per)，保证「紧凑型能全看7轨，大型也最少保证内部高度够」 */
.cut-pro-tl-tracks.compact { min-height: 240px !important; }
.cut-pro-tl-tracks.compact .cut-pro-tl-track { height: 34px !important; min-height: 34px !important; }
.cut-pro-tl-tracks.compact .cut-pro-tl-track-lane { min-height: 34px !important; height: 100% !important; }
.cut-pro-tl-tracks.compact .cut-pro-tl-clip { top: 2px; bottom: 2px; font-size: 9px; padding: 2px 4px; }
.cut-pro-tl-tracks.compact .cut-pro-tl-clip .cut-pro-tl-clip-name { font-size: 9px; }
/* 标签列同步紧凑模式 */
.cut-pro-tl-body.compact .cut-pro-tl-label { height: 34px !important; min-height: 34px !important; }
.cut-pro-tl-tracks.large { min-height: 520px !important; }
.cut-pro-tl-tracks.large .cut-pro-tl-track { height: 74px !important; min-height: 74px !important; }
.cut-pro-tl-tracks.large .cut-pro-tl-track-lane { min-height: 74px !important; height: 100% !important; }
.cut-pro-tl-tracks.large .cut-pro-tl-clip {
top: 5px; bottom: 5px;
padding: 5px 8px;
font-size: 11px;
}
.cut-pro-tl-tracks.large .cut-pro-tl-clip .cut-pro-tl-clip-name { font-size: 11px; font-weight: 700; }
.cut-pro-tl-tracks.large .cut-pro-tl-clip .cut-pro-tl-clip-meta { font-size: 10px; }
/* 标签列同步大波形模式 */
.cut-pro-tl-body.large .cut-pro-tl-label { height: 74px !important; min-height: 74px !important; }
/* 波形开关打开时：给 A1/A2 轨道 lane 叠一层彩色波形占位图案（未来真波形替换） */
.cut-pro-tl-tracks.waveform .cut-pro-track-a1 .cut-pro-tl-track-lane,
.cut-pro-tl-tracks.waveform .cut-pro-track-a2 .cut-pro-tl-track-lane {
background-image:
repeating-linear-gradient(
90deg,
transparent 0, transparent 49px,
rgba(57, 255, 20, 0.03) 49px, rgba(57, 255, 20, 0.03) 50px
),
repeating-linear-gradient(
180deg,
rgba(57, 255, 20, 0.18) 0,
rgba(57, 255, 20, 0.05) 48%,
rgba(57, 255, 20, 0.02) 50%,
rgba(57, 255, 20, 0.05) 52%,
rgba(57, 255, 20, 0.18) 100%
);
background-size: 50px 100%, 6px 100%;
}
/* Studio 视觉编辑工具栏（切断/前切/后切 三按钮 + 状态） */
.cut-pro-ve-toolbar {
margin-top: 8px;
padding: 8px 10px;
background: rgba(91,200,255,0.05);
border: 1px solid var(--border);
border-radius: 7px;
display: flex;
flex-direction: column;
gap: 6px;
}
.cut-pro-ve-head {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 11px;
color: var(--text2);
font-weight: 600;
}
.cut-pro-ve-head .cut-pro-ve-info {
font-family: Consolas, monospace;
color: var(--cyan);
font-size: 10px;
}
.cut-pro-ve-buttons {
display: flex;
gap: 6px;
}
.cut-pro-ve-buttons button {
flex: 1;
border: 1px solid var(--cyan);
background: rgba(91,200,255,0.08);
color: var(--text);
border-radius: 6px;
padding: 5px 6px;
font-size: 11px;
font-weight: 600;
cursor: pointer;
transition: all 0.15s;
}
.cut-pro-ve-buttons button:hover {
background: rgba(91,200,255,0.22);
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(91,200,255,0.25);
}
.cut-pro-ve-buttons button:disabled {
opacity: 0.4;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.cut-pro-ve-buttons .ve-split { border-color: #ffaa33; background: rgba(255,170,51,0.08); }
.cut-pro-ve-buttons .ve-split:hover { background: rgba(255,170,51,0.22); box-shadow: 0 2px 6px rgba(255,170,51,0.3); }
.cut-pro-ve-buttons .ve-keep-front { border-color: #57bb4a; background: rgba(87,187,74,0.08); }
.cut-pro-ve-buttons .ve-keep-front:hover { background: rgba(87,187,74,0.22); box-shadow: 0 2px 6px rgba(87,187,74,0.3); }
.cut-pro-ve-buttons .ve-keep-tail { border-color: #bb5aaa; background: rgba(187,90,170,0.08); }
.cut-pro-ve-buttons .ve-keep-tail:hover { background: rgba(187,90,170,0.22); box-shadow: 0 2px 6px rgba(187,90,170,0.3); }
/* 时间线外层布局容器（标签列 + 滚动容器） */
.cut-pro-tl-body {
display: flex;
flex-direction: row;
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
}
/* 左侧固定标签列（不参与滚动） */
.cut-pro-tl-labels {
flex: 0 0 86px;
min-width: 86px;
max-width: 86px;
display: flex;
flex-direction: column;
background: color-mix(in srgb, var(--bg-card) 50%, var(--bg-panel));
border-right: 1px solid var(--border);
overflow: hidden;
}
.cut-pro-tl-label-ruler-spacer {
height: 20px;
min-height: 20px;
flex-shrink: 0;
border-bottom: 1px solid var(--border);
}
.cut-pro-tl-labels .cut-pro-tl-label {
flex: 0 0 44px;
min-height: 44px;
height: 44px;
padding: 4px 6px;
border-bottom: 1px solid var(--border);
font-size: 11px;
font-weight: 600;
display: flex;
flex-direction: column;
gap: 2px;
background: color-mix(in srgb, var(--bg-card) 60%, var(--bg-panel));
color: var(--text);
flex-shrink: 0;
}
.cut-pro-tl-labels .cut-pro-tl-label small {
color: var(--text3);
font-weight: 400;
font-size: 10px;
}
/* 时间线外层滚动容器（防止 zoom 后抖动） */
.cut-pro-tl-scroll {
flex: 1 1 auto;
overflow-x: auto;
overflow-y: auto;
min-height: 328px !important;
position: relative;
min-width: 0;
}
/* ★ 剪映式：单一内容包裹层，所有子元素（ruler、tracks、track、lane）自然继承其宽度 */
.cut-pro-tl-content {
display: block;
position: relative;
min-height: 100%;
}
.cut-pro-tl-scroll.dragging {
overflow-x: auto;
cursor: grabbing !important;
cursor: -webkit-grabbing !important;
user-select: none;
}
.cut-pro-tl-scroll.dragging .cut-pro-tl-ruler,
.cut-pro-tl-scroll.dragging .cut-pro-tl-track-lane,
.cut-pro-tl-scroll.dragging .cut-pro-tl-track,
.cut-pro-tl-scroll.dragging .cut-pro-tl-content {
cursor: grabbing !important;
cursor: -webkit-grabbing !important;
}
/* ---- Pipeline 后台任务 + 版本（右） ---- */
/* [旧 grid-area 已迁移：pipeline 现在作为 cut-pro-rightcol(flex子项)底部区块] cut-pro-pipeline */
.cut-pro-pipeline { /* 新布局：右列下半 flex:1 1 auto, min-height:240px */ }
.cut-pro-task-card {
padding: 8px 10px;
border-radius: 7px;
border: 1px solid var(--border);
background: var(--bg-card);
margin-bottom: 8px;
font-size: 11px;
}
.cut-pro-task-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 5px;
gap: 6px;
}
.cut-pro-task-title {
color: var(--text);
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
}
.cut-pro-task-status {
flex-shrink: 0;
padding: 1px 7px;
border-radius: 999px;
font-size: 10px;
border: 1px solid var(--border);
}
.cut-pro-task-status.running {
background: color-mix(in srgb, var(--cyan) 20%, var(--bg-card));
color: var(--cyan);
border-color: color-mix(in srgb, var(--cyan) 40%, var(--border));
animation: cutProPulse 1.4s infinite;
}
.cut-pro-task-status.done {
background: color-mix(in srgb, var(--green) 20%, var(--bg-card));
color: var(--green);
border-color: color-mix(in srgb, var(--green) 40%, var(--border));
}
.cut-pro-task-status.failed {
background: color-mix(in srgb, #ff4d6d 20%, var(--bg-card));
color: #ff9aac;
border-color: color-mix(in srgb, #ff4d6d 40%, var(--border));
}
.cut-pro-task-status.pending {
background: color-mix(in srgb, var(--gold) 20%, var(--bg-card));
color: var(--gold);
border-color: color-mix(in srgb, var(--gold) 40%, var(--border));
}
@keyframes cutProPulse {
0%,100% { box-shadow: 0 0 0 0 rgba(91,200,255,0.4); }
50% { box-shadow: 0 0 0 4px rgba(91,200,255,0.05); }
}
.cut-pro-task-progress {
height: 5px;
background: var(--bg-dark);
border-radius: 999px;
overflow: hidden;
margin: 4px 0;
}
.cut-pro-task-progress > i {
display: block;
height: 100%;
background: linear-gradient(90deg, var(--cyan), var(--green));
transition: width 0.3s;
}
.cut-pro-task-meta {
display: flex;
justify-content: space-between;
font-size: 10px;
color: var(--text3);
font-family: "Consolas", monospace;
}
.cut-pro-task-actions {
display: flex;
gap: 5px;
margin-top: 6px;
}
.cut-pro-version-card {
padding: 7px 10px;
border-radius: 7px;
border: 1px solid var(--border);
background: var(--bg-card);
margin-bottom: 6px;
font-size: 11px;
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
transition: border-color 0.15s, background 0.15s;
}
.cut-pro-version-card:hover {
border-color: var(--cyan);
background: var(--bg-hover);
}
.cut-pro-version-card.active {
border-color: var(--green);
box-shadow: 0 0 0 1px rgba(57,255,20,0.2);
}
.cut-pro-version-tag {
flex-shrink: 0;
padding: 2px 7px;
border-radius: 4px;
background: linear-gradient(135deg, var(--purple), #6d28d9);
color: #fff;
font-size: 10px;
font-weight: 700;
}
.cut-pro-version-info {
flex: 1;
overflow: hidden;
}
.cut-pro-version-info .name { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cut-pro-version-info .meta { color: var(--text3); font-size: 10px; font-family: "Consolas", monospace; }
.cut-pro-version-actions {
display: flex;
gap: 3px;
flex-shrink: 0;
}
/* ---- Audio + Subtitle（右下） ---- */
/* [旧 grid-area 已迁移：audiosubs 现在作为 cut-pro-rightcol(flex子项) 顶部区块] cut-pro-audiosubs */
.cut-pro-audiosubs { /* 新布局：右列上半 flex:0 0 auto, min-height:220px */ }
/* ================ 素材库 ↔ 后台任务 · Tab 切换面板（同一区域，中间列 480px） ================ */
.cut-pro-lib-tabs {
display: flex;
border-bottom: 1px solid var(--border);
background: color-mix(in srgb, var(--bg-card) 50%, var(--bg-panel));
border-top-left-radius: 10px;
border-top-right-radius: 10px;
overflow: hidden;
}
.cut-pro-lib-tab {
padding: 8px 18px;
font-size: 12px;
font-weight: 700;
color: var(--text2);
cursor: pointer;
border-right: 1px solid var(--border);
transition: color 0.15s, background 0.15s;
position: relative;
white-space: nowrap;
}
.cut-pro-lib-tab:hover {
color: var(--text);
background: var(--bg-hover);
}
.cut-pro-lib-tab.active {
color: var(--gold);
background: var(--bg-panel);
}
.cut-pro-lib-tab.active::after {
content: "";
position: absolute;
bottom: -1px;
left: 10px;
right: 10px;
height: 2px;
background: linear-gradient(90deg, var(--gold), var(--cyan));
box-shadow: 0 0 5px var(--gold);
}
/* ====== 素材类型筛选标签 ====== */
.cut-pro-lib-filter {
display: flex;
gap: 4px;
padding: 6px 8px;
background: color-mix(in srgb, var(--bg-card) 40%, var(--bg-panel));
border-bottom: 1px solid var(--border);
flex-wrap: nowrap;
overflow-x: auto;
}
.cut-pro-lib-filter-item {
padding: 3px 7px;
font-size: 10.5px;
font-weight: 600;
color: var(--text2);
cursor: pointer;
border-radius: 12px;
background: var(--bg-hover);
border: 1px solid var(--border);
transition: all 0.15s ease;
white-space: nowrap;
user-select: none;
}
.cut-pro-lib-filter-item:hover {
color: var(--text);
background: color-mix(in srgb, var(--gold) 15%, var(--bg-hover));
border-color: var(--gold);
}
.cut-pro-lib-filter-item.active {
color: #fff;
background: linear-gradient(135deg, var(--gold), #ff9800);
border-color: var(--gold);
box-shadow: 0 2px 8px rgba(255, 152, 0, 0.3);
}
/* 筛选标签颜色小圆点 */
.cplc-filter-dot {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
margin-right: 3px;
vertical-align: middle;
box-shadow: 0 0 2px rgba(0,0,0,0.2);
}
.cut-pro-lib-filter-item.active .cplc-filter-dot {
box-shadow: 0 0 2px rgba(0,0,0,0.3), 0 0 4px rgba(255,255,255,0.3);
}
/* 拖拽高亮效果 */
.cut-pro-lib-card.dragging {
opacity: 0.5;
transform: scale(0.98);
}
.cut-pro-tl-lane.drag-over {
background: color-mix(in srgb, var(--gold) 20%, transparent) !important;
border: 2px dashed var(--gold) !important;
transition: all 0.15s ease;
}
/* 右键菜单项 */
.cut-pro-ctx-item {
padding: 6px 12px;
font-size: 12px;
color: var(--text);
cursor: pointer;
transition: background 0.15s;
white-space: nowrap;
}
.cut-pro-ctx-item:hover {
background: var(--bg-hover);
color: var(--gold);
}
.cut-pro-lib-tabpane {
width: 100%;
box-sizing: border-box;
}
.cut-pro-lib-tabpane > .cut-pro-panel-head {
border-top-left-radius: 0 !important;
border-top-right-radius: 0 !important;
}
/* ====== ⭐ FIX10：素材库/后台任务 底边 与 精剪/音字幕 对齐 · CSS 兜底 ====== */
/* (a) Tab 栏：flex0 固定高度不收缩，避免高DPI下压缩连锁导致 tabpane 矮一点点 */
html body .cut-pro-lib > .cut-pro-lib-tabs {
flex: 0 0 auto !important;
min-height: 0 !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* (b) 后台任务 pane 内部：任务列表 + 版本列表 各分一半垂直空间（flex:1），内容多时内部滚 */
html body .cut-pro-lib-tabpane[data-libtab-pane="pipe"] > .cut-pro-panel-body > #cutProTasksList,
html body .cut-pro-lib-tabpane[data-libtab-pane="pipe"] > .cut-pro-panel-body > #cutProVersionsList {
flex: 1 1 0% !important;
min-height: 0 !important;
max-height: none !important;
overflow: auto !important;
overflow-x: hidden !important;
box-sizing: border-box !important;
}
/* (c) 后台任务 pane 内：分割线 + 版本标签 固定高度，不参与 flex 分配 */
html body .cut-pro-lib-tabpane[data-libtab-pane="pipe"] > .cut-pro-panel-body > .cut-pro-divider {
flex: 0 0 auto !important;
margin: 4px 0 !important;
}
/* (d) 三面板 box-sizing 强制统一 + overflow:hidden 防止内容推破底边界 */
html body .cut-pro-layout > .cut-pro-lib,
html body .cut-pro-layout > .cut-pro-studio,
html body .cut-pro-layout > .cut-pro-rightcol,
html body .cut-pro-layout > .cut-pro-rightcol > .cut-pro-audiosubs {
box-sizing: border-box !important;
min-height: 0 !important;
overflow: hidden !important;
}
.cut-pro-as-tabs {
display: flex;
border-bottom: 1px solid var(--border);
background: color-mix(in srgb, var(--bg-card) 50%, var(--bg-panel));
}
.cut-pro-as-tab {
padding: 6px 14px;
font-size: 11px;
font-weight: 600;
color: var(--text2);
cursor: pointer;
border-right: 1px solid var(--border);
transition: color 0.15s, background 0.15s;
position: relative;
}
.cut-pro-as-tab:hover {
color: var(--text);
background: var(--bg-hover);
}
.cut-pro-as-tab.active {
color: var(--cyan);
background: var(--bg-panel);
}
.cut-pro-as-tab.active::after {
content: "";
position: absolute;
bottom: -1px;
left: 8px; right: 8px;
height: 2px;
background: var(--cyan);
box-shadow: 0 0 4px var(--cyan);
}
.cut-pro-as-body {
padding: 10px;
font-size: 12px;
display: flex;
flex-direction: column;
gap: 8px;
flex: 1 1 auto !important;
min-height: 0 !important;
overflow: hidden !important;
height: 0 !important;
max-height: 100% !important;
}
.cut-pro-as-pane[data-as-pane="versions"] {
display: flex;
flex-direction: column;
min-height: 0;
height: 100%;
overflow: hidden;
flex: 1 1 auto;
}
.cut-pro-as-pane[data-as-pane="versions"]:not([style*="display: none"]) {
display: flex !important;
flex-direction: column !important;
min-height: 0 !important;
height: 0 !important;
flex: 1 1 auto !important;
overflow: hidden !important;
}
.cut-pro-as-pane[data-as-pane="versions"] #cutProVersionsListRight {
flex: 1 1 auto !important;
min-height: 0 !important;
max-height: 100% !important;
height: 0 !important;
overflow-y: auto !important;
overflow-x: hidden !important;
}
.cut-pro-file-pick {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
padding: 5px 8px !important;
background: var(--bg-dark);
border: 1px dashed var(--border);
border-radius: 5px;
font-size: 10.5px !important;
color: var(--text2);
cursor: pointer;
transition: border-color 0.15s, color 0.15s;
box-sizing: border-box !important;
min-width: 0 !important;
max-width: 100% !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.cut-pro-file-pick > span:nth-of-type(2) {
min-width: 0 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
display: inline-block !important;
max-width: calc(100% - 34px) !important; /* 22 图标 + 6 gap + 6 padding 保险 */
}
.cut-pro-file-pick:hover {
border-color: var(--cyan);
color: var(--text);
}
.cut-pro-file-pick .cut-pro-fp-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 4px;
background: color-mix(in srgb, var(--cyan) 14%, var(--bg-card));
color: var(--cyan);
font-size: 11px;
}
.cut-pro-file-pick input[type="file"] { display: none; }
.cut-pro-sub-row {
display: grid;
grid-template-columns: 60px 70px 1fr 22px;
gap: 5px;
align-items: center;
padding: 5px;
border-radius: 4px;
background: var(--bg-dark);
border: 1px solid var(--border);
}
.cut-pro-sub-row input {
width: 100%;
padding: 3px 5px;
background: transparent;
border: 1px solid transparent;
border-radius: 3px;
color: var(--text);
font-size: 11px;
font-family: inherit;
outline: none;
}
.cut-pro-sub-row input:focus {
border-color: var(--cyan);
background: var(--bg-panel);
}
.cut-pro-sub-row .cut-pro-sub-del {
width: 22px; height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 4px;
color: var(--text3);
cursor: pointer;
font-size: 12px;
transition: color 0.15s, background 0.15s;
}
.cut-pro-sub-row .cut-pro-sub-del:hover {
background: color-mix(in srgb, #ff4d6d 20%, var(--bg-card));
color: #ff9aac;
}
/* ---- 空状态 + 分隔 ---- */
.cut-pro-empty {
padding: 18px 10px;
text-align: center;
color: var(--text3);
font-size: 11px;
line-height: 1.6;
}
.cut-pro-divider {
height: 1px;
background: var(--border);
margin: 8px 0;
}
.cut-pro-row {
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
}
.cut-pro-kv {
display: flex;
align-items: baseline;
gap: 4px;
font-size: 11px;
}
.cut-pro-kv b { color: var(--text); font-weight: 600; }
.cut-pro-kv span { color: var(--text2); font-family: "Consolas", monospace; }
/* ---- theme skin 适配（scifi / professional / warm / dark） ---- */
body.theme-professional .cut-pro-btn { letter-spacing: 0.3px; }
body.theme-warm .cut-pro-topbar {
background: linear-gradient(90deg, rgba(255,209,102,0.1), rgba(255,150,100,0.08));
}
body.theme-dark .cut-pro-panel { background: #0c0f16; }
/* ---- 响应式：小屏简化布局 ---- */
@media (max-width: 1280px) {
.cut-pro-lib { max-width: 420px; }
.cut-pro-rightcol { max-width: 330px; }
}
@media (max-width: 1100px) {
.cut-pro-toprow { flex-wrap: wrap; }
.cut-pro-lib { flex: 0 0 100%; max-width: 100%; }
.cut-pro-studio { flex: 0 0 100%; max-width: 100%; }
.cut-pro-rightcol { flex: 0 0 100%; max-width: 100%; }
}
/* =====================================================================
🔧 视频管理新增（v2 补丁）：traffic 文字标签 + 全局拍摄剧本气泡单例
===================================================================== */
/* F2. 分镜卡标题信号灯旁的文字标签："已生成 N 个视频" / "待生成视频" */
.ws-vm-traffic-text {
font-size: 10.5px;
font-weight: 600;
padding: 1px 7px;
border-radius: 999px;
border: 1px solid var(--border);
white-space: nowrap;
letter-spacing: 0.2px;
line-height: 1.5;
}
.ws-vm-traffic-text--green {
color: #c9ffd1;
background: color-mix(in srgb, var(--green, #39FF14) 12%, #06142a);
border-color: color-mix(in srgb, var(--green, #39FF14) 45%, var(--border));
box-shadow: 0 0 10px rgba(57, 255, 20, 0.18);
}
.ws-vm-traffic-text--red {
color: #ffdbe0;
background: color-mix(in srgb, #ff5a6a 11%, #06142a);
border-color: color-mix(in srgb, #ff5a6a 40%, var(--border));
box-shadow: 0 0 8px rgba(255, 90, 106, 0.18);
}
/* 旧 🎞️ 徽章不再使用，但保留以防历史引用（隐藏起来） */
.ws-vm-video-count-badge { display:none; }
/* F4. 全局单例剧本气泡 —— 直接挂 body，position:fixed，冲破所有祖先 overflow:hidden
默认 size 460×320；最小 340×220；可通过三边 resize 句柄随意调 */
.vm-script-bubble-root {
position: fixed;
z-index: 2147483000; /* 非常顶：超过模态层（被 inline style 动态 z-index 覆盖，点/拖谁谁置顶） */
display: flex;
flex-direction: column;
min-width: 280px; /* 与 JS MIN_W 一致：允许用户任意缩到更小 */
min-height: 200px; /* 与 JS MIN_H 一致 */
background: linear-gradient(165deg,
color-mix(in srgb, var(--cyan, #5BC8FF) 22%, #0a1426) 0%,
#0b1022 45%,
color-mix(in srgb, var(--purple, #9D4EDD) 20%, #0a1426) 100%);
border: 1px solid color-mix(in srgb, var(--cyan, #5BC8FF) 48%, var(--border));
border-radius: 12px;
box-shadow:
0 14px 32px rgba(0, 0, 0, 0.55),
0 0 0 1px rgba(255, 255, 255, 0.04) inset,
0 0 26px rgba(91, 200, 255, 0.22);
backdrop-filter: blur(5px);
color: #e6f2ff;
font-size: 12.5px;
line-height: 1.6;
letter-spacing: 0.2px;
overflow: hidden;
/* 默认隐藏 + 淡入动画 */
opacity: 0;
transform: translateY(3px);
pointer-events: none;
visibility: hidden;
transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s ease;
}
.vm-script-bubble-root.vm-sb--visible {
opacity: 1;
transform: translateY(0);
visibility: visible;
pointer-events: auto;
}
.vm-script-bubble--follow { /* 跟随式：带箭头 */ }
.vm-script-bubble--pinned { /* 钉在页面左侧：蓝色钉印记 + 左上固定 */
box-shadow:
0 18px 40px rgba(0, 0, 0, 0.58),
0 0 0 1px rgba(255, 255, 255, 0.04) inset,
0 0 30px rgba(157, 78, 221, 0.32),
0 0 32px rgba(91, 200, 255, 0.2);
}
.vm-script-bubble--pinned::before {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: 4px;
background: linear-gradient(180deg, var(--cyan, #5BC8FF), var(--purple, #9D4EDD));
border-top-left-radius: 11px;
border-bottom-left-radius: 11px;
pointer-events: none;
}
/* free 模式：左侧金黄色渐变竖条 = 用户手动拖放自定义位置 */
.vm-script-bubble--free::before {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: 4px;
background: linear-gradient(180deg, #ffe07a 0%, #f3b200 55%, #a37300 100%);
border-top-left-radius: 11px;
border-bottom-left-radius: 11px;
pointer-events: none;
}
.vm-script-bubble--free {
box-shadow:
0 18px 40px rgba(0, 0, 0, 0.58),
0 0 0 1px rgba(255, 255, 255, 0.04) inset,
0 0 30px rgba(255, 204, 64, 0.25),
0 0 32px rgba(91, 200, 255, 0.15) !important;
}
/* follow 模式：左侧 cyan 细竖条（跟随卡片标记） */
.vm-script-bubble--follow::before {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
background: linear-gradient(180deg, rgba(91, 200, 255, 0.95), rgba(91, 200, 255, 0.25));
border-top-left-radius: 11px;
border-bottom-left-radius: 11px;
pointer-events: none;
}
/* 顶栏 */
.vm-sb-head {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 7px 10px 7px 12px;
background: linear-gradient(90deg,
color-mix(in srgb, var(--cyan, #5BC8FF) 14%, transparent) 0%,
color-mix(in srgb, var(--purple, #9D4EDD) 10%, transparent) 100%);
border-bottom: 1px dashed rgba(91, 200, 255, 0.28);
user-select: none;
cursor: grab;
}
.vm-sb-head:hover {
background: linear-gradient(90deg,
color-mix(in srgb, var(--cyan, #5BC8FF) 22%, transparent) 0%,
color-mix(in srgb, var(--purple, #9D4EDD) 18%, transparent) 100%);
}
.vm-sb-head.vm-sb-drag { cursor: grab; }
.vm-script-bubble-root.vm-sb--dragging,
.vm-script-bubble-root.vm-sb--dragging .vm-sb-head { cursor: grabbing !important; }
.vm-script-bubble-root.vm-sb--dragging {
box-shadow:
0 22px 46px rgba(0, 0, 0, 0.62),
0 0 0 1px rgba(255, 255, 255, 0.04) inset,
0 0 40px rgba(91, 200, 255, 0.28),
0 0 46px rgba(157, 78, 221, 0.28);
transition: box-shadow 0.15s ease;
opacity: 0.97;
}
body.vm-sb-body-dragging,
body.vm-sb-body-dragging * { cursor: grabbing !important; user-select: none !important; -webkit-user-select: none !important; }
.vm-sb-title {
font-size: 12px;
font-weight: 700;
color: #d7ecff;
letter-spacing: 0.3px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-shadow: 0 0 6px rgba(91, 200, 255, 0.3);
min-width: 0;
}
.vm-sb-head-actions {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 6px;
}
.vm-sb-btn {
appearance: none;
-webkit-appearance: none;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(91, 200, 255, 0.28);
color: #eaf4ff;
font-size: 11px;
padding: 2px 8px;
border-radius: 7px;
cursor: pointer;
line-height: 1.5;
display: inline-flex;
align-items: center;
gap: 3px;
transition: background 0.12s ease, border-color 0.12s ease, transform 0.1s ease;
}
.vm-sb-btn:hover {
background: color-mix(in srgb, var(--cyan, #5BC8FF) 18%, rgba(255,255,255,0.04));
border-color: color-mix(in srgb, var(--cyan, #5BC8FF) 60%, transparent);
}
.vm-sb-btn:active { transform: translateY(1px); }
.vm-sb-btn.is-active {
background: color-mix(in srgb, var(--green, #39FF14) 22%, rgba(255,255,255,0.04));
border-color: color-mix(in srgb, var(--green, #39FF14) 55%, transparent);
color: #ddffd3;
box-shadow: 0 0 10px rgba(57, 255, 20, 0.2);
cursor: default;
}
.vm-sb-follow .vm-sb-follow-ico { font-size: 12px; }
.vm-sb-follow-text { font-size: 11px; }
.vm-sb-close {
font-size: 14px;
padding: 0 7px;
line-height: 1.3;
height: 20px;
align-items: center;
justify-content: center;
}
.vm-sb-pin-ico { font-size: 12px; }
/* 正文（滚动） */
.vm-sb-body {
flex: 1 1 auto;
min-height: 0;
padding: 8px 12px 10px 12px;
color: #dbeaff;
white-space: pre-wrap;
word-break: break-word;
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin;
scrollbar-color: color-mix(in srgb, var(--cyan, #5BC8FF) 45%, transparent) transparent;
}
.vm-sb-body::-webkit-scrollbar { width: 6px; }
.vm-sb-body::-webkit-scrollbar-thumb {
background: color-mix(in srgb, var(--cyan, #5BC8FF) 45%, transparent);
border-radius: 999px;
}
.vm-sb-body > br { display: block; content: ""; margin-bottom: 2px; }
.ws-vm-bubble-sec {
display: inline;
color: #ffe49c;
font-weight: 700;
margin-right: 2px;
text-shadow: 0 0 4px rgba(255, 195, 85, 0.3);
}
/* Resize 句柄：右(E) / 下(S) / 右下(SE)，pointer 事件穿透只有句柄响应 */
.vm-sb-resize {
position: absolute;
z-index: 3;
background: transparent;
}
.vm-sb-resize-e { top: 8px; bottom: 10px; right: -1px; width: 7px; cursor: ew-resize; }
.vm-sb-resize-s { left: 8px; right: 10px; bottom: -1px; height: 7px; cursor: ns-resize; }
.vm-sb-resize-se { right: 0; bottom: 0; width: 14px; height: 14px; cursor: nwse-resize; }
.vm-sb-resize-se::after {
content: "";
position: absolute;
right: 2px; bottom: 2px;
width: 8px; height: 8px;
border-right: 2px solid color-mix(in srgb, var(--cyan, #5BC8FF) 65%, transparent);
border-bottom: 2px solid color-mix(in srgb, var(--cyan, #5BC8FF) 65%, transparent);
border-bottom-right-radius: 3px;
pointer-events: none;
}
/* 跟随模式的指向箭头（定位在气泡底部）：默认"在卡上方"→ 箭朝下指向卡 */
.vm-sb-arrow {
display: none;
position: absolute;
left: 28px;
bottom: -7px;
width: 14px;
height: 14px;
background: #0b1022;
border-right: 1px solid color-mix(in srgb, var(--cyan, #5BC8FF) 48%, var(--border));
border-bottom: 1px solid color-mix(in srgb, var(--cyan, #5BC8FF) 48%, var(--border));
transform: rotate(45deg);
pointer-events: none;
box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.25);
}
.vm-script-bubble-root.vm-sb--has-arrow .vm-sb-arrow { display: block; }
.vm-sb-arrow.vm-sb-arrow--below {
/* 当气泡在卡下方时，箭头在气泡顶部朝上指 */
bottom: auto;
top: -7px;
transform: rotate(225deg);
}
/* =====================================================================
🔧 视频管理新增（v3 补丁）：
① 全局浮动视频预览播放器 VMVideoPopup 浮窗
② 分镜卡标题 📺弹出按钮
===================================================================== */
/* 分镜卡标题右侧：弹出按钮 + tag 包在一个容器内（避免溢出） */
.ws-vm-cell-title-right {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 5px;
min-width: 0;
}
.ws-vm-cell-popup-btn {
appearance: none;
-webkit-appearance: none;
display: inline-flex;
align-items: center;
gap: 3px;
padding: 1px 6px;
font-size: 10px;
font-weight: 600;
line-height: 1.45;
height: 20px;
color: #e8f6ff;
background: linear-gradient(180deg,
color-mix(in srgb, var(--cyan, #5BC8FF) 18%, rgba(17, 26, 46, 0.95)) 0%,
color-mix(in srgb, var(--purple, #9D4EDD) 14%, rgba(17, 26, 46, 0.95)) 100%);
border: 1px solid color-mix(in srgb, var(--cyan, #5BC8FF) 42%, var(--border));
border-radius: 6px;
cursor: pointer;
transition: transform 0.1s ease, box-shadow 0.12s ease, border-color 0.12s ease, filter 0.12s ease;
box-shadow: 0 0 8px rgba(91, 200, 255, 0.22);
}
.ws-vm-cell-popup-btn:hover {
filter: brightness(1.12);
box-shadow: 0 0 14px rgba(91, 200, 255, 0.35), 0 0 10px rgba(157, 78, 221, 0.32);
transform: translateY(-0.5px);
}
.ws-vm-cell-popup-btn:active { transform: translateY(0.5px); }
.ws-vm-cell-popup-btn.is-disabled,
.ws-vm-cell-popup-btn[disabled] {
opacity: 0.55;
cursor: not-allowed;
background: rgba(17, 26, 46, 0.95);
border-color: rgba(91, 200, 255, 0.18);
box-shadow: none;
color: #c4cee0;
filter: saturate(0.4);
}
/* ---------------- 浮动视频播放器浮窗 ---------------- */
.vm-video-popup-root {
position: fixed;
z-index: 2147482900; /* 与剧本气泡用同一个共享 z 起点，点击/拖动时 inline style 动态 bumpZ，谁最后点谁在上 */
min-width: 260px; /* 与 JS MIN_W=260 一致 */
min-height: 180px; /* 与 JS MIN_H=180 一致 */
background: #050812;
border: 1px solid color-mix(in srgb, var(--cyan, #5BC8FF) 52%, var(--border));
border-radius: 12px;
box-shadow:
0 16px 42px rgba(0, 0, 0, 0.6),
0 0 0 1px rgba(255, 255, 255, 0.04) inset,
0 0 26px rgba(91, 200, 255, 0.22);
backdrop-filter: blur(5px);
color: #e6f2ff;
display: flex;
flex-direction: column;
overflow: hidden;
opacity: 0;
transform: translateY(3px);
visibility: hidden;
transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s ease, box-shadow 0.15s ease;
font-size: 12.5px;
line-height: 1.6;
letter-spacing: 0.2px;
}
.vm-video-popup-root.vm-vp--visible {
opacity: 1;
transform: translateY(0);
visibility: visible;
pointer-events: auto;
}
/* 三模式左色条 */
.vm-video-popup-root::before {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: 4px;
pointer-events: none;
border-top-left-radius: 11px;
border-bottom-left-radius: 11px;
}
/* follow = cyan 细条（跟随卡） */
.vm-video-popup--follow::before {
width: 3px;
background: linear-gradient(180deg, rgba(91, 200, 255, 0.95), rgba(91, 200, 255, 0.25));
}
/* pinned = cyan→purple 粗条 */
.vm-video-popup--pinned::before {
background: linear-gradient(180deg, var(--cyan, #5BC8FF), var(--purple, #9D4EDD));
}
.vm-video-popup--pinned {
box-shadow:
0 20px 46px rgba(0, 0, 0, 0.6),
0 0 0 1px rgba(255, 255, 255, 0.04) inset,
0 0 30px rgba(157, 78, 221, 0.32),
0 0 32px rgba(91, 200, 255, 0.2);
}
/* free = 金→铜 粗条（用户自由拖放） */
.vm-video-popup--free::before {
background: linear-gradient(180deg, #ffe07a 0%, #f3b200 55%, #a37300 100%);
}
.vm-video-popup--free {
box-shadow:
0 20px 46px rgba(0, 0, 0, 0.6),
0 0 0 1px rgba(255, 255, 255, 0.04) inset,
0 0 30px rgba(255, 204, 64, 0.28),
0 0 32px rgba(91, 200, 255, 0.18);
}
/* 拖拽中加深阴影 */
.vm-video-popup-root.vm-vp--dragging {
box-shadow:
0 26px 54px rgba(0, 0, 0, 0.66),
0 0 0 1px rgba(255, 255, 255, 0.04) inset,
0 0 40px rgba(91, 200, 255, 0.34),
0 0 46px rgba(157, 78, 221, 0.32);
opacity: 0.97;
}
/* 标题栏 */
.vm-vp-head {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 6px 10px 6px 12px;
background: linear-gradient(90deg,
color-mix(in srgb, var(--cyan, #5BC8FF) 16%, transparent) 0%,
color-mix(in srgb, var(--purple, #9D4EDD) 12%, transparent) 100%);
border-bottom: 1px dashed rgba(91, 200, 255, 0.28);
cursor: grab;
user-select: none;
}
.vm-vp-head:hover {
background: linear-gradient(90deg,
color-mix(in srgb, var(--cyan, #5BC8FF) 26%, transparent) 0%,
color-mix(in srgb, var(--purple, #9D4EDD) 20%, transparent) 100%);
}
.vm-video-popup-root.vm-vp--dragging,
.vm-video-popup-root.vm-vp--dragging .vm-vp-head { cursor: grabbing !important; }
.vm-vp-title {
font-size: 12px;
font-weight: 700;
color: #d7ecff;
letter-spacing: 0.3px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-shadow: 0 0 6px rgba(91, 200, 255, 0.3);
min-width: 0;
flex: 1 1 auto;
}
.vm-vp-head-actions {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 5px;
}
.vm-vp-btn {
appearance: none;
-webkit-appearance: none;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(91, 200, 255, 0.3);
color: #eaf4ff;
font-size: 11px;
padding: 2px 8px;
border-radius: 7px;
cursor: pointer;
line-height: 1.5;
display: inline-flex;
align-items: center;
gap: 3px;
transition: background 0.12s ease, border-color 0.12s ease, transform 0.1s ease;
height: 22px;
white-space: nowrap;
}
.vm-vp-btn:hover {
background: color-mix(in srgb, var(--cyan, #5BC8FF) 20%, rgba(255, 255, 255, 0.04));
border-color: color-mix(in srgb, var(--cyan, #5BC8FF) 62%, transparent);
}
.vm-vp-btn:active { transform: translateY(1px); }
.vm-vp-btn.is-active {
background: color-mix(in srgb, var(--green, #39FF14) 22%, rgba(255, 255, 255, 0.04));
border-color: color-mix(in srgb, var(--green, #39FF14) 58%, transparent);
color: #ddffd3;
box-shadow: 0 0 10px rgba(57, 255, 20, 0.22);
}
.vm-vp-close {
height: 22px;
padding: 0 8px;
font-size: 14px;
line-height: 1.3;
}
.vm-vp-unlock-text, .vm-vp-pin-text, .vm-vp-follow-text { font-size: 10.5px; }
/* 视频容器 */
.vm-vp-video-wrap {
flex: 1 1 auto;
min-height: 0;
background: #000;
display: block;
overflow: hidden;
}
.vm-vp-video {
width: 100%;
height: 100%;
display: block;
object-fit: contain;
background: #000;
}
/* Resize 三句柄（E / S / SE） */
.vm-vp-resize {
position: absolute;
background: transparent;
z-index: 5;
}
.vm-vp-resize-e { top: 10px; bottom: 12px; right: -1px; width: 7px; cursor: ew-resize; }
.vm-vp-resize-s { left: 10px; right: 12px; bottom: -1px; height: 7px; cursor: ns-resize; }
.vm-vp-resize-se { right: 0; bottom: 0; width: 14px; height: 14px; cursor: nwse-resize; }
.vm-vp-resize-se::after {
content: "";
position: absolute;
right: 2px; bottom: 2px;
width: 8px; height: 8px;
border-right: 2px solid color-mix(in srgb, var(--cyan, #5BC8FF) 70%, transparent);
border-bottom: 2px solid color-mix(in srgb, var(--cyan, #5BC8FF) 70%, transparent);
border-bottom-right-radius: 3px;
pointer-events: none;
}
/* 跟随模式箭嘴（指向分镜卡） */
.vm-vp-arrow {
display: none;
position: absolute;
left: 28px;
bottom: -7px;
width: 14px;
height: 14px;
background: #050812;
border-right: 1px solid color-mix(in srgb, var(--cyan, #5BC8FF) 52%, var(--border));
border-bottom: 1px solid color-mix(in srgb, var(--cyan, #5BC8FF) 52%, var(--border));
transform: rotate(45deg);
pointer-events: none;
box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.28);
}
.vm-video-popup-root.vm-vp--has-arrow .vm-vp-arrow { display: block; }
.vm-vp-arrow.vm-vp-arrow--below {
bottom: auto;
top: -7px;
transform: rotate(225deg);
}
/* =====================================================================
🔧 J2 补丁 · 终极兜底（最后写 = 最高同优先级赢）
解决三个暗坑：① flex min-height:auto 撑破；② 派生区滚动条隐身；③ 派生 grid 高度被覆盖
===================================================================== */
/* ★★★ 坑 2 修复：cut-pro-panel-body 是 flex 子项，默认 min-height:auto = 子内容高度，
这会导致 10 个素材时 min-height=1200px，即使 max-height=1064px 也被浏览器忽略
(CSS 规范：min > max 时，以 min 为真实约束)
→ 强制 min-height:0 + 写死 height 双锁，overflow:hidden 逼内部滚 */
html body .cut-pro-lib,
html body .cut-pro-panel-body {
min-height: 0 !important;
-webkit-min-height: 0;
}
html body .cut-pro-lib > .cut-pro-panel {
min-height: 0 !important;
max-height: 100% !important;
overflow: hidden !important;
}
html body .cut-pro-lib > .cut-pro-panel > .cut-pro-panel-body {
/* FIX12：使用flex动态填充，移除硬编码calc(1120px - 56px) */
flex: 1 1 0% !important;
height: 0 !important;
min-height: 0 !important;
max-height: none !important;
overflow: hidden !important;
overflow-y: hidden !important;
overflow-x: hidden !important;
}
html body .cut-pro-lib {
min-height: 0 !important;
height: 100% !important; /* ⭐ FIX12：填满grid row1 */
max-height: none !important; /* ⭐ FIX12：移除硬编码1120px */
overflow: hidden !important;
}
/* ⭐ FIX13：需求要求 tree 高度=父面板100%（内容超出 → 父级或自身滚动），不再死锁 1050 整树高
并显式 row-gap:20px 确保 原始/生成 两 section 永不贴边重叠（双保险：gap + 自身 margin）*/
html body .cut-pro-lib-tree {
min-height: 0 !important;
height: 100% !important;
max-height: 100% !important;
overflow: auto !important;
overflow-x: hidden !important;
row-gap: 20px !important;
}
html body .cpl-section-derived {
min-height: 0 !important;
overflow: hidden !important;
}
html body .cpl-section-derived > .cpl-section-body {
min-height: 0 !important;
overflow: hidden !important;
}
/* ★★★ 坑 3 修复：派生区 grid 用 overflow-y:scroll（不是 auto）
auto 要等 scrollHeight > clientHeight 至少 1px 才出滚动条；
scroll = 永远给滚动条留位置 + 显示拇指（内容不够时只是灰拇指）→ 用户一定看得见 "这里能滚"！*/
html body #cutProDerivedGrid {
/* 允许无限增长，不固定高度 */
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 12px !important;
height: auto !important;
max-height: none !important;
min-height: 0 !important;
overflow: visible !important; /* 不内部滚动 */
overflow-x: hidden !important;
align-content: start !important;
padding-right: 6px !important;
box-sizing: content-box !important;
flex: none !important;
}
html body .cut-pro-lib-tree.orig-collapsed #cutProDerivedGrid {
/* 收拢态也允许无限增长 */
height: auto !important;
max-height: none !important;
min-height: 0 !important;
overflow: visible !important;
}
/* 紫色滚动条加宽加深：容易看到，容易拖 */
#cutProDerivedGrid::-webkit-scrollbar {
width: 8px !important;
max-width: 8px !important;
}
#cutProDerivedGrid::-webkit-scrollbar-thumb {
background: color-mix(in srgb, var(--purple, #9D4EDD) 55%, #1a0a33) !important;
border-radius: 4px !important;
min-height: 28px !important;
border: 1px solid color-mix(in srgb, var(--purple, #9D4EDD) 85%, #fff) !important;
}
#cutProDerivedGrid::-webkit-scrollbar-track {
background: color-mix(in srgb, var(--purple, #9D4EDD) 12%, #160a2a) !important;
border-radius: 4px !important;
width: 8px !important;
}
#cutProDerivedGrid::-webkit-scrollbar-thumb:hover {
background: color-mix(in srgb, var(--purple, #9D4EDD) 78%, #fff) !important;
}
/* 原始素材区滚动条也加宽加深（青蓝色 🟦，与紫色区分） */
.cpl-section-originals .cpl-card-grid::-webkit-scrollbar {
width: 8px !important;
}
.cpl-section-originals .cpl-card-grid::-webkit-scrollbar-thumb {
background: color-mix(in srgb, var(--cyan-strong, #5BC8FF) 55%, #0a2233) !important;
border-radius: 4px !important;
min-height: 28px !important;
border: 1px solid color-mix(in srgb, var(--cyan-strong, #5BC8FF) 85%, #fff) !important;
}
.cpl-section-originals .cpl-card-grid::-webkit-scrollbar-track {
background: color-mix(in srgb, var(--cyan-strong, #5BC8FF) 12%, #0a1622) !important;
border-radius: 4px !important;
}
/* J2g_20260817 终极截流 + 终极选择器（写在文件最后 = 同优先级赢所有之前的块）
解决 "生成素材显示了14个" 的诡异溢出问题
两层保险：
① 父容器（section-body）加 max-height+height+overflow:hidden → 哪怕 grid 被改成 auto，
父级也会把 >300/612 的像素物理切掉，用户眼睛绝对不会看到超出卡数！
② id + 2 类 组合选择器（#id.class.class 特异性高于任何纯class块）再锁 grid 高度
=================================================================*/
/* ① 父级截流 - 改为允许无限增长 */
html body .cpl-section-derived > .cpl-section-body {
height: auto !important;
max-height: none !important;
min-height: 0 !important;
overflow: visible !important; /* 不裁剪，允许内容溢出 */
box-sizing: border-box !important;
padding: 4px 8px !important;
margin: 0 !important;
}
/* ① 父级截流（收拢态也允许无限增长）*/
html body .cut-pro-lib-tree.orig-collapsed .cpl-section-derived > .cpl-section-body,
html body.cpl-orig-collapsed .cpl-section-derived > .cpl-section-body {
height: auto !important;
max-height: none !important;
min-height: 0 !important;
overflow: visible !important;
box-sizing: border-box !important;
padding: 4px 8px !important;
margin: 0 !important;
}
/* ② 终极核弹：派生 grid - 允许无限增长 */
html body #cutProDerivedGrid.cpl-card-grid.cpl-card-grid--derived {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 12px !important;
height: auto !important;
max-height: none !important;
min-height: 0 !important;
overflow: visible !important; /* 不内部滚动 */
overflow-x: hidden !important;
align-content: start !important;
padding: 0 6px 0 0 !important;
box-sizing: content-box !important;
flex: none !important;
}
html body .cut-pro-lib-tree.orig-collapsed #cutProDerivedGrid.cpl-card-grid.cpl-card-grid--derived,
html body.cpl-orig-collapsed #cutProDerivedGrid.cpl-card-grid.cpl-card-grid--derived {
height: auto !important;
max-height: none !important;
min-height: 0 !important;
}
/* ================================================================
J2h 2026-08-17：解决 "13 行白色滚动条" 问题
关键发现：之前只限制了派生 grid / body 的高度，
但 .cut-pro-lib-tree（整个两区容器）高度虽然设了 1050 但没强制 overflow:hidden →
当 13 行卡片把 grid 撑破，溢出的内容从 grid → section-body → section → tree，
父级 tree 的 overflow 是默认 visible/auto，于是 tree 自己出了一条白色滚动条！
用户手指滚动的是这条"整树滚动条" → 当然不是我们紫色/红色派生滚动条 → 感觉滚动条没作用。
同时 CSS var(--derived-grid-h) 作为 属性再兜底一层。
=================================================================*/
/* ⭐ FIX13 重写「墙1」：需求取消收放 → 高度动态 = 父面板 100%
物理截流不再 need（section/body 自己 overflow:hidden 即可）；
保留 row-gap:20px 强制 sections 分开（再重叠就见鬼了）。*/
html body .cut-pro-lib-tree,
html body #cutProLibTree,
html body [class*="cut-pro-lib-tree"] {
height: 100% !important;
max-height: 100% !important;
min-height: 0 !important;
overflow: auto !important;
overflow-x: hidden !important;
box-sizing: border-box !important;
row-gap: 20px !important;
}
/* 🧱 墙 2：panel-body / panel 外层也截流（FIX12：使用flex动态填充）*/
html body .cut-pro-panel-body {
flex: 1 1 0% !important;
height: 0 !important;
min-height: 0 !important;
max-height: none !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
html body .cut-pro-panel {
overflow: hidden !important;
max-height: none !important; /* ⭐ FIX12：移除硬编码1120px */
height: 100% !important; /* ⭐ FIX12：填满父容器 */
}
/* 🧱 墙 3：两个 section 本身也 height 固定 + overflow:hidden（section-body 溢出不会影响父级）*/
html body section.cpl-section.cpl-section-originals,
html body section#cutProOriginalsSection,
html body .cpl-section-originals {
overflow: hidden !important; /* 原始素材区保持横向滚动 */
}
html body section.cpl-section.cpl-section-derived,
html body section#cutProDerivedSection,
html body .cpl-section-derived {
overflow: visible !important; /* 生成素材区允许溢出，不裁剪 */
max-height: none !important; /* 移除最大高度限制 */
}
/* J4A D + ⭐ FIX14：根因修复 素材库/后台任务 Tabs 下边缘抖动
* 之前只禁了 section 相关 → 但 .cut-pro-lib / lib-tabs / panel-head 都是 transition:all 默认开启
* + __enforceCutProLayout__() 每 16ms / 1 帧 对 tabs/panel-head/tabpane 调 setProperty(height/pad/flex)
* → 每次调 style 触发 0.15~0.3s 平滑过渡（height/所有属性），连续帧叠加 → 下边缘持续抖动嗡嗡震。
* FIX14 双重保险：① 这里把所有 CutPro 顶层 tabs/head/tabpane/body/btn 明确写进禁过渡白名单
* ② 文件末尾（L21888 前）再追加 .cut-pro-layout * 通配兜底：彻底清零任何子元素 transition。*/
html body .cpl-section,
html body .cpl-section > .cpl-section-body,
html body .cpl-section > .cpl-section-body > .cpl-card-grid,
html body #cutProOriginalsSection,
html body #cutProOriginalsSection > .cpl-section-body,
html body #cutProOriginalsSection > .cpl-section-body > .cpl-card-grid,
html body #cutProDerivedSection,
html body #cutProDerivedSection > .cpl-section-body,
html body #cutProDerivedSection > .cpl-section-body > #cutProDerivedGrid,
/* ↓↓↓ FIX14 追加：整棵素材库 / 所有面板 / 所有 Tabs / 所有按钮 → 禁过渡禁动画 ↓↓↓ */
html body .cut-pro-lib,
html body .cut-pro-lib > *,
html body .cut-pro-lib-tabs,
html body .cut-pro-lib-tabs > *,
html body .cut-pro-lib-tab,
html body .cut-pro-lib-tabpane,
html body .cut-pro-lib-tabpane > *,
html body .cut-pro-panel,
html body .cut-pro-panel > *,
html body .cut-pro-panel-head,
html body .cut-pro-panel-head > *,
html body .cut-pro-panel-title,
html body .cut-pro-panel-actions,
html body .cut-pro-panel-body,
html body .cut-pro-btn,
html body .cut-pro-lib-tree,
html body .cut-pro-lib-tree > *,
html body .cut-pro-studio,
html body .cut-pro-studio > *,
html body .cut-pro-timeline,
html body .cut-pro-timeline > *,
html body .cut-pro-rightcol,
html body .cut-pro-rightcol > * {
transition: none !important;
-webkit-transition: none !important;
animation: none !important;
-webkit-animation: none !important;
}
/* ⭐ FIX13：需求1 原始素材高度固定为 1排（92px）不可变。禁止折叠(2排)高度。*/
html body #cutProOriginalsSection > .cpl-section-body {
max-height: 92px !important;
height: 92px !important;
min-height: 92px !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
/* 收拢时原始 section body = 0（完全收起不占高度）*/
html body .cut-pro-lib-tree.orig-collapsed #cutProOriginalsSection > .cpl-section-body,
html body.cpl-orig-collapsed #cutProOriginalsSection > .cpl-section-body {
height: 0 !important;
max-height: 0 !important;
min-height: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
overflow: hidden !important;
}
/* 🧱 墙 4：派生 grid 滚动条 thumb 强制【亮红色】（一眼分辨滚动容器是不是我们的 dg）
从 J2h 起，用户只要看到：
· 红滚动条在派生素材区域内 = 正确✅
· 白/灰色条在外面 = 整树滚动条又漏出来了❌ */
html body #cutProDerivedGrid::-webkit-scrollbar {
width: 10px !important;
background: #2a0a0a !important;
}
html body #cutProDerivedGrid::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #ff1f3f, #ff8a8a) !important;
border-radius: 4px !important;
border: 1px solid #7a0012 !important;
box-shadow: 0 0 6px rgba(255,40,70,.85) !important;
}
html body #cutProDerivedGrid::-webkit-scrollbar-track {
background: #1b0505 !important;
}
/* Firefox */
html body #cutProDerivedGrid {
scrollbar-color: #ff1f3f #2a0a0a !important;
scrollbar-width: thick !important;
}
/* ═══════════════════════════════════════════════════════════════
J2i 2026-08-17 终极核打击：高度还是泄漏？三重堵：
A) 每张派生卡 height 144px + overflow:hidden（左栏360宽→144卡=16:9图+namebar无黑边，与原始同尺寸）
B) grid-auto-rows 强制每行 144px（原始/生成统一）
C) contain:size layout + content-visibility:auto（不改变渲染容器尺寸模型）
═══════════════════════════════════════════════════════════════ */
/* A) 派生卡锁 144px（与原始卡完全相同尺寸，不再有旧200黑边）*/
html body #cutProDerivedGrid.cpl-card-grid > *,
html body #cutProDerivedGrid.cpl-card-grid > *::before,
html body #cutProDerivedGrid.cpl-card-grid > *::after,
html body #cutProDerivedGrid > .cpl-clip-card,
html body #cutProDerivedGrid > .cpl-card-item,
html body #cutProDerivedGrid > .cpl-shot-clip,
html body #cutProDerivedGrid > .cpl-derived-clip-card,
html body #cutProDerivedGrid > div,
html body #cutProDerivedGrid > section {
height: 72px !important;
max-height: 72px !important;
min-height: 72px !important;
overflow: hidden !important;
box-sizing: border-box !important;
width: 100% !important;
display: block !important;
margin: 0 !important;
padding: 0 !important;
contain: layout paint style !important;
}
/* B) grid-auto-rows 允许无限增长
⭐ FIX13：派生区不再限制行数，允许无限增长 */
html body #cutProDerivedGrid.cpl-card-grid.cpl-card-grid--derived {
grid-auto-rows: 72px !important;
grid-auto-flow: row !important;
grid-template-rows: none !important; /* 移除固定行数限制，允许无限增长 */
align-content: start !important;
justify-content: stretch !important;
justify-items: stretch !important;
}
/* C) 生成素材区 grid 不限高度，允许无限增长 */
html body #cutProDerivedGrid {
height: auto !important;
max-height: none !important;
min-height: 0 !important;
overflow: visible !important;
}
html body #cutProDerivedSection > .cpl-section-body {
height: auto !important;
max-height: none !important;
min-height: 0 !important;
overflow: visible !important;
}
/* ⭐ FIX13：tree 高度动态 = 父面板 100%，不再用变量锁死 1050（收放功能已取消，折叠变量不再用）。
再加 row-gap:20px 最终兜底，确保原始素材 section 与 生成素材 section 永久不贴边重叠。*/
html body .cut-pro-lib-tree {
height: 100% !important;
max-height: 100% !important;
min-height: 0 !important;
row-gap: 20px !important;
}
/* D) 派生区内所有 img/video/canvas 严格限高：防止卡片内容把卡片撑破（内容>200时，靠卡overflow:hidden裁掉）*/
html body #cutProDerivedGrid * img,
html body #cutProDerivedGrid * video,
html body #cutProDerivedGrid * canvas {
max-height: 49px !important; /* 72 - 约23px标题行 */
object-fit: cover !important;
height: auto !important;
width: 100% !important;
}
html body #cutProDerivedGrid * .cpl-clip-thumb,
html body #cutProDerivedGrid * .cpl-card-preview {
max-height: 49px !important;
overflow: hidden !important;
}
/* J2L_FP */
/* ═══════════════════════════════════════════════════════════════
回补 2026-08-17 白天修复（VN2.5 备份恢复风格时丢失）
共 7 组修复：精剪工作室2x2新布局 / 剪切卡行列宽高 / 控件统一44px高 /
剪切按钮11.5px字 / 剪切预览右青边框 / 红线对齐 / st-group样式
═══════════════════════════════════════════════════════════════ */
/* ─── 修复1：精剪工作室 st-grid 布局（画面单行 + 预览全屏）─── */
html body .st-grid {
grid-template-columns: 1fr !important;
grid-template-rows: 1fr !important;
grid-auto-rows: minmax(0, auto) !important;
/* ⭐ 只有预览区域，全屏填充 */
grid-template-areas:
"pv" !important;
height: 100% !important;
width: 100% !important;
min-height: 0 !important;
max-height: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
box-sizing: border-box !important;
overflow: hidden !important;
/* ⭐ 修复：强制拉伸填满父容器 */
align-items: stretch !important;
justify-items: stretch !important;
align-self: stretch !important;
justify-self: stretch !important;
}
/* 画面区域：已隐藏，保留grid-area兼容 */
html body .st-group--pic { grid-area: pic !important; min-height: 0 !important; height: auto !important; align-self: start !important; display: none !important; }
html body .st-group--cut { grid-area: cut !important; min-height: 0 !important; height: auto !important; align-self: start !important; }
html body .st-group--set { grid-area: set !important; min-height: 0 !important; height: auto !important; align-self: start !important; }
/* 预览区域：全屏填充 */
html body .st-group--pv { grid-area: pv !important; min-height: 0 !important; height: 100% !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; align-self: stretch !important; justify-self: stretch !important; display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; }
/* 预览框容器：填充 pv 区域 */
html body #cutProStudioPreview,
html body .st-preview-box {
flex: 1 1 auto !important;
height: 100% !important;
min-height: 0 !important;
width: 100% !important;
display: flex !important;
flex-direction: column !important;
}
/* ─── 修复2：四卡统一外观（头+体+边框）─── */
html body .st-group {
display: flex;
flex-direction: column;
gap: 0;
background: var(--bg-soft2, #0f1a2e);
border: 1px solid var(--border, #2a3a5c);
border-radius: 6px;
overflow: hidden;
min-width: 0 !important;
max-width: 100% !important;
width: 100% !important;
box-sizing: border-box !important;
}
html body .st-group-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 4px; /* FIX5 压缩：6→4 */
padding: 4px 8px; /* FIX5 压缩：6px 10px → 4px 8px */
height: 26px; /* FIX5 小一号：32→26（再减6px）*/
min-height: 26px;
max-height: 26px;
border-bottom: 1px solid var(--border, #2a3a5c);
background: linear-gradient(180deg, color-mix(in srgb, var(--cyan,#5BC8FF) 8%, transparent), transparent);
box-sizing: border-box !important;
flex: 0 0 auto !important;
}
html body .st-group-head .st-group-corner {
width: 2px; height: 10px; /* FIX5 小一号：3×12 → 2×10 */
background: linear-gradient(180deg, var(--cyan,#5BC8FF), transparent);
border-radius: 2px;
flex: 0 0 auto;
margin-right: 2px; /* FIX5：3→2 */
}
html body .st-group-head .st-group-title {
font-size: 11px; /* FIX5 小一号：12→11 */
font-weight: 700;
color: var(--cyan,#5BC8FF);
letter-spacing: 0.2px;
flex: 0 0 auto;
white-space: nowrap;
margin-right: auto;
}
html body .st-group-body {
padding: 5px; /* FIX5 死空间再压：9→5px */
gap: 4px; /* FIX5 死空间再压：7→4px */
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
box-sizing: border-box !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
/* FIX5 用户明确：精剪四卡绝对不能出滚动条，通过控件尺寸整体缩小塞进高度 */
overflow: visible !important;
overflow-x: visible !important;
overflow-y: visible !important;
}
/* ─── 画面区域：单行布局样式（旧版，保留兼容） ─── */
html body .st-group-body--pic-single {
padding: 4px 6px !important;
gap: 0 !important;
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
overflow: hidden !important;
}
html body .st-pic-row {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
gap: 6px !important;
width: 100% !important;
min-width: 0 !important;
align-items: center !important;
}
html body .st-pic-item {
display: flex !important;
flex-direction: column !important;
gap: 2px !important;
flex: 1 1 0 !important;
min-width: 0 !important;
align-items: stretch !important;
}
html body .st-pic-label {
font-size: 10px !important;
font-weight: 600 !important;
color: var(--text3, #89A0BF) !important;
letter-spacing: 0.2px !important;
line-height: 1 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
text-align: center !important;
padding: 0 !important;
margin: 0 !important;
}
html body .st-pic-item .st-ctl {
height: 26px !important;
min-height: 26px !important;
max-height: 26px !important;
font-size: 10px !important;
line-height: 1 !important;
padding: 2px 4px !important;
width: 100% !important;
min-width: 0 !important;
}
/* ─── 画面区域：紧凑单行布局样式（新版，所有元素在一行） ─── */
html body .st-group-body--pic-compact {
padding: 2px 4px !important;
gap: 0 !important;
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
overflow: hidden !important;
}
html body .st-pic-row-compact {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
gap: 4px !important;
width: 100% !important;
min-width: 0 !important;
align-items: center !important;
}
html body .st-pic-item-compact {
display: flex !important;
flex-direction: row !important; /* label和控件在同一行 */
gap: 2px !important;
flex: 1 1 0 !important;
min-width: 0 !important;
align-items: center !important;
padding: 0 !important;
margin: 0 !important;
}
html body .st-pic-label-compact {
font-size: 9px !important;
font-weight: 500 !important;
color: var(--text3, #89A0BF) !important;
letter-spacing: 0 !important;
line-height: 1 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
text-align: right !important;
padding: 0 2px 0 0 !important;
margin: 0 !important;
flex: 0 0 auto !important;
}
html body .st-ctl-compact {
height: 20px !important;
min-height: 20px !important;
max-height: 20px !important;
font-size: 10px !important;
line-height: 1 !important;
padding: 1px 3px !important;
width: 100% !important;
min-width: 0 !important;
flex: 1 1 auto !important;
}
/* 移除st-group-head以节省空间 */
html body .st-group--pic > .st-group-head {
display: none !important;
}
/* ─── 修复3：剪切卡内部行列 · 视频时长 115px 固定 + 时间段 flex:1 双行折行 ─── */
html body .st-cut-row {
display: flex;
flex-direction: column;
gap: 3px; /* FIX8：保持 label-值 间窄缝 */
width: 100% !important;
box-sizing: border-box !important;
min-width: 0 !important;
}
/* ⭐ FIX8：剪切按图1三段。段与段之间 margin-top 拉开（代替 body gap），
每段方向统一为 column：label 上 + 内容块 下。 */
html body .st-group--cut > .st-group-body {
display: flex !important;
flex-direction: column !important;
gap: 8px !important; /* 段间 8px，图感紧凑 */
padding: 5px 8px !important;
}
/* ── 段 1：视频时长 / 设置时间段 两列横向 ── */
html body .st-cut-row--meta {
flex-direction: row !important; /* 段内两列并行：左右 */
gap: 7px !important;
align-items: stretch !important;
margin: 0 !important;
}
html body .st-cut-col {
display: flex;
flex-direction: column;
gap: 3px; /* label 与 value 间 3px */
box-sizing: border-box !important;
min-width: 0 !important;
}
/* 左列：视频时长 — 固定 115px（保持宽，高度跟随控件缩小）*/
html body .st-cut-row--meta > .st-cut-col:first-child {
flex: 0 0 115px !important;
width: 115px !important;
max-width: 115px !important;
min-width: 115px !important;
}
html body #cutProStudioClipDurBox.st-cut-value {
width: 115px !important;
max-width: 115px !important;
min-width: 115px !important;
box-sizing: border-box !important;
}
/* 右列：设置时间段 — flex:1 自适应，支持双行折行 */
html body .st-cut-row--meta > .st-cut-col:last-child {
flex: 1 1 auto !important;
min-width: 0 !important;
}
html body .st-cut-label {
font-size: 10px; /* FIX5 小一号：11→10 */
font-weight: 600;
color: var(--text3, #89A0BF);
letter-spacing: 0.2px;
line-height: 1;
height: 11px; /* FIX5 小一号：14→11 */
min-height: 11px !important;
max-height: 11px !important;
flex: 0 0 auto;
white-space: nowrap;
}
html body .st-cut-value {
height: 34px !important; /* FIX5：44→34 */
min-height: 34px !important;
max-height: 34px !important;
box-sizing: border-box !important;
padding: 4px 8px !important;
background: var(--bg-soft, #101b30);
border: 1px solid var(--border, #2a3a5c);
border-radius: 4px;
color: var(--cyan,#5BC8FF);
font-family: ui-monospace, Menlo, Consolas, monospace;
font-size: 11px;
font-weight: 600;
line-height: 1.2;
display: flex;
align-items: center;
white-space: normal;
overflow-wrap: break-word;
word-break: break-all;
width: 100% !important;
min-width: 0 !important;
}
html body .st-cut-value--range {
justify-content: flex-start !important;
line-height: 1.15;
padding-top: 3px !important;
padding-bottom: 3px !important;
}
/* ── 段 2：剪切操作 → 改纵向（图1：label 上，三按钮下） ── */
html body .st-cut-row--ops {
flex-direction: column !important; /* FIX8：row→col 按图1 排 */
align-items: stretch !important; /* 按钮组 100% 宽 */
justify-content: flex-start !important;
gap: 3px !important; /* label 与 按钮 间窄缝 */
margin: 0 !important;
}
html body .st-cut-row--ops .st-cut-label--ops {
flex: 0 0 auto;
font-size: 10.5px !important; /* 图1 稍大 */
color: var(--text2, #B8CEE8);
align-self: flex-start !important; /* 左贴 */
margin-top: 0 !important; /* FIX8：去掉旧 top=11 补偿 */
width: 100% !important;
display: block !important;
text-align: left !important;
}
html body .st-cut-buttons {
flex: 1 1 auto;
width: 100% !important;
display: flex;
flex-direction: row;
gap: 6px;
align-items: stretch !important;
min-width: 0 !important;
justify-content: flex-start !important;
}
/* FIX8：三按钮保持 34 高 / 10 字，不换行；按图1 左右横向 1:1:1 */
html body .st-cut-buttons > .st-ve-btn {
height: 34px !important;
min-height: 34px !important;
max-height: 34px !important;
font-size: 10px !important;
line-height: 1.15 !important;
padding: 4px 6px !important;
box-sizing: border-box !important;
white-space: nowrap !important; /* FIX8：nowrap，不再多行折 */
display: flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
flex: 1 1 0% !important; /* 三按钮 1:1:1 等宽 */
min-width: 0 !important;
border-width: 1.5px !important;
letter-spacing: 0 !important;
font-weight: 700 !important;
overflow: hidden !important;
}
/* ── 段 3：视频片段 → 改纵向（图1：label 上，蓝色场景盒下全宽） ── */
html body .st-cut-row--clipref {
flex-direction: column !important; /* FIX8：row→col 按图1 排 */
align-items: stretch !important;
justify-content: flex-start !important;
gap: 3px !important;
margin: 0 !important; /* FIX8：去掉旧 mt=25 补偿 */
}
html body .st-cut-row--clipref .st-cut-label--clipref {
flex: 0 0 auto;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
font-size: 10.5px !important;
color: var(--text2, #B8CEE8);
margin: 0 !important;
align-self: flex-start !important;
white-space: nowrap;
letter-spacing: 0.2px;
display: block !important;
text-align: left !important;
}
/* FIX8：clipbox 按图1 蓝色外框 + 全宽 34px 高，"场景1/分镜1" 内左对齐 */
html body .st-cut-clipbox {
flex: 1 1 auto;
height: 34px !important;
min-height: 34px !important;
max-height: 34px !important;
width: 100% !important;
box-sizing: border-box !important;
padding: 7px 10px !important;
background: linear-gradient(180deg,
color-mix(in srgb, var(--cyan,#5BC8FF) 10%, #0F1B30) 0%,
color-mix(in srgb, var(--cyan,#5BC8FF) 4%, #0A1224) 100%);
border: 1px solid color-mix(in srgb, var(--cyan,#5BC8FF) 60%, #2a3a5c) !important;
box-shadow:
inset 0 0 0 1px color-mix(in srgb, var(--cyan,#5BC8FF) 22%, transparent),
0 0 10px -3px color-mix(in srgb, var(--cyan,#5BC8FF) 35%, transparent) !important;
border-radius: 5px;
color: var(--cyan,#5BC8FF);
font-family: ui-monospace, Menlo, Consolas, monospace;
font-size: 10.5px !important;
font-weight: 600 !important;
line-height: 1;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important; /* 左对齐场景1/分镜1 */
overflow: hidden !important;
}
html body .st-cut-clipbox b {
color: var(--cyan,#5BC8FF);
font-weight: 700;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ─── 修复4 FIX5：所有控件（画面/设置/剪切/预览 time/range/select）统一缩至 34px 高（原44，减10px）*/
html body .st-row {
display: grid;
grid-template-columns: 68px minmax(0, 1fr) 52px; /* FIX5：74/1fr/58 → 68/1fr/52，列宽同步缩 */
column-gap: 6px; /* FIX5：8→6 */
align-items: center !important;
justify-items: stretch !important;
width: 100% !important;
box-sizing: border-box !important;
min-width: 0 !important;
height: 34px !important; /* FIX5：44→34 */
min-height: 34px !important;
max-height: 34px !important;
}
html body .st-row--out {
grid-template-columns: 68px minmax(0, 1fr) !important;
}
html body .st-row > .st-label {
font-size: 10px; /* FIX5：11.5→10 */
font-weight: 600;
color: var(--text3, #89A0BF);
letter-spacing: 0.2px;
line-height: 1;
height: 34px; /* FIX5：44→34 */
display: flex !important;
align-items: center;
justify-content: flex-start;
padding: 0;
margin: 0;
text-align: left;
flex: 0 0 auto;
white-space: nowrap;
}
html body .st-row > .st-ctl,
html body .st-row > select.st-ctl,
html body .st-row > input[type="number"].st-ctl,
html body .cut-pro-panel .st-row > .st-ctl {
height: 34px !important; /* FIX5：44→34 */
min-height: 34px !important;
max-height: 34px !important;
box-sizing: border-box !important;
padding: 4px 8px !important; /* FIX5：6 10 → 4 8 */
background: var(--bg-soft, #101b30);
border: 1px solid var(--border, #2a3a5c);
border-radius: 4px;
color: var(--text, #DCE9FF);
font-size: 11px; /* FIX5：12.5→11 */
line-height: 1.15;
width: 100% !important;
min-width: 0 !important;
appearance: none;
-webkit-appearance: none;
}
html body .st-row--fx {
grid-template-columns: 20px minmax(0, 1fr) 52px !important; /* FIX5：24→20 icon更窄 */
column-gap: 6px !important;
}
html body .st-row--fx > .st-fx-icon {
width: 20px; /* FIX5：24→20 */
height: 34px !important; /* FIX5：44→34 */
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 14px !important; /* FIX5：16→14 */
color: var(--cyan,#5BC8FF);
padding: 0;
margin: 0;
}
html body .st-row--fx > .st-range {
height: 34px !important; /* FIX5：44→34 */
min-height: 34px !important;
max-height: 34px !important;
padding: 0 !important;
margin: 0 !important;
box-sizing: border-box !important;
width: 100% !important;
min-width: 0 !important;
align-self: center;
}
html body .st-row--fx > .st-val {
height: 34px !important; /* FIX5：44→34 */
min-height: 34px !important;
max-height: 34px !important;
box-sizing: border-box !important;
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
padding: 0 2px 0 0 !important;
font-family: ui-monospace, Menlo, Consolas, monospace;
font-size: 10.5px !important; /* FIX5：12→10.5 */
font-weight: 600 !important;
color: var(--cyan,#5BC8FF);
white-space: nowrap;
}
/* ─── 修复5：剪切 / 预览 组 body 的 右边框 2px 纯青色 + 内外双层发光（高可见性）─── */
html body .st-group--cut > .st-group-body {
border-right: 2px solid var(--cyan, #5BC8FF) !important;
box-shadow:
inset -2px 0 0 0 color-mix(in srgb, var(--cyan,#5BC8FF) 55%, transparent),
-2px 0 0 0 color-mix(in srgb, var(--cyan,#5BC8FF) 40%, transparent),
-5px 0 14px -3px color-mix(in srgb, var(--cyan,#5BC8FF) 50%, transparent) !important;
}
html body .st-group--pv > .st-group-body {
border-right: 2px solid var(--cyan, #5BC8FF) !important;
box-shadow:
inset -2px 0 0 0 color-mix(in srgb, var(--cyan,#5BC8FF) 55%, transparent),
-2px 0 0 0 color-mix(in srgb, var(--cyan,#5BC8FF) 40%, transparent),
-5px 0 14px -3px color-mix(in srgb, var(--cyan,#5BC8FF) 50%, transparent) !important;
/* ⭐ 预览区域body全屏填充 */
flex: 1 1 auto !important;
min-height: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 7px !important;
padding: 8px !important;
}
/* 画面 / 设置 卡也同步加轻微右描边，保持视觉统一 */
html body .st-group--pic > .st-group-body,
html body .st-group--set > .st-group-body {
border-right: 1px solid color-mix(in srgb, var(--cyan,#5BC8FF) 48%, var(--border)) !important;
}
/* ─── 修复6：设置卡（左下）的「默认」按钮样式 ─── */
html body .st-set-default-btn {
margin-left: auto;
flex: 0 0 auto;
height: 24px !important;
min-height: 24px !important;
padding: 0 10px !important;
font-size: 11px !important;
font-weight: 600;
color: #fff;
background: transparent;
border: 1px solid #1a1a1a;
border-radius: 12px;
outline: 1px solid var(--cyan,#5BC8FF);
outline-offset: -2px;
cursor: pointer;
letter-spacing: 0.3px;
transition: filter .15s ease;
white-space: nowrap;
}
html body .st-set-default-btn:hover { filter: brightness(1.2); }
html body .st-sep {
height: 1px;
margin: 4px 0;
background: linear-gradient(90deg, transparent, var(--border, #2a3a5c) 30%, var(--border, #2a3a5c) 70%, transparent);
}
/* ═══════════════════════════════════════════════════════════════
FIX7+8：设置卡（左下 st-group--set）
FIX7：控件高度整体缩小一倍（从 34 → 约 18-20px 基准）
FIX8：6 行 + 1 分隔线 从上到下 均匀分布 = 7 条 grid 轨道 minmax(0,1fr) 等分
═══════════════════════════════════════════════════════════════ */
/* FIX8：body 改为 grid 7 轨道等分（淡入/淡出/分隔线/亮度/对比度/饱和度/色相 = 7 个 slot）
让 6 行均匀占据高度，不再 20px 固定堆在上方留空白 */
html body .st-group--set.st-group > .st-group-body {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
grid-template-rows: repeat(7, minmax(0, 1fr)) !important;
row-gap: 3px !important;
column-gap: 0 !important;
padding: 3px 5px !important;
height: 100% !important;
min-height: 0 !important;
max-height: 100% !important;
box-sizing: border-box !important;
align-items: stretch !important;
justify-items: stretch !important;
overflow: hidden !important;
}
/* ① FIX7+8：行容器 = 占满各自 grid 轨道 100% 高，列 16/1fr/46 */
html body .st-group--set.st-group > .st-group-body > .st-row {
height: 100% !important;
min-height: 0 !important;
max-height: 100% !important;
width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
display: grid !important;
align-content: center !important;
align-items: center !important;
justify-items: stretch !important;
}
html body .st-group--set.st-group > .st-group-body > .st-row--fx {
grid-template-columns: 16px minmax(0, 1fr) 46px !important; /* icon/滑块/数值 三列 */
column-gap: 4px !important;
}
/* ② 设置卡 st-fx-icon：行内 100% 高（基准 ~18-20px），字号 9.5 */
html body .st-group--set.st-group > .st-group-body > .st-row--fx > .st-fx-icon {
width: 16px !important;
height: 100% !important;
min-height: 0 !important;
max-height: 100% !important;
font-size: 9.5px !important;
}
/* ③ 设置卡 st-range：行内 100% 高 */
html body .st-group--set.st-group > .st-group-body > .st-row--fx > .st-range,
html body .st-group-body .st-group--set.st-group > .st-group-body > .st-row--fx > .st-range {
height: 100% !important;
min-height: 0 !important;
max-height: 100% !important;
padding: 0 !important;
margin: 0 !important;
align-self: stretch !important;
box-sizing: border-box !important;
}
/* ④ 设置卡 st-val（右数值框）：行内 100% 高，字号 8.5 */
html body .st-group--set.st-group > .st-group-body > .st-row--fx > .st-val,
html body .st-group-body .st-group--set.st-group > .st-group-body > .st-row--fx > .st-val {
height: 100% !important;
min-height: 0 !important;
max-height: 100% !important;
font-size: 8.5px !important;
padding: 0 1px 0 0 !important;
box-sizing: border-box !important;
align-self: stretch !important;
}
/* ⑤ 设置卡 head + 默认按钮 */
html body .st-group--set.st-group > .st-group-head {
height: 20px !important;
min-height: 20px !important;
max-height: 20px !important;
padding: 0 8px !important;
}
html body .st-group--set.st-group > .st-group-head > .st-group-title {
font-size: 9px !important;
letter-spacing: 1px !important;
}
/* ⑥ 设置卡"默认"按钮：18px 高，字号 9 */
html body .st-group--set.st-group > .st-group-head > .st-set-default-btn {
height: 18px !important;
min-height: 18px !important;
max-height: 18px !important;
padding: 0 7px !important;
font-size: 9px !important;
border-radius: 9px !important;
}
/* ⑦ FIX8：分隔线 st-sep 占满第 3 轨道 100%，线居中 */
html body .st-group--set.st-group > .st-group-body > .st-sep {
height: 100% !important;
min-height: 0 !important;
max-height: 100% !important;
margin: 0 !important;
box-sizing: border-box !important;
display: flex !important;
align-items: center !important;
justify-content: stretch !important;
border: none !important;
background: transparent !important;
position: relative;
}
html body .st-group--set.st-group > .st-group-body > .st-sep::before {
content: '';
display: block;
width: 100%;
height: 1px;
background: linear-gradient(90deg, transparent, var(--border, #2a3a5c) 30%, var(--border, #2a3a5c) 70%, transparent);
}
/* ─── 预览卡播放器样式 ─── */
html body .st-preview {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
box-sizing: border-box !important;
display: flex;
flex-direction: column;
gap: 4px;
/* ⭐ 自适应填充 */
flex: 1 1 auto !important;
min-height: 0 !important;
/* ⭐ 允许控件条溢出可见，防止被裁切 */
overflow: visible !important;
}
html body .st-preview-box {
position: relative;
width: 100% !important;
/* ⭐ 预览区域：可以缩小以容纳控件条 */
flex: 1 1 auto !important;
min-height: 0 !important;
background: #000;
border: 1px solid var(--border, #2a3a5c);
border-radius: 8px;
overflow: visible !important;
box-sizing: border-box !important;
min-width: 0 !important;
}
html body .st-preview-inner {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 20px;
color: var(--text3, #89A0BF);
font-size: 12.5px;
line-height: 1.6;
}
html body .st-pv-ctrls {
position: static;
width: 100%;
padding: 8px 10px;
display: flex;
flex-direction: column;
gap: 4px;
box-sizing: border-box;
background: rgba(10, 15, 25, 0.95);
border-radius: 0 0 8px 8px;
margin-top: 4px;
/* ⭐ 确保控件条永不被挤压 */
flex-shrink: 0 !important;
}
html body .st-pv-bar {
position: relative;
height: 8px;
background: rgba(255,255,255,0.12);
border-radius: 4px;
cursor: pointer;
}
html body .st-pv-bar-fill {
position: absolute;
left: 0; top: 0; bottom: 0;
background: linear-gradient(90deg, var(--cyan,#5BC8FF), #7fdfff);
border-radius: 4px;
width: 0%;
}
html body .st-pv-bar-thumb {
position: absolute;
top: 50%;
width: 14px; height: 14px;
background: #fff;
border: 2px solid var(--cyan,#5BC8FF);
border-radius: 50%;
transform: translate(-50%, -50%);
left: 0%;
box-shadow: 0 0 6px rgba(91,200,255,.7);
cursor: grab;
}
html body .st-pv-bar-thumb:active {
cursor: grabbing;
}
html body .st-pv-row {
display: flex;
align-items: center;
gap: 8px;
height: 28px;
color: #fff;
font-size: 11.5px;
font-family: ui-monospace, Menlo, Consolas, monospace;
}
html body .st-pv-ic {
width: 26px; height: 26px;
border: none;
background: rgba(255,255,255,0.04);
color: #fff;
border-radius: 4px;
cursor: pointer;
font-size: 13px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
flex: 0 0 auto;
}
html body .st-pv-ic:hover { background: rgba(91,200,255,.35); }
html body .st-pv-time { flex: 0 0 auto; }
html body .st-pv-sp { flex: 1 1 auto; }
/* 预览下方按钮行（现在只有预览按钮可见） */
html body .st-pv-actions {
display: flex !important;
flex-direction: row !important;
gap: 6px;
width: 100% !important;
box-sizing: border-box !important;
}
html body .st-pv-actions > .cut-pro-btn {
height: 32px;
font-size: 11px !important;
padding: 0 12px !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 0 0 auto !important;
min-width: 80px !important;
}
/* ─── 修复8：红线对齐 · 素材库左栏「可编辑素材」标题横条 顶分隔线 与 剪切卡「视频片段」行 顶分隔线 对齐
JS sweepOnce 已经有闭环动态 margin-top/bottom 精算，这里 CSS 做兜底：
① 给 derived section 基础 -1px margin-top 补偿
② 确保 section 头的分隔线在正确位置 ─── */
html body section#cutProDerivedSection {
/* 默认基础偏移 -1px；sweepOnce JS 会在每次布局扫中按实际 rect 再做闭环微调整 */
margin-top: -1px !important;
}
/* ═══════════════════════════════════════════════════════════════════
★★★ 修复9：彻底干掉 VN2.5 旧版 28px / 30px 锁高对新版 44px 的覆盖冲突 ★★★
根因（特异性对比）：
· 旧 L18427 .st-row > *:nth-child(2):last-child { height:28px !important } 特异性(B=3)
→ 命中「输出行 2 列」场景：