/* ============================================================
   镜界 · AI 短剧工场  —  设计系统
   ============================================================ */

:root,
:root[data-theme="dark"] {
    --bg: #0a0c10;
    --bg-soft: #0d1015;
    --panel: #11141a;
    --panel-2: #161a21;
    --panel-3: #1c2129;
    --hover: #1f242d;
    --border: #232833;
    --border-soft: #1a1f27;
    --text: #e8ebf1;
    --text-2: #a4acba;
    --text-3: #6c7583;
    --accent: #7c5cff;
    --accent-2: #b06bff;
    --accent-ink: #ffffff;
    --accent-soft: rgba(124, 92, 255, .15);
    --accent-line: rgba(124, 92, 255, .38);
    --success: #2fbf71;
    --danger: #f2555a;
    --warn: #f5a524;
    --stage: #080a0e;
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, .55);
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, .28);
    --radius: 12px;
    --radius-sm: 9px;
}

:root[data-theme="light"] {
    --bg: #f5f6f9;
    --bg-soft: #ffffff;
    --panel: #ffffff;
    --panel-2: #fafbfd;
    --panel-3: #f1f3f8;
    --hover: #eef0f6;
    --border: #e2e6ee;
    --border-soft: #ecf0f6;
    --text: #171b23;
    --text-2: #5a6373;
    --text-3: #8d96a6;
    --accent: #6742f5;
    --accent-2: #8b5cf6;
    --accent-ink: #ffffff;
    --accent-soft: rgba(103, 66, 245, .09);
    --accent-line: rgba(103, 66, 245, .32);
    --success: #129a58;
    --danger: #dc3b40;
    --warn: #c47b06;
    --stage: #eceef4;
    --shadow-lg: 0 24px 60px rgba(20, 26, 44, .16);
    --shadow-sm: 0 1px 6px rgba(20, 26, 44, .07);
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    /* 深色 UI：原生滚动条（含 thin 滚动条）跟随深色配色，避免出现白色底滚动条 */
    color-scheme: dark;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
    font-size: 13.5px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
}

button, input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
::selection { background: var(--accent); color: #fff; }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--text-3); background-clip: content-box; }

/* ---------------------------------------------------------- 顶栏 */
.topbar {
    height: 56px;
    display: flex;
    align-items: center;
    gap: 26px;
    padding: 0 16px 0 18px;
    background: var(--panel);
    border-bottom: 1px solid var(--border);
    position: relative;
    z-index: 40;
}

.brand { display: flex; align-items: center; gap: 9px; }
.brand-mark {
    width: 30px; height: 30px; border-radius: 9px;
    display: grid; place-items: center;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
    color: #fff;
    box-shadow: 0 4px 14px rgba(124, 92, 255, .35);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text strong { font-size: 15px; letter-spacing: .06em; font-weight: 650; }
.brand-text em {
    font-style: normal; font-size: 9.5px; color: var(--text-3);
    letter-spacing: .18em; text-transform: uppercase;
}

.nav { display: flex; gap: 2px; }
.nav-item {
    display: flex; align-items: center; gap: 7px;
    padding: 7px 13px; border-radius: 8px;
    color: var(--text-2); font-size: 13px; font-weight: 500;
    transition: background .16s, color .16s;
}
.nav-item:hover { background: var(--hover); color: var(--text); }
.nav-item.is-active { background: var(--accent-soft); color: var(--accent); }
:root[data-theme="dark"] .nav-item.is-active { color: #b3a1ff; }

.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.model-badge {
    display: inline-flex; align-items: center; gap: 6px;
    height: 27px; padding: 0 10px;
    border: 1px solid var(--border); border-radius: 20px;
    font-size: 11.5px; color: var(--text-2);
    font-variant-numeric: tabular-nums;
    letter-spacing: .01em;
}
.model-badge .dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 3px rgba(47, 191, 113, .16);
}

/* ---------------------------------------------------------- 按钮 */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    height: 34px; padding: 0 14px;
    border: 1px solid var(--border);
    background: var(--panel-2);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 13px; font-weight: 500;
    cursor: pointer; white-space: nowrap;
    transition: background .15s, border-color .15s, transform .1s, box-shadow .15s, opacity .15s;
}
.btn:hover { background: var(--hover); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.btn-primary {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
    border-color: transparent; color: var(--accent-ink);
    box-shadow: 0 6px 18px rgba(124, 92, 255, .28);
}
.btn-primary:hover { filter: brightness(1.07); background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%); }

.btn-ghost { background: transparent; }
.btn-ghost:hover { background: var(--hover); }
.btn-danger-ghost { background: transparent; border-color: transparent; color: var(--danger); }
.btn-danger-ghost:hover { background: rgba(242, 85, 90, .1); }

.btn-sm { height: 28px; padding: 0 10px; font-size: 12px; }
.btn-lg { height: 46px; font-size: 14.5px; border-radius: 11px; width: 100%; font-weight: 600; }

.icon-btn {
    width: 32px; height: 32px; border-radius: 8px;
    display: grid; place-items: center;
    background: transparent; border: 1px solid transparent;
    color: var(--text-2); cursor: pointer;
    transition: background .15s, color .15s;
}
.icon-btn:hover { background: var(--hover); color: var(--text); }

/* ---------------------------------------------------------- 主区域 */
.app-main { height: calc(100vh - 56px); overflow: hidden; }

/* 三栏比例：预览 20% / 控制台 60% / 本镜素材 20% */
.studio {
    height: 100%;
    display: grid;
    grid-template-columns: 20% 60% 20%;
}

/* 窄屏时按比例会挤扁，退化为固定可用宽度 */
@media (max-width: 1100px) {
    .studio { grid-template-columns: minmax(240px, 22%) 1fr minmax(230px, 22%); }
}

.pane {
    display: flex; flex-direction: column;
    min-width: 0; min-height: 0;
    background: var(--panel);
    border-right: 1px solid var(--border);
}
.pane:last-child { border-right: none; }
.pane-preview { background: var(--bg-soft); }

.pane-head {
    height: 46px; flex: 0 0 46px;
    display: flex; align-items: center; gap: 10px;
    padding: 0 16px;
    border-bottom: 1px solid var(--border-soft);
}
.pane-title {
    font-size: 12.5px; font-weight: 600; letter-spacing: .04em;
    display: flex; align-items: baseline; gap: 7px;
}
.pane-title em {
    font-style: normal; font-size: 9.5px; color: var(--text-3);
    letter-spacing: .16em; font-weight: 500;
}
.pane-sub { margin-left: auto; font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.pane-sub b { color: var(--text-2); font-weight: 600; }
/* 参考图额度：超上限时明确提示「只提交前 N 张」，不让用户以为全都用上了 */
.pane-sub.ref-cap { padding: 1px 7px; border-radius: 999px; background: rgba(120, 130, 150, .12); color: var(--text-3); }
.pane-sub.ref-cap.is-warn { background: rgba(217, 144, 38, .16); color: #c07a12; font-weight: 600; }
.head-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.head-right .pane-sub { margin-left: 0; }

/* 匹配素材按钮 */
.btn-match {
    height: 26px; padding: 0 9px; gap: 5px;
    font-size: 11.5px;
    background: var(--accent-soft);
    border-color: var(--accent-line);
    color: var(--accent);
}
:root[data-theme="dark"] .btn-match { color: #b3a1ff; }
.btn-match:hover { background: var(--accent-soft); filter: brightness(1.12); }
.btn-match.is-busy { opacity: .65; pointer-events: none; }

.status-chip {
    display: inline-flex; align-items: center; gap: 6px;
    height: 24px; padding: 0 9px; border-radius: 20px;
    font-size: 11.5px; font-weight: 500;
    border: 1px solid var(--border);
    color: var(--text-2);
}
.status-chip::before {
    content: ""; width: 5px; height: 5px; border-radius: 50%;
    background: currentColor;
}
.status-chip.is-idle { color: var(--text-3); }
.status-chip.is-run { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.status-chip.is-run::before { animation: blink 1.1s infinite; }
.status-chip.is-ok { color: var(--success); border-color: rgba(47, 191, 113, .3); background: rgba(47, 191, 113, .09); }
.status-chip.is-fail { color: var(--danger); border-color: rgba(242, 85, 90, .3); background: rgba(242, 85, 90, .09); }

@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* ---------------------------------------------------------- 预览舞台 */
.stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    margin: 14px 16px 0;
    border-radius: 14px;
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(124, 92, 255, .10) 0%, transparent 58%),
        var(--stage);
    border: 1px solid var(--border-soft);
    display: grid; place-items: center;
    overflow: hidden;
}
:root[data-theme="light"] .stage {
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(103, 66, 245, .07) 0%, transparent 55%),
        var(--stage);
}

.stage video {
    width: 100%; height: 100%;
    object-fit: contain;
    background: #000;
    border-radius: 13px;
}

.stage-empty { text-align: center; color: var(--text-3); padding: 24px; }
.stage-empty-art { color: var(--text-3); display: grid; place-items: center; margin-bottom: 14px; }
.stage-empty-title { margin: 0 0 6px; font-size: 14px; color: var(--text-2); font-weight: 550; }
.stage-empty-desc { margin: 0; font-size: 12px; max-width: 300px; line-height: 1.7; }

.stage-loading {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
    background: color-mix(in srgb, var(--stage) 88%, transparent);
    backdrop-filter: blur(2px);
}
.stage-loading p { margin: 0; font-size: 12.5px; color: var(--text-2); }

.orbit { position: relative; width: 54px; height: 54px; }
.orbit span {
    position: absolute; inset: 0; border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: var(--accent);
    animation: spin 1.1s linear infinite;
}
.orbit span:nth-child(2) { inset: 7px; border-top-color: var(--accent-2); animation-duration: 1.6s; animation-direction: reverse; }
.orbit span:nth-child(3) { inset: 14px; border-top-color: rgba(124, 92, 255, .4); animation-duration: 2.2s; }
@keyframes spin { to { transform: rotate(360deg); } }

.progress-track {
    width: 168px; height: 3px; border-radius: 3px;
    background: var(--border); overflow: hidden;
}
.progress-track i {
    display: block; height: 100%; width: 0%;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    border-radius: 3px;
    transition: width .6s ease;
}

.stage-error {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    padding: 28px; text-align: center;
    background: color-mix(in srgb, var(--stage) 94%, transparent);
}
.err-title { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--danger); }
.err-msg { margin: 0 0 8px; font-size: 12px; color: var(--text-2); max-width: 420px; line-height: 1.7; word-break: break-word; white-space: pre-line; text-align: left; }

.filmstrip {
    flex: 0 0 auto;
    display: flex; gap: 8px;
    padding: 12px 16px 0;
    overflow-x: auto;
}
.filmstrip::-webkit-scrollbar { height: 5px; }
.film-card {
    position: relative;
    flex: 0 0 104px; height: 60px;
    border-radius: 8px; overflow: hidden;
    border: 1px solid var(--border);
    cursor: pointer; background: #000;
}
.film-card img, .film-card video { width: 100%; height: 100%; object-fit: cover; opacity: .8; }
.film-card.is-active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.film-card.is-active img, .film-card.is-active video { opacity: 1; }
.film-card .film-no {
    position: absolute; left: 5px; top: 4px;
    font-size: 10px; padding: 0 5px; border-radius: 4px;
    background: rgba(0, 0, 0, .6); color: #fff;
    font-variant-numeric: tabular-nums;
}

.pane-foot {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px 14px;
    min-height: 46px;
}
.meta-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.meta-chip {
    font-size: 11px; padding: 3px 8px; border-radius: 6px;
    background: var(--panel-3); color: var(--text-2);
    font-variant-numeric: tabular-nums;
}
.meta-chip.is-muted { background: transparent; padding-left: 0; color: var(--text-3); }
.meta-chip.is-model {
    background: transparent; color: var(--accent, #a78bfa); font-weight: 600;
    padding-left: 0; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 「参数已调整」角标：悬停看模型把哪个参数改成了什么 */
.meta-chip.is-warn { background: rgba(217, 144, 38, .18); color: #c07a12; font-weight: 600; cursor: help; }
.foot-actions { margin-left: auto; display: flex; gap: 8px; }

/* ---------------------------------------------------------- 控制台 */
.control-scroll {
    flex: 1 1 auto; min-height: 0;
    overflow-y: auto;
    padding: 14px 16px 20px;
    display: flex; flex-direction: column; gap: 15px;
}

.field { display: flex; flex-direction: column; gap: 6px; }
.field-label {
    display: flex; align-items: center; gap: 6px;
    font-size: 11.5px; color: var(--text-2); font-weight: 550;
}
.field-label em {
    font-style: normal; font-size: 10px; font-weight: 400;
    color: var(--text-3); margin-left: auto;
    background: var(--panel-3); padding: 1px 6px; border-radius: 4px;
}
.field-hint { font-size: 10.5px; color: var(--text-3); line-height: 1.5; }
.field-link { font-size: 10.5px; color: var(--accent); margin-left: auto; }

textarea, input[type="text"], input[type="password"], input[type="search"], input[type="number"], select {
    width: 100%;
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 9px 11px;
    color: var(--text);
    outline: none;
    resize: vertical;
    line-height: 1.65;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
/* 数字输入框：去掉浏览器默认步进按钮与外观差异（数量上限等） */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
textarea { min-height: 62px; font-size: 13px; }
textarea::placeholder, input::placeholder { color: var(--text-3); }
textarea:hover, input:hover, select:hover { border-color: var(--text-3); }
textarea:focus, input:focus, select:focus {
    border-color: var(--accent-line);
    box-shadow: 0 0 0 3px var(--accent-soft);
    background: var(--panel);
}
select { height: 34px; padding: 0 10px; cursor: pointer; }

.prompt-wrap { position: relative; }
.prompt-wrap textarea { padding-bottom: 26px; scrollbar-gutter: stable; }

/* 分镜提示词高亮层：与 textarea 同字体度量叠在上方，命中素材处画药丸（文字透明，透出下方真实文本） */
.prompt-hl {
    position: absolute; left: 0; top: 0; z-index: 2;
    pointer-events: none; overflow: hidden;
    padding: 9px 11px 26px; border: 1px solid transparent; border-radius: var(--radius-sm);
    font-size: 13px; line-height: 1.65; font-family: inherit;
    color: transparent; white-space: pre-wrap; overflow-wrap: break-word; word-break: break-word;
    box-sizing: border-box;
}
.prompt-hl .hl-pill {
    background: rgba(155, 124, 255, .22);
    border-radius: 999px;
    box-shadow: 0 0 0 1px rgba(155, 124, 255, .5);
    color: transparent;
    padding: 0;
}
.prompt-hl.is-err .hl-pill { background: rgba(240, 120, 120, .2); box-shadow: 0 0 0 1px rgba(240, 120, 120, .45); }

.mention-pop {
    position: absolute; left: 8px; right: 8px; bottom: 8px;
    max-height: 210px; overflow-y: auto;
    background: var(--panel-3);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    padding: 5px; z-index: 20;
}
.mention-item {
    display: flex; align-items: center; gap: 9px;
    padding: 6px 8px; border-radius: 7px; cursor: pointer;
}
.mention-item:hover, .mention-item.is-active { background: var(--accent-soft); }
.mention-item img { width: 26px; height: 26px; border-radius: 5px; object-fit: cover; }
.mention-item span { font-size: 12.5px; }
.mention-item em { font-style: normal; font-size: 10px; color: var(--text-3); margin-left: auto; }
.mention-empty { padding: 9px; font-size: 12px; color: var(--text-3); text-align: center; }

.chips-inline { display: flex; flex-wrap: wrap; gap: 5px; }
.chip {
    display: inline-flex; align-items: center; gap: 5px;
    height: 22px; padding: 0 8px;
    font-size: 11px; border-radius: 6px;
    background: var(--accent-soft); color: var(--accent);
    border: 1px solid var(--accent-line);
}
:root[data-theme="dark"] .chip { color: #b3a1ff; }
.chip button {
    border: 0; background: transparent; cursor: pointer;
    color: inherit; opacity: .7; padding: 0; line-height: 1;
    font-size: 13px;
}
.chip button:hover { opacity: 1; }

/* 镜头栏 */
.shots-bar {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 8px;
    padding: 8px 14px 0;
    overflow-x: auto;
}
.shots-tabs {
    display: flex; align-items: center; gap: 6px;
    flex: 1 1 auto; min-width: 0;
    flex-wrap: wrap;
    max-height: 108px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
    padding-right: 2px;
}
.shots-tabs::-webkit-scrollbar { width: 4px; }
.shots-tabs::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.shot-tab {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 9px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel-2);
    font-size: 11.5px; color: var(--text-2);
    cursor: pointer; white-space: nowrap;
    transition: all .14s;
    user-select: none;
}
.shot-tab:hover { border-color: var(--text-3); color: var(--text); }
.shot-tab.is-active {
    border-color: var(--accent-line);
    background: var(--accent-soft);
    color: var(--accent); font-weight: 600;
}
.shot-tab.has-prompt .shot-name::before {
    content: ''; display: inline-block;
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--accent); margin-right: 5px;
    vertical-align: 1.5px;
}
.shot-del {
    border: 0; background: transparent; cursor: pointer;
    color: inherit; opacity: .45; font-size: 13px; line-height: 1;
    padding: 0 1px;
}
.shot-del:hover { opacity: 1; color: var(--danger); }
.shot-add {
    flex: 0 0 auto;
    border: 1px dashed var(--border);
    background: transparent;
    border-radius: 8px;
    padding: 5px 9px;
    font-size: 11px; color: var(--text-3);
    cursor: pointer; white-space: nowrap;
    transition: all .14s;
}
.shot-add:hover { border-color: var(--accent-line); color: var(--accent); background: var(--accent-soft); }

/* 参数：一行下拉 */
.params-row {
    display: flex; align-items: stretch; gap: 6px;
    padding-top: 2px;
}
.dd { position: relative; flex: 1 1 0; min-width: 0; }
.dd-btn {
    width: 100%;
    display: flex; align-items: center; gap: 5px;
    height: 34px; padding: 0 8px;
    border: 1px solid var(--border);
    background: var(--panel-2);
    border-radius: 8px;
    font-size: 11px; color: var(--text-2);
    cursor: pointer;
    transition: all .14s;
}
.dd-btn em { font-style: normal; color: var(--text-3); flex: 0 0 auto; }
.dd-btn b {
    font-weight: 600; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    flex: 1 1 auto; text-align: right;
    font-variant-numeric: tabular-nums;
}
.dd-btn svg { flex: 0 0 auto; opacity: .55; transition: transform .15s; }
.dd-btn:hover, .dd.is-open .dd-btn { border-color: var(--accent-line); background: var(--accent-soft); }
.dd.is-open .dd-btn svg { transform: rotate(180deg); }
/* 模型下拉：占更宽的位置，菜单允许超宽展示完整模型名 */
.dd-model { flex: 2.2 1 0; }
.dd-model .dd-menu { left: 0; right: auto; min-width: 240px; max-width: 320px; }
.dd-menu {
    position: absolute; left: 0; right: 0; top: calc(100% + 5px);
    z-index: 60;
    display: none; flex-direction: column;
    padding: 4px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
    min-width: 128px;
}
.dd.is-open .dd-menu { display: flex; }
.dd-item {
    border: 0; background: transparent;
    text-align: left;
    padding: 6px 9px;
    border-radius: 7px;
    font-size: 11.5px; color: var(--text-2);
    cursor: pointer;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.dd-item:hover { background: var(--panel-3); color: var(--text); }
.dd-item.is-on { color: var(--accent); font-weight: 600; background: var(--accent-soft); }

/* 音频继承开关 */
.audio-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 0 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel-2);
    cursor: pointer; user-select: none;
    height: 34px; flex: 0 0 auto;
}
.audio-toggle em { font-style: normal; font-size: 11px; color: var(--text-2); white-space: nowrap; }
.audio-toggle input { display: none; }
.at-track {
    width: 26px; height: 15px; border-radius: 8px;
    background: var(--panel-3);
    border: 1px solid var(--border);
    position: relative; flex: 0 0 auto;
    transition: background .15s, border-color .15s;
}
.at-knob {
    position: absolute; top: 1px; left: 1px;
    width: 11px; height: 11px; border-radius: 50%;
    background: var(--text-3);
    transition: transform .15s, background .15s;
}
.audio-toggle input:checked + .at-track { background: var(--accent-soft); border-color: var(--accent-line); }
.audio-toggle input:checked + .at-track .at-knob { transform: translateX(11px); background: var(--accent); }

/* 生成按钮行 */
.gen-row { display: flex; gap: 8px; margin-top: 2px; }
.gen-row .generate-btn { flex: 1 1 auto; margin-top: 0; }
.gen-row > .btn-ghost { flex: 0 0 auto; }
.generate-btn { margin-top: 2px; }
.generate-btn .est {
    font-size: 11px; opacity: .8; font-weight: 400;
    margin-left: 2px;
    font-variant-numeric: tabular-nums;
}
.generate-btn.is-busy { pointer-events: none; opacity: .75; }

.control-note {
    margin: -4px 0 0;
    font-size: 10.5px; color: var(--text-3);
    text-align: center; line-height: 1.6;
}

/* ---------------------------------------------------------- 素材面板 */
.match-bar {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 8px;
    margin: 10px 12px 0;
    padding: 8px 10px;
    border-radius: 9px;
    background: var(--panel-2);
    border: 1px solid var(--border-soft);
    font-size: 11.5px; color: var(--text-2);
}
.match-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--text-3); flex: 0 0 auto;
}
.match-bar.is-hit { background: var(--accent-soft); border-color: var(--accent-line); color: var(--text); }
.match-bar.is-hit .match-dot { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.asset-scroll {
    flex: 1 1 auto; min-height: 0;
    overflow-y: auto;
    padding: 12px;
    display: flex; flex-direction: column; gap: 16px;
}
.asset-group { display: flex; flex-direction: column; gap: 8px; }
.group-title {
    display: flex; align-items: center;
    font-size: 10.5px; letter-spacing: .08em;
    color: var(--text-3); text-transform: uppercase;
    font-weight: 600;
}
.group-link { margin-left: auto; font-size: 10.5px; color: var(--accent); text-transform: none; letter-spacing: 0; }

.asset-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.asset-list.is-compact { gap: 6px; }

/* 迷你卡：右栏三列，悬停放大图片 */
.asset-list.is-mini { grid-template-columns: repeat(3, 1fr); gap: 6px; }
.asset-list.is-mini .asset-info { display: none; }
.asset-list.is-mini .asset-thumb { aspect-ratio: 1 / 1; }
.asset-list.is-mini .asset-thumb img {
    transition: transform .18s ease;
    will-change: transform;
}
.asset-list.is-mini .asset-card:hover { z-index: 5; }
.asset-list.is-mini .asset-card:hover .asset-thumb img { transform: scale(2.1); }

.asset-card.is-audio { cursor: default; }
.asset-card.is-audio .asset-thumb {
    display: grid; place-items: center;
    color: var(--text-3);
}
.audio-badge { display: grid; place-items: center; }
.asset-card.is-audio:hover { transform: none; }

.asset-badge {
    position: absolute; left: 5px; top: 5px;
    padding: 1.5px 5px;
    border-radius: 5px;
    background: rgba(10, 12, 16, .62);
    border: 1px solid rgba(255, 255, 255, .18);
    color: #fff; font-size: 9px; line-height: 1.3;
    backdrop-filter: blur(3px);
    pointer-events: none;
}
.asset-badge.is-voice { color: #8ee6b8; border-color: rgba(142, 230, 184, .35); }
.asset-badge.is-video { left: auto; right: 5px; color: #9ecbff; border-color: rgba(158, 203, 255, .35); }
.asset-video-ph {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%; min-height: 72px; font-size: 11px;
    color: var(--text-3); background: var(--panel-3);
}

.asset-card {
    position: relative;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--panel-2);
    cursor: pointer;
    transition: border-color .15s, transform .12s, box-shadow .15s;
}
.asset-card:hover { border-color: var(--text-3); transform: translateY(-1px); }
.asset-card.is-selected {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-soft);
}
.asset-thumb { position: relative; aspect-ratio: 4 / 3; background: var(--panel-3); overflow: hidden; }
.asset-thumb img { width: 100%; height: 100%; object-fit: cover; }
.asset-check {
    position: absolute; right: 5px; top: 5px;
    width: 17px; height: 17px; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(0, 0, 0, .45);
    border: 1px solid rgba(255, 255, 255, .45);
    color: transparent; font-size: 10px; line-height: 1;
    backdrop-filter: blur(3px);
    transition: all .15s;
}
.asset-card.is-selected .asset-check {
    background: var(--accent); border-color: var(--accent); color: #fff;
}
.asset-info { padding: 6px 7px 7px; }
.asset-name {
    display: block; font-size: 11.5px; font-weight: 550;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.asset-meta {
    display: flex; align-items: center; gap: 5px;
    font-size: 10px; color: var(--text-3); margin-top: 1px;
}
.asset-meta .cat { color: var(--text-2); }
.asset-meta .score { margin-left: auto; color: var(--accent); font-variant-numeric: tabular-nums; }
.asset-card.is-compact .asset-thumb { aspect-ratio: 1 / 1; }
.asset-card.is-compact .asset-info { padding: 4px 6px 5px; }
.asset-card.is-compact .asset-name { font-size: 10.5px; }

.asset-hint {
    grid-column: 1 / -1;
    padding: 18px 10px;
    text-align: center;
    font-size: 11.5px; color: var(--text-3);
    border: 1px dashed var(--border);
    border-radius: 9px;
    line-height: 1.7;
}

.upload-zone {
    flex: 0 0 auto;
    margin: 0 12px 12px;
    height: 54px;
    display: flex; align-items: center; justify-content: center; gap: 9px;
    border: 1px dashed var(--border);
    border-radius: 10px;
    color: var(--text-2);
    font-size: 12px;
    cursor: pointer;
    transition: all .15s;
    background: var(--panel-2);
}
.upload-zone:hover, .upload-zone.is-over {
    border-color: var(--accent-line);
    background: var(--accent-soft);
    color: var(--accent);
}
.upload-zone em {
    display: block; font-style: normal;
    font-size: 10px; color: var(--text-3);
}

/* ---------------------------------------------------------- 素材库页 */
.library-page {
    height: 100%;
    overflow-y: auto;
    padding: 26px 30px 60px;
    max-width: 1420px;
    margin: 0 auto;
}

.page-head { display: flex; align-items: flex-start; gap: 24px; margin-bottom: 18px; }
.page-head h1 { margin: 0 0 6px; font-size: 21px; font-weight: 650; letter-spacing: -.01em; }
.page-desc { margin: 0; font-size: 12.5px; color: var(--text-2); max-width: 620px; line-height: 1.7; }
.page-desc code {
    background: var(--panel-3); padding: 1px 5px; border-radius: 4px;
    font-size: 11.5px; color: var(--accent);
}
.page-head-actions { margin-left: auto; display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }

.search-box {
    display: flex; align-items: center; gap: 7px;
    height: 34px; padding: 0 11px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-3);
    transition: border-color .15s, box-shadow .15s;
}
.search-box:focus-within { border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-soft); }
.search-box input {
    width: 170px; border: 0; background: transparent; padding: 0;
    outline: none; box-shadow: none;
}
.search-box input:focus { box-shadow: none; background: transparent; }

.library-toolbar { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.filter-tabs { display: flex; gap: 4px; }
.filter-tab {
    height: 28px; padding: 0 11px;
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid transparent; border-radius: 7px;
    background: transparent; color: var(--text-2);
    font-size: 12px; cursor: pointer;
    transition: all .14s;
}
.filter-tab b {
    font-weight: 500; font-size: 10.5px;
    color: var(--text-3); font-variant-numeric: tabular-nums;
}
.filter-tab:hover { background: var(--hover); color: var(--text); }
.filter-tab.is-active { background: var(--accent-soft); color: var(--accent); }
.filter-tab.is-active b { color: inherit; opacity: .7; }

.auto-name-toggle {
    margin-left: auto; display: flex; align-items: center; gap: 6px;
    font-size: 11.5px; color: var(--text-3); cursor: pointer;
}
.auto-name-toggle input { accent-color: var(--accent); }

.dropzone {
    position: relative;
    border: 1.5px dashed var(--border);
    border-radius: 14px;
    background: var(--panel);
    padding: 26px;
    margin-bottom: 22px;
    cursor: pointer;
    transition: all .16s;
    overflow: hidden;
}
.dropzone:hover, .dropzone.is-over {
    border-color: var(--accent-line);
    background: var(--accent-soft);
}
.dropzone-inner { display: flex; flex-direction: column; align-items: center; gap: 5px; color: var(--text-3); }
.dropzone-inner p { margin: 0; font-size: 12.5px; }
.dropzone-inner strong { color: var(--text); font-weight: 550; font-size: 13px; }
.dropzone-hint { font-size: 11px !important; color: var(--text-3); }
.dropzone.is-over .dropzone-inner, .dropzone:hover .dropzone-inner { color: var(--accent); }

.dropzone-progress {
    position: absolute; inset: 0;
    background: color-mix(in srgb, var(--panel) 92%, transparent);
    backdrop-filter: blur(2px);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    padding: 20px;
}
.dp-text { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--text-2); }
.dp-text b { font-variant-numeric: tabular-nums; color: var(--text); }

.asset-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 14px;
}
.grid-card {
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    background: var(--panel);
    transition: border-color .15s, box-shadow .15s, transform .12s;
    position: relative;
}
.grid-card:hover { border-color: var(--text-3); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.grid-thumb { position: relative; aspect-ratio: 4 / 3; background: var(--panel-3); overflow: hidden; }
.grid-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.grid-card:hover .grid-thumb img { transform: scale(1.04); }
.grid-cat {
    position: absolute; left: 7px; top: 7px;
    font-size: 10px; padding: 2px 7px; border-radius: 5px;
    background: rgba(8, 10, 14, .62); color: #fff;
    backdrop-filter: blur(4px);
    letter-spacing: .02em;
}
.grid-actions {
    position: absolute; right: 6px; top: 6px;
    display: flex; gap: 4px;
    opacity: 0; transform: translateY(-3px);
    transition: all .16s;
}
.grid-card:hover .grid-actions { opacity: 1; transform: none; }
.grid-act {
    width: 25px; height: 25px; border-radius: 6px;
    display: grid; place-items: center;
    background: rgba(8, 10, 14, .62); color: #fff;
    border: 1px solid rgba(255, 255, 255, .12);
    cursor: pointer; backdrop-filter: blur(4px);
    transition: background .14s;
}
.grid-act:hover { background: var(--accent); border-color: var(--accent); }
.grid-act.is-danger:hover { background: var(--danger); border-color: var(--danger); }

.grid-info { padding: 9px 10px 10px; }
.grid-name {
    margin: 0; font-size: 12.5px; font-weight: 550;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.grid-aliases {
    margin: 2px 0 0; font-size: 10.5px; color: var(--text-3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    min-height: 15px;
}
.grid-foot {
    display: flex; align-items: center; gap: 6px;
    margin-top: 7px; font-size: 10px; color: var(--text-3);
    font-variant-numeric: tabular-nums;
}
.grid-copy {
    margin-left: auto; cursor: pointer;
    padding: 2px 6px; border-radius: 5px;
    border: 1px solid var(--border); background: transparent;
    color: var(--text-2); font-size: 10px;
}
.grid-copy:hover { border-color: var(--accent-line); color: var(--accent); background: var(--accent-soft); }

.empty-state { text-align: center; padding: 60px 20px; color: var(--text-3); }
.empty-title { margin: 0 0 6px; font-size: 14px; color: var(--text-2); font-weight: 550; }
.empty-desc { margin: 0; font-size: 12px; }

/* ---------------------------------------------------------- 弹窗 */
.modal {
    position: fixed; inset: 0; z-index: 100;
    display: grid; place-items: center;
    opacity: 0; visibility: hidden;
    transition: opacity .18s, visibility .18s;
}
.modal.is-open { opacity: 1; visibility: visible; }
.modal-mask { position: absolute; inset: 0; background: rgba(4, 6, 10, .62); backdrop-filter: blur(3px); }
.modal-panel {
    position: relative;
    width: min(560px, calc(100vw - 40px));
    max-height: calc(100vh - 80px);
    display: flex; flex-direction: column;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 15px;
    box-shadow: var(--shadow-lg);
    transform: translateY(8px) scale(.99);
    transition: transform .2s;
}
.modal.is-open .modal-panel { transform: none; }
.modal-sm { width: min(440px, calc(100vw - 40px)); }
.modal-head {
    display: flex; align-items: center;
    padding: 16px 18px 12px;
    border-bottom: 1px solid var(--border-soft);
}
.modal-head h2 { margin: 0; font-size: 14.5px; font-weight: 600; }
.modal-head .icon-btn { margin-left: auto; }
.modal-body {
    padding: 16px 18px;
    overflow-y: auto;
    display: flex; flex-direction: column; gap: 14px;
}
.modal-foot {
    display: flex; align-items: center; gap: 8px;
    padding: 13px 18px;
    border-top: 1px solid var(--border-soft);
}
.spacer { flex: 1; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.env-check {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding-top: 2px;
}
.env-item {
    font-size: 10.5px; padding: 3px 8px; border-radius: 6px;
    background: var(--panel-3); color: var(--text-3);
    display: inline-flex; align-items: center; gap: 5px;
}
.env-item.ok { color: var(--success); }
.env-item.no { color: var(--danger); }

.edit-preview {
    border-radius: 10px; overflow: hidden;
    background: var(--panel-3);
    aspect-ratio: 16 / 9;
}
.edit-preview img { width: 100%; height: 100%; object-fit: contain; }

/* Toast 位置避让任务栏 */
.toasts {
    position: fixed; right: 18px; bottom: 62px;
    display: flex; flex-direction: column; gap: 8px;
    z-index: 200; pointer-events: none;
}
.toast {
    min-width: 200px; max-width: 360px;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--panel-3);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    font-size: 12.5px; color: var(--text);
    display: flex; align-items: flex-start; gap: 8px;
    animation: toast-in .22s ease;
    pointer-events: auto;
}
.toast.is-out { animation: toast-out .2s ease forwards; }
.toast::before {
    content: ""; flex: 0 0 auto;
    width: 6px; height: 6px; margin-top: 6px; border-radius: 50%;
    background: var(--accent);
}
.toast.ok::before { background: var(--success); }
.toast.err::before { background: var(--danger); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes toast-out { to { opacity: 0; transform: translateX(12px); } }

/* ---------------------------------------------------------- 404 */
.notfound { height: 100%; display: grid; place-content: center; justify-items: center; gap: 6px; text-align: center; }
.nf-code { margin: 0; font-size: 56px; font-weight: 700; color: var(--border); letter-spacing: -.03em; }
.nf-title { margin: 0; font-size: 16px; font-weight: 600; }
.nf-desc { margin: 0 0 14px; font-size: 12.5px; color: var(--text-3); }

/* ---------------------------------------------------------- 任务队列 */
.queue-panel {
    margin-top: 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--panel-2);
    overflow: hidden;
}
.queue-head {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--border-soft);
}
.queue-title { font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.queue-sub { margin-left: auto; font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }

.queue-list { max-height: 232px; overflow-y: auto; }
.queue-empty { padding: 18px 12px; text-align: center; font-size: 11.5px; color: var(--text-3); }

.queue-item {
    padding: 9px 12px 10px;
    border-bottom: 1px solid var(--border-soft);
    cursor: pointer;
    transition: background .14s;
}
.queue-item:last-child { border-bottom: none; }
.queue-item:hover { background: var(--hover); }
.queue-item.is-active { background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent); }

.queue-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.queue-dot {
    width: 6px; height: 6px; border-radius: 50%; flex: 0 0 6px;
    background: var(--text-3);
}
.queue-dot.is-run { background: var(--accent); animation: blink 1.1s infinite; }
.queue-dot.is-ok { background: var(--success); }
.queue-dot.is-fail { background: var(--danger); }
.queue-dot.is-warn { background: var(--warn); }

.queue-prompt {
    flex: 1 1 auto; min-width: 0;
    font-size: 12px; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.queue-pct {
    flex: 0 0 auto; font-size: 11px; color: var(--text-3);
    font-variant-numeric: tabular-nums;
}

.queue-bar {
    height: 3px; border-radius: 3px; background: var(--border);
    margin: 6px 0 5px; overflow: hidden;
}
.queue-bar i {
    display: block; height: 100%; width: 0;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    transition: width .5s ease;
}
.queue-bar i.is-ok { background: var(--success); }
.queue-bar i.is-fail { background: var(--danger); }
.queue-bar i.is-warn { background: var(--warn); }

.queue-meta { font-size: 10.5px; color: var(--text-3); gap: 8px; }
.queue-meta > span:first-child { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.queue-state.is-run { color: var(--accent); }
.queue-state.is-ok { color: var(--success); }
.queue-state.is-fail { color: var(--danger); }
.queue-state.is-warn { color: var(--warn); }
.queue-time { font-variant-numeric: tabular-nums; }
.queue-err {
    margin-top: 5px; font-size: 10.5px; color: var(--danger);
    line-height: 1.5; word-break: break-all;
}

/* 内容审核类失败：不是系统故障（改提示词即可过），用琥珀色区分，别看起来像 bug */
.queue-err.is-review { color: var(--warn); }
.stage-error.is-review .err-title { color: var(--warn); }
.stage-error.is-review .err-msg { color: var(--text); }

/* ---------------------------------------------------------- 素材卡片补充 */
.asset-edit {
    position: absolute; left: 5px; top: 5px;
    width: 20px; height: 20px; border-radius: 6px;
    display: grid; place-items: center;
    background: rgba(10, 12, 16, .62);
    border: 1px solid rgba(255, 255, 255, .18);
    color: #fff; cursor: pointer;
    opacity: 0; pointer-events: none;
    transition: opacity .15s, background .15s;
}
.asset-card:hover .asset-edit { opacity: 1; pointer-events: auto; }
.asset-edit:hover { background: var(--accent); border-color: transparent; }
.asset-check { pointer-events: none; }

.group-link.as-btn {
    background: none; border: 0; padding: 0;
    font-size: 10.5px; color: var(--text-3); cursor: pointer;
}
.group-link.as-btn:hover { color: var(--accent); }

.param-label em.param-mem {
    font-style: normal; font-size: 9.5px; color: var(--text-3);
    border: 1px solid var(--border); border-radius: 4px;
    padding: 0 4px; margin-left: 5px;
}

/* ---------------------------------------------------------- 素材编辑弹窗 */
.modal-panel.modal-asset { width: 720px; max-width: calc(100vw - 40px); }
.am-grid { display: grid; grid-template-columns: 208px 1fr; gap: 16px; }
.am-left { display: flex; flex-direction: column; gap: 9px; }
.am-preview {
    border-radius: 10px; overflow: hidden;
    background: var(--panel-3);
    border: 1px solid var(--border);
    aspect-ratio: 3 / 4;
    display: grid; place-items: center;
}
.am-preview img { width: 100%; height: 100%; object-fit: contain; }

.am-sheet { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.am-sheet-item {
    position: relative; display: block;
    border-radius: 7px; overflow: hidden;
    border: 1px solid var(--border);
    background: var(--panel-3);
    aspect-ratio: 1 / 1;
}
.am-sheet-item img { width: 100%; height: 100%; object-fit: cover; }
.am-sheet-item span {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 2px 0 3px; text-align: center;
    font-size: 9px; color: #fff;
    background: linear-gradient(transparent, rgba(0, 0, 0, .72));
}

.am-sheet-btn { width: 100%; gap: 6px; }
.am-right { display: flex; flex-direction: column; gap: 11px; }

.grid-badge {
    position: absolute; left: 6px; bottom: 6px;
    height: 16px; padding: 0 6px; border-radius: 4px;
    display: inline-flex; align-items: center;
    font-size: 9px; font-weight: 500;
    background: rgba(124, 92, 255, .9); color: #fff;
}
.grid-badge.is-voice { background: rgba(47, 148, 96, .92); }

/* 素材库音频卡 */
.grid-card.is-audio .grid-thumb {
    display: grid; place-items: center;
    background: var(--panel-3);
}
.grid-audio { display: flex; flex-direction: column; align-items: center; gap: 7px; color: var(--text-3); }
.grid-audio audio { width: 86%; height: 30px; }

/* 队列镜头标签 */
.queue-shot {
    flex: 0 0 auto;
    padding: 1px 6px;
    border-radius: 5px;
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
    color: var(--accent);
    font-size: 10px; line-height: 1.5;
    white-space: nowrap;
}

/* 弹窗音频预览 */
.am-preview audio { width: 92%; }

/* 20% 窄栏下的间距微调 */
.pane-preview .stage { margin: 10px 10px 0; border-radius: 10px; }
.pane-preview .pane-foot { padding: 10px 10px 12px; min-height: 40px; gap: 6px; }
.pane-preview .stage-empty { padding: 14px; }
.pane-preview .stage-empty-desc { font-size: 11px; }
.pane-assets .pane-head { padding: 0 10px; gap: 6px; }
.pane-assets .match-bar { margin: 8px 10px 0; padding: 7px 9px; font-size: 11px; }
.pane-assets .asset-scroll { padding: 10px; gap: 14px; }
.pane-assets .upload-zone { margin: 0 10px 10px; height: 50px; }

/* ---------------------------------------------------------- 响应式 */
@media (max-width: 1360px) {
    .asset-list { grid-template-columns: 1fr 1fr; }
    .asset-list.is-compact { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1180px) {
    .brand-text em { display: none; }
    .pane-head { padding: 0 10px; gap: 6px; }
    .btn-match { padding: 0 7px; font-size: 11px; }
    .control-scroll { padding: 14px 16px 24px; }
}
@media (max-width: 980px) {
    body { overflow: auto; }
    .app-main { height: auto; overflow: visible; }
    .studio { grid-template-columns: 1fr; height: auto; }
    .pane { border-right: none; border-bottom: 1px solid var(--border); }
    .pane-preview { min-height: 62vh; }
    .pane-control, .pane-assets { max-height: none; }
    .control-scroll, .asset-scroll { overflow: visible; }
    .library-page { padding: 18px 16px 40px; }
    .page-head { flex-direction: column; }
    .page-head-actions { margin-left: 0; width: 100%; }
    .search-box { flex: 1; }
    .search-box input { width: 100%; }
    .topbar { gap: 12px; }
    .model-badge { display: none; }
}

/* ============================================================
   Windows 11 风格桌面：壁纸 / 图标 / 浮窗 / 任务栏
   ============================================================ */

.desktop {
    position: fixed; inset: 0;
    overflow: hidden;
}

/* ---- 壁纸（Win11 光晕风格） ---- */
.wallpaper {
    position: absolute; inset: 0;
    background:
        radial-gradient(38% 52% at 63% 40%, rgba(124, 92, 255, .50) 0%, transparent 70%),
        radial-gradient(30% 42% at 44% 56%, rgba(56, 132, 255, .38) 0%, transparent 72%),
        radial-gradient(26% 34% at 55% 62%, rgba(176, 107, 255, .30) 0%, transparent 70%),
        linear-gradient(135deg, #0a0e22 0%, #0e1735 42%, #171238 72%, #241a52 100%);
}
:root[data-theme="light"] .wallpaper {
    background:
        radial-gradient(38% 52% at 63% 40%, rgba(124, 92, 255, .26) 0%, transparent 70%),
        radial-gradient(30% 42% at 44% 56%, rgba(56, 132, 255, .20) 0%, transparent 72%),
        radial-gradient(26% 34% at 55% 62%, rgba(176, 107, 255, .16) 0%, transparent 70%),
        linear-gradient(135deg, #dfe6fb 0%, #e8ecfd 45%, #e3ddfb 75%, #efe6fd 100%);
}

/* ---- 桌面图标 ---- */
.desk-icons {
    position: absolute; top: 16px; left: 12px;
    display: flex; flex-direction: column; gap: 4px;
    z-index: 1;
}
.desk-icon {
    width: 86px;
    padding: 10px 4px 8px;
    display: flex; flex-direction: column; align-items: center; gap: 7px;
    background: transparent; border: 0; border-radius: 8px;
    color: #fff; cursor: pointer;
    transition: background .14s;
}
.desk-icon:hover { background: rgba(255, 255, 255, .13); }
:root[data-theme="light"] .desk-icon { color: #1c2233; text-shadow: none; }
:root[data-theme="light"] .desk-icon:hover { background: rgba(20, 30, 60, .08); }
.desk-icon .di-glyph {
    width: 46px; height: 46px; border-radius: 12px;
    display: grid; place-items: center; color: #fff;
    box-shadow: 0 6px 16px rgba(8, 12, 30, .38), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.di-studio { background: linear-gradient(135deg, #7c5cff, #b06bff); }
.di-library { background: linear-gradient(135deg, #2f8cf5, #38b6ff); }
.di-settings { background: linear-gradient(135deg, #5a6b85, #8494ad); }
.desk-icon .di-label {
    font-size: 12px; font-weight: 550;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .55);
}

/* ---- 浮窗 ---- */
.win {
    position: absolute;
    min-width: 360px; min-height: 240px;
    display: flex; flex-direction: column;
    background: color-mix(in srgb, var(--panel) 88%, transparent);
    backdrop-filter: blur(28px) saturate(1.35);
    -webkit-backdrop-filter: blur(28px) saturate(1.35);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 18px 44px rgba(4, 8, 22, .34);
    overflow: hidden;
}
.win.is-closed, .win.is-min { display: none; }
.win.is-focused {
    border-color: var(--border);
    box-shadow: 0 30px 80px rgba(4, 8, 22, .5), 0 0 0 1px rgba(124, 92, 255, .25);
}
.win.is-anim { transition: inset .22s ease, width .22s ease, height .22s ease, left .22s ease, top .22s ease; }
.win.is-max {
    left: 8px !important; top: 8px !important;
    width: auto !important; height: auto !important;
    right: 8px; bottom: calc(48px + 8px);
}

.win-head {
    height: 38px; flex: 0 0 38px;
    display: flex; align-items: center; gap: 8px;
    padding: 0 0 0 12px;
    border-bottom: 1px solid var(--border-soft);
    background: color-mix(in srgb, var(--panel-2) 55%, transparent);
    user-select: none;
    touch-action: none;
}
.win-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 12.5px; font-weight: 600; color: var(--text);
    white-space: nowrap; overflow: hidden;
}
.win-glyph {
    width: 22px; height: 22px; border-radius: 6px;
    display: grid; place-items: center; color: #fff;
    flex: 0 0 auto;
}
.wg-studio { background: linear-gradient(135deg, #7c5cff, #b06bff); }
.wg-library { background: linear-gradient(135deg, #2f8cf5, #38b6ff); }
.wg-settings { background: linear-gradient(135deg, #5a6b85, #8494ad); }

.win-ctl { margin-left: auto; display: flex; height: 100%; flex: 0 0 auto; }
.win-ctl button {
    width: 44px; height: 100%;
    border: 0; background: transparent;
    color: var(--text-2); cursor: pointer;
    display: grid; place-items: center;
    transition: background .12s, color .12s;
}
.win-ctl button:hover { background: var(--hover); color: var(--text); }
.win-ctl button.is-close:hover { background: #e81123; color: #fff; }

.win-body {
    flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column;
    position: relative;
}
.win-body > * { min-height: 0; }
.win-body > .studio { flex: 1 1 auto; height: auto; }

/* 项目流程「生成视频」视图：内嵌视频工作台占满可用高度（原视频管理窗口已移除） */
#pjViewVideo { height: calc(100vh - 240px); min-height: 560px; }
#pjViewVideo .studio { height: 100%; grid-template-rows: minmax(0, 1fr); }
.win-body > .library-page { flex: 1 1 auto; }
.win-body > .settings-page { flex: 1 1 auto; }

.win-grip {
    position: absolute; right: 0; bottom: 0;
    width: 16px; height: 16px;
    cursor: nwse-resize;
    touch-action: none;
    z-index: 5;
}

/* ---- 设置窗口内容 ---- */
.settings-page {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 18px 20px;
    display: flex; flex-direction: column; gap: 14px;
}
.settings-actions {
    display: flex; align-items: center; gap: 8px;
    padding-top: 4px;
    margin-top: auto;
}

/* ---- 任务栏 ---- */
.taskbar {
    position: fixed; left: 0; right: 0; bottom: 0; height: 48px;
    z-index: 500;
    display: flex; align-items: center;
    padding: 0 12px;
    background: color-mix(in srgb, var(--panel) 74%, transparent);
    backdrop-filter: blur(30px) saturate(1.5);
    -webkit-backdrop-filter: blur(30px) saturate(1.5);
    border-top: 1px solid var(--border-soft);
}
.tb-side { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.tb-brand {
    width: 34px; height: 34px; border-radius: 8px;
    display: grid; place-items: center;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
    color: #fff;
    box-shadow: 0 3px 10px rgba(124, 92, 255, .35);
}
.tb-center {
    position: absolute; left: 50%; transform: translateX(-50%);
    display: flex; gap: 3px;
}
.tb-btn {
    position: relative;
    width: 42px; height: 40px;
    border: 0; border-radius: 8px;
    background: transparent;
    color: var(--text-2); cursor: pointer;
    display: grid; place-items: center;
    transition: background .14s, color .14s;
}
.tb-btn:hover { background: var(--hover); color: var(--text); }
.tb-btn::after {
    content: "";
    position: absolute; bottom: 3px; left: 50%;
    transform: translateX(-50%);
    width: 0; height: 3px; border-radius: 2px;
    background: var(--accent);
    transition: width .18s ease;
}
.tb-btn.is-open::after { width: 6px; }
.tb-btn.is-active::after { width: 16px; }
.tb-btn.is-active { color: var(--text); }

/* ---- 响应式：小屏退化为全屏面板 ---- */
@media (max-width: 980px) {
    .win,
    .win.is-max {
        left: 6px !important; top: 6px !important;
        right: 6px; bottom: calc(48px + 6px);
        width: auto !important; height: auto !important;
    }
    .desk-icons { flex-direction: row; top: 10px; left: 10px; }
    .model-badge { display: none; }
}

/* ============================================================
   提示词工具行（AI 优化 / 撤销） + 前置文案同步开关
   ============================================================ */
.prompt-tools {
    display: flex; align-items: center; gap: 8px;
    margin-top: 8px;
}
.tool-btn {
    display: inline-flex; align-items: center; gap: 6px;
    height: 30px; padding: 0 12px;
    border: 1px solid var(--accent-line);
    border-radius: 8px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 12px; font-weight: 600;
    cursor: pointer;
    transition: all .14s;
}
.tool-btn:hover { filter: brightness(1.08); box-shadow: 0 2px 10px rgba(124, 92, 255, .18); }
.tool-btn:active { transform: translateY(1px); }
.tool-btn:disabled { opacity: .6; cursor: default; }
.tool-btn.is-busy { position: relative; color: var(--text-3); }
.tool-btn.is-busy #optimizeText { animation: pulse-soft 1s ease-in-out infinite; }
.tool-btn.is-ghost {
    border-color: var(--border);
    background: var(--panel-2);
    color: var(--text-2);
    font-weight: 500;
}
.tool-btn.is-ghost:hover { color: var(--text); background: var(--panel-3); box-shadow: none; }

/* 前置文案：同步开关 */
.field-label { display: flex; align-items: center; gap: 8px; }
.sync-toggle {
    display: inline-flex; align-items: center; gap: 5px;
    height: 22px; padding: 0 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--panel-2);
    color: var(--text-3);
    font-size: 11px;
    cursor: pointer;
    transition: all .14s;
}
.sync-toggle em { font-style: normal; }
.sync-toggle:hover { color: var(--text-2); border-color: var(--border-strong, var(--border)); }
.sync-toggle.is-on {
    border-color: var(--accent-line);
    background: var(--accent-soft);
    color: var(--accent);
}
.label-hint { color: var(--text-3); font-size: 11px; }

@keyframes pulse-soft {
    0%, 100% { opacity: 1; }
    50% { opacity: .45; }
}

/* ============================================================
   模型配置窗口（能力块） + 模版配置窗口 + 模板编辑器
   ============================================================ */
.cap-block {
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    padding: 12px 14px;
    background: color-mix(in srgb, var(--panel-2) 55%, transparent);
}
.cap-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.cap-head b { font-size: 12.5px; color: var(--text); }
.cap-head em { font-style: normal; font-size: 11px; color: var(--text-3); }
.cap-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.cap-item {
    display: inline-flex; align-items: center;
    height: 22px; padding: 0 9px;
    border-radius: 999px;
    font-size: 11px;
}
.cap-item.is-ok { background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-line); }
.cap-item.is-none { background: var(--panel-3); color: var(--text-3); border: 1px dashed var(--border); }

.wg-templates { background: linear-gradient(135deg, #e8935a, #e9b158); }
.di-templates { background: linear-gradient(135deg, #e8935a, #e9b158); }

/* 模版配置窗口 */
.tpl-page { display: flex; height: 100%; min-height: 0; }
.tpl-groups {
    flex: 0 0 148px;
    display: flex; flex-direction: column; gap: 4px;
    padding: 12px 8px;
    border-right: 1px solid var(--border-soft);
    background: color-mix(in srgb, var(--panel-2) 45%, transparent);
}
.tpl-group {
    display: flex; align-items: center; gap: 6px;
    height: 34px; padding: 0 10px;
    border: 0; border-radius: 8px;
    background: transparent;
    color: var(--text-2);
    font-size: 12.5px; cursor: pointer;
    transition: all .14s;
}
.tpl-group i {
    font-style: normal; margin-left: auto;
    min-width: 18px; height: 18px;
    display: grid; place-items: center;
    border-radius: 999px;
    background: var(--panel-3);
    font-size: 10.5px; color: var(--text-3);
}
.tpl-group:hover { background: var(--hover); color: var(--text); }
.tpl-group.is-on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.tpl-group.is-on i { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent); }

.tpl-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.tpl-toolbar {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-soft);
}
.tpl-sub { font-size: 12.5px; font-weight: 600; color: var(--text); }
.tpl-list { flex: 1 1 auto; overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.tpl-empty { padding: 30px 0; text-align: center; color: var(--text-3); font-size: 12px; }
.tpl-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    background: var(--panel-2);
    transition: border-color .14s;
}
.tpl-item:hover { border-color: var(--border); }
.tpl-item.is-empty .tpl-preview i { color: var(--text-3); font-style: normal; }
.tpl-info { flex: 1 1 auto; min-width: 0; }
.tpl-name { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.tpl-name em {
    font-style: normal; font-size: 10.5px;
    padding: 1px 6px; border-radius: 999px;
    background: var(--accent-soft); color: var(--accent);
}
.tpl-name b { font-size: 12.5px; color: var(--text); }
.tpl-preview {
    font-size: 11.5px; color: var(--text-2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tpl-acts { flex: 0 0 auto; display: flex; gap: 6px; }
.tpl-btn {
    height: 26px; padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--panel-3);
    color: var(--text-2);
    font-size: 11px; cursor: pointer;
    transition: all .14s;
}
.tpl-btn:hover { color: var(--text); border-color: var(--border-strong, var(--border)); }

/* 提示词模板中心：作品模版槽位视图 */
.tpl-side {
    flex: 0 0 178px;
    overflow-y: auto;
    padding: 10px 8px;
    border-right: 1px solid var(--border-soft);
    background: color-mix(in srgb, var(--panel-2) 40%, transparent);
}
.tplc-sec { margin-bottom: 12px; }
.tplc-sec > span {
    display: block;
    padding: 4px 10px 6px;
    font-size: 10.5px; color: var(--text-3);
    letter-spacing: .04em;
}
.tplc-slot {
    position: relative;
    display: flex; align-items: center;
    width: 100%; height: 32px;
    padding: 0 10px;
    border: 0; border-radius: 8px;
    background: transparent;
    color: var(--text-2);
    font-size: 12px; cursor: pointer;
    text-align: left;
    transition: all .14s;
}
.tplc-slot i {
    font-style: normal; margin-left: auto;
    min-width: 17px; height: 17px;
    display: grid; place-items: center;
    border-radius: 999px;
    background: var(--panel-3);
    font-size: 10px; color: var(--text-3);
}
.tplc-slot:hover { background: var(--hover); color: var(--text); }
.tplc-slot.is-on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.tplc-slot.is-on i { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent); }

.tplc { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 14px 18px; overflow-y: auto; }
.tplc-crumb { font-size: 11px; color: var(--text-3); margin-bottom: 6px; }
.tplc-meta { display: flex; gap: 6px; margin-bottom: 10px; }
.tplc-chip {
    padding: 2px 10px; border-radius: 999px;
    background: var(--panel-3); color: var(--text-2);
    font-size: 10.5px;
}
.tplc-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.tplc-head b { font-size: 15px; color: var(--text); }
.tplc-badge {
    padding: 1px 8px; border-radius: 999px;
    font-size: 10.5px;
    background: var(--accent-soft); color: var(--accent);
}
.tplc-badge.is-def { background: var(--panel-3); color: var(--text-3); }
.tplc-badge.is-pub { background: color-mix(in srgb, #4da3ff 16%, transparent); color: #4da3ff; }
.tplc-badge.is-vip { background: linear-gradient(135deg, rgba(245,166,35,.22), rgba(255,122,69,.22)); color: #f5a623; }
.tplc-cap {
    margin-left: auto;
    padding: 2px 9px; border-radius: 999px;
    font-size: 10.5px; letter-spacing: .02em;
    background: color-mix(in srgb, #34c98e 15%, transparent); color: #34c98e;
}
.tplc-namerow { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 10px; }
.tplc-namerow label {
    flex: 1 1 auto; display: flex; flex-direction: column; gap: 5px;
    font-size: 11.5px; color: var(--text-2);
}
.tplc-namerow select {
    height: 34px; padding: 0 10px;
    border: 1px solid var(--border); border-radius: 9px;
    background: var(--panel-2); color: var(--text);
    font-size: 12.5px; outline: none;
}
.tplc-acts { display: flex; gap: 6px; flex: 0 0 auto; }
.tplc-acts .btn.is-danger { color: #e5615c; }
.tplc-vars { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; }
.tplc-vars::before { content: '可用变量'; font-size: 11px; color: var(--text-3); }
.tplc-var {
    height: 24px; padding: 0 9px;
    border: 1px dashed var(--border); border-radius: 999px;
    background: transparent; color: var(--text-2);
    font-size: 10.5px; cursor: pointer;
    transition: all .14s;
}
.tplc-var:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.tplc-content {
    flex: 1 1 auto; min-height: 180px;
    padding: 12px 14px;
    border: 1px solid var(--border); border-radius: 11px;
    background: var(--panel-2); color: var(--text);
    font-family: inherit; font-size: 12.5px; line-height: 1.75;
    resize: vertical; outline: none;
}
.tplc-content:focus { border-color: var(--accent); }
.tplc-content[readonly] { color: var(--text-2); }
.tplc-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding-top: 10px;
}
.tplc-hint { font-size: 11px; color: var(--text-3); }
.tpl-btn.is-danger:hover { border-color: #e81123; color: #e81123; background: rgba(232, 17, 35, .06); }

/* 模板编辑器浮层 */
.tpl-overlay {
    position: fixed; inset: 0;
    z-index: 900;
    display: grid; place-items: center;
    overflow: auto;
    background: rgba(8, 10, 24, .45);
    backdrop-filter: blur(4px);
}
/* 弹层内容比视口高时可整体滚动：auto 外边距接管对齐，避免顶部被截断 */
.tpl-overlay > * { margin: auto; }
.tpl-editor {
    width: min(680px, calc(100vw - 40px));
    max-height: calc(100vh - 60px);
    display: flex; flex-direction: column;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--panel);
    box-shadow: 0 30px 80px rgba(4, 8, 22, .5);
    overflow: hidden;
}
.tpl-ed-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-soft);
}
.tpl-ed-head b { font-size: 13px; color: var(--text); }
.tpl-ed-close {
    border: 0; background: transparent;
    color: var(--text-3); cursor: pointer;
    font-size: 14px;
    width: 26px; height: 26px; border-radius: 7px;
}
.tpl-ed-close:hover { background: var(--hover); color: var(--text); }
.tpl-ed-body { flex: 1 1 auto; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.tpl-ed-body textarea {
    font-family: ui-monospace, Consolas, monospace;
    font-size: 12px; line-height: 1.7;
    resize: vertical;
}
.tpl-ed-foot {
    display: flex; align-items: center;
    padding: 12px 16px;
    border-top: 1px solid var(--border-soft);
}

/* ============================================================
   配音管理 / 文案助手 / 封面制作 / 插件管理
   ============================================================ */
.wg-dubbing, .di-dubbing       { background: linear-gradient(135deg, #2fb5a3, #46d0b8); }
.wg-copywriter, .di-copywriter { background: linear-gradient(135deg, #4a7dff, #6aa2ff); }
.wg-covers, .di-covers         { background: linear-gradient(135deg, #e05a8a, #f07fae); }
.di-plugins                    { background: linear-gradient(135deg, #6b7280, #9aa3b2); }

/* 青色强调按钮（浮层的解析 / 确定） */
.btn-accent {
    background: linear-gradient(135deg, #14b8b0, #2fd4c7);
    border-color: transparent; color: #04211f;
    font-weight: 600;
    box-shadow: 0 6px 16px rgba(20, 184, 176, .25);
}
.btn-accent:hover { filter: brightness(1.06); background: linear-gradient(135deg, #14b8b0, #2fd4c7); }

/* ---------------- 配音管理 ---------------- */
.dub-page { height: 100%; display: flex; flex-direction: column; padding: 16px 18px; gap: 12px; }
.dub-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.dub-head h1 { margin: 0 0 4px; font-size: 17px; }
.dub-head .page-desc { margin: 0; font-size: 12px; color: var(--text-3); }

.dub-list { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.dub-empty { padding: 40px 0; text-align: center; color: var(--text-3); font-size: 12.5px; }
.dub-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    background: color-mix(in srgb, var(--panel-2) 60%, transparent);
}
.dub-item:hover { border-color: var(--border); }
.dub-item-main { flex: 1 1 auto; min-width: 0; }
.dub-item-main b { display: block; font-size: 13px; margin-bottom: 3px; }
.dub-item-meta { font-size: 11px; color: var(--text-3); }
.dub-item-acts { display: flex; gap: 6px; }

/* 配音项目编辑浮层 */
.dub-editor {
    width: min(1080px, calc(100vw - 60px));
    height: min(660px, calc(100vh - 80px));
    display: flex; flex-direction: column;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--panel);
    box-shadow: 0 30px 80px rgba(4, 8, 22, .5);
    overflow: hidden;
}
.dub-ed-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    padding: 16px 20px 12px;
}
.dub-ed-head b { font-size: 15px; color: var(--text); }
.dub-ed-head p { margin: 5px 0 0; font-size: 12px; color: var(--text-3); }
.dub-ed-body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 4px 20px 8px; }
.dub-ed-col {
    display: flex; flex-direction: column; gap: 12px;
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    background: color-mix(in srgb, var(--panel-2) 55%, transparent);
    padding: 16px;
    min-height: 0;
}
.dub-field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--text-2); }
.dub-field > span { font-weight: 600; display: flex; align-items: center; gap: 8px; }
.dub-field > span em { font-style: normal; font-weight: 400; font-size: 11px; color: var(--text-3); }
.dub-field input,
.dub-field select,
.dub-field textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--panel-3);
    color: var(--text);
    font-size: 12.5px;
    padding: 9px 11px;
    outline: none;
    transition: border-color .14s;
}
.dub-field input:focus, .dub-field select:focus, .dub-field textarea:focus { border-color: var(--accent-line); }
.dub-field textarea { font-family: inherit; line-height: 1.75; resize: none; }
.dub-field-grow { flex: 1 1 auto; min-height: 0; }
.dub-field-grow textarea { flex: 1 1 auto; min-height: 180px; }
.dub-ed-import { display: flex; align-items: center; gap: 8px; }
.dub-ed-hint { margin: 0; font-size: 11px; color: var(--text-3); }
.dub-ed-hint em { font-style: normal; color: var(--text-2); }

.dub-ed-preview-col { display: flex; }
.dub-preview-title { font-size: 12.5px; font-weight: 600; color: var(--text); }
.dub-preview {
    flex: 1 1 auto; min-height: 0;
    margin-top: 8px;
    border: 1px dashed var(--border);
    border-radius: 10px;
    padding: 10px;
    overflow-y: auto;
    display: flex; flex-direction: column; gap: 7px;
}
.dub-preview-empty {
    margin: 0; flex: 1 1 auto;
    display: grid; place-items: center;
    color: var(--text-3); font-size: 12.5px;
}
.dub-seg {
    display: flex; align-items: baseline; gap: 8px;
    padding: 7px 9px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--panel-3) 70%, transparent);
    font-size: 12px;
}
.dub-seg-no { flex: 0 0 auto; color: var(--text-3); font-size: 10.5px; min-width: 16px; }
.dub-seg-role {
    flex: 0 0 auto;
    max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--accent-soft); color: var(--accent);
    font-size: 11px; font-weight: 600;
}
.dub-seg-role.is-narr { background: var(--panel-3); color: var(--text-3); }
.dub-seg-text { flex: 1 1 auto; color: var(--text-2); line-height: 1.6; }

.dub-ed-foot {
    display: flex; align-items: center; justify-content: flex-end; gap: 10px;
    padding: 12px 20px 16px;
}

/* ---------------- 文案助手 ---------------- */
.cw-page { height: 100%; display: flex; flex-direction: column; padding: 14px 18px 16px; gap: 12px; }
.cw-tabs { display: flex; gap: 8px; }
.cw-tab {
    height: 32px; padding: 0 16px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--panel-2);
    color: var(--text-2);
    font-size: 12.5px; cursor: pointer;
    transition: all .14s;
}
.cw-tab:hover { color: var(--text); border-color: var(--border-strong, var(--border)); }
.cw-tab.is-on {
    background: var(--accent-soft); color: var(--accent);
    border-color: var(--accent-line); font-weight: 600;
}

.cw-split { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cw-col { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.cw-col-head { display: flex; align-items: baseline; justify-content: space-between; }
.cw-col-head span { font-size: 12.5px; font-weight: 600; color: var(--text); }
.cw-col-head em { font-style: normal; font-size: 11px; color: var(--text-3); }
.cw-box {
    flex: 1 1 auto; min-height: 0;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--panel-2);
    color: var(--text);
    font-size: 13px; line-height: 1.8;
    padding: 12px 14px;
    outline: none;
    resize: none;
    transition: border-color .14s;
}
.cw-box:focus { border-color: var(--accent-line); }
.cw-box.is-out { background: color-mix(in srgb, var(--panel-3) 60%, transparent); }
.cw-run, .cw-copy { align-self: stretch; }

/* ---------------- 封面制作 ---------------- */
.cv-page { height: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 16px 18px; }
.cv-form { display: flex; flex-direction: column; gap: 12px; min-height: 0; overflow-y: auto; }
.cv-assets {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
    max-height: 240px; overflow-y: auto;
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    padding: 8px;
    background: color-mix(in srgb, var(--panel-2) 50%, transparent);
}
.cv-assets-empty { grid-column: 1 / -1; margin: 0; padding: 24px 0; text-align: center; color: var(--text-3); font-size: 12px; }
.cv-asset {
    position: relative;
    border: 2px solid transparent;
    border-radius: 9px;
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 1;
    background: var(--panel-3);
}
.cv-asset img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cv-asset span {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 3px 6px;
    background: linear-gradient(transparent, rgba(0, 0, 0, .72));
    color: #fff; font-size: 10.5px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cv-asset.is-on { border-color: var(--accent); }
.cv-asset.is-on::after {
    content: '✓';
    position: absolute; top: 5px; right: 5px;
    width: 18px; height: 18px;
    display: grid; place-items: center;
    border-radius: 999px;
    background: var(--accent); color: #fff;
    font-size: 11px; font-weight: 700;
}
.cv-run { margin-top: 2px; position: relative; }
.cv-run em {
    font-style: normal; font-weight: 400; font-size: 10.5px;
    opacity: .78; margin-left: 6px;
}

.cv-results { display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--border-soft); border-radius: 12px; background: color-mix(in srgb, var(--panel-2) 45%, transparent); }
.cv-results-head {
    display: flex; align-items: baseline; justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-soft);
}
.cv-results-head span { font-size: 12.5px; font-weight: 600; color: var(--text); }
.cv-results-head em { font-style: normal; font-size: 11.5px; color: var(--text-3); }
.cv-grid {
    flex: 1 1 auto; min-height: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
    padding: 16px;
    overflow-y: auto;
    align-content: start;
}
.cv-empty { grid-column: 1 / -1; margin: 0; padding: 60px 0; text-align: center; color: var(--text-3); font-size: 12.5px; }
.cv-error { grid-column: 1 / -1; margin: 0; color: var(--danger); font-size: 12px; }
.cv-cover {
    margin: 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--panel-3);
}
.cv-cover img { width: 100%; height: auto; display: block; object-fit: contain; }
.cv-cover figcaption {
    padding: 7px 10px;
    font-size: 11px; color: var(--text-2);
    border-top: 1px solid var(--border-soft);
}
.cv-cover.is-loading {
    aspect-ratio: 7 / 10;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    color: var(--text-3); font-size: 12px;
}
.cv-cover.is-loading .orbit { width: 38px; height: 38px; }

/* ============================================================
   任务栏：镜界个人入口 / 动态托盘 / 北京时间时钟
   ============================================================ */
.tb-brand.tb-person {
    border: 0; cursor: pointer;
    transition: transform .14s, box-shadow .14s;
}
.tb-brand.tb-person:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 16px rgba(124, 92, 255, .5);
}
.brand-glyph {
    display: grid; place-items: center;
    font-weight: 700; font-size: 15px; letter-spacing: 0;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.brand-glyph.is-lg { font-size: 26px; }
/* 任务栏个人按钮：会员上传头像后显示为图片 */
.tb-person.has-img {
    background-size: cover;
    background-position: center;
}
.tb-person.has-img .brand-glyph { text-shadow: none; }

.tb-clock {
    display: inline-flex; align-items: center;
    padding: 5px 12px;
    border-radius: 8px;
    background: var(--accent-soft);
    color: var(--text);
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    letter-spacing: .2px;
    white-space: nowrap;
    border: 1px solid var(--accent-line);
}

.tb-dyn { animation: tray-in .18s ease; }
@keyframes tray-in {
    from { opacity: 0; transform: translateY(8px) scale(.86); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ============================================================
   时间气泡（每 10 分钟温馨提示）
   ============================================================ */
.time-bubble {
    position: fixed;
    right: 16px; bottom: 62px;
    max-width: 340px;
    z-index: 620;
    padding: 12px 16px;
    border-radius: 14px 14px 4px 14px;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
    color: #fff;
    font-size: 13.5px; line-height: 1.6;
    box-shadow: 0 12px 32px rgba(124, 92, 255, .4);
    opacity: 0; transform: translateY(10px) scale(.96);
    transition: opacity .3s ease, transform .3s ease;
    pointer-events: none;
}
.time-bubble.is-show { opacity: 1; transform: translateY(0) scale(1); }
.time-bubble-tail {
    position: absolute; right: 22px; bottom: -6px;
    width: 12px; height: 12px;
    background: var(--accent-2);
    transform: rotate(45deg);
    border-radius: 2px;
}

/* ============================================================
   个人中心弹出面板
   ============================================================ */
.person-panel {
    position: fixed;
    left: 12px; bottom: 58px;
    width: 300px;
    z-index: 610;
    border-radius: var(--radius);
    background: var(--panel);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: tray-in .18s ease;
}
.pp-head {
    display: flex; align-items: center; gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, var(--accent-soft) 0%, transparent 100%);
    border-bottom: 1px solid var(--border-soft);
}
.pp-avatar {
    position: relative;
    width: 44px; height: 44px; border-radius: 12px;
    display: grid; place-items: center;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
    color: #fff; font-weight: 700; font-size: 18px;
    box-shadow: 0 3px 10px rgba(124, 92, 255, .35);
    flex: 0 0 auto;
    border: 0; padding: 0; cursor: pointer; overflow: hidden;
    font-family: inherit;
}
.pp-avatar img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
.pp-avatar .pp-avatar-edit {
    position: absolute; right: -1px; bottom: -1px;
    width: 16px; height: 16px;
    border-radius: 6px 0 0 0;
    display: grid; place-items: center;
    background: rgba(17, 17, 26, .72);
    color: #fff; font-size: 9.5px; font-style: normal; font-weight: 600;
    opacity: 0; transition: opacity .16s ease;
}
.pp-avatar:hover .pp-avatar-edit { opacity: 1; }
.pp-avatar:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pp-info b { display: block; font-size: 14.5px; color: var(--text); }
.pp-info em { display: block; margin-top: 3px; font-style: normal; font-size: 12px; color: var(--text-3); }
.pp-body { padding: 8px 16px 4px; }
.pp-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 9px 0;
    border-bottom: 1px dashed var(--border-soft);
    font-size: 12.5px;
}
.pp-row:last-child { border-bottom: 0; }
.pp-row span { color: var(--text-3); }
.pp-row b { color: var(--text); font-variant-numeric: tabular-nums; font-weight: 600; }
.pp-foot {
    display: flex; justify-content: flex-end;
    padding: 10px 12px 12px;
}

/* ============================================================
   登录 / 注册门
   ============================================================ */
.login-gate {
    position: fixed; inset: 0;
    z-index: 900;
    display: grid; place-items: center;
    background:
        radial-gradient(1200px 600px at 20% -10%, rgba(124, 92, 255, .18), transparent 60%),
        radial-gradient(900px 500px at 90% 110%, rgba(176, 107, 255, .14), transparent 60%),
        color-mix(in srgb, var(--bg) 78%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.login-card {
    width: min(400px, calc(100vw - 40px));
    padding: 34px 32px 26px;
    border-radius: 18px;
    background: var(--panel);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
}
.login-brand {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 26px;
}
.login-brand .brand-glyph {
    width: 56px; height: 56px; border-radius: 16px;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
    box-shadow: 0 6px 18px rgba(124, 92, 255, .4);
}
.login-brand b { display: block; font-size: 17px; color: var(--text); }
.login-brand em { display: block; margin-top: 4px; font-style: normal; font-size: 12px; color: var(--text-3); letter-spacing: .4px; }
.login-submit {
    width: 100%;
    margin-top: 6px;
    height: 44px;
    font-size: 15px;
}
.login-hint {
    margin-top: 14px;
    font-size: 12px; line-height: 1.7;
    color: var(--text-3);
    text-align: center;
}

/* ============================================================
   任务栏模型连通徽章（左下角）
   ============================================================ */
.tb-models {
    display: flex; align-items: center; gap: 6px;
    min-width: 0;
    overflow: hidden;
}
.tb-model {
    display: inline-flex; align-items: center; gap: 6px;
    height: 28px;
    padding: 0 10px;
    border-radius: 14px;
    background: var(--panel-2);
    border: 1px solid var(--border-soft);
    color: var(--text-2);
    font-size: 12px;
    white-space: nowrap;
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tb-model .dot {
    width: 7px; height: 7px; border-radius: 50%;
    flex: 0 0 auto;
}
.tb-model.is-ok .dot { background: var(--success); box-shadow: 0 0 6px rgba(47, 191, 113, .8); }
.tb-model.is-bad { color: var(--text-2); border-color: rgba(242, 85, 90, .45); }
.tb-model.is-bad .dot { background: var(--danger); box-shadow: 0 0 6px rgba(242, 85, 90, .8); }

/* ============================================================
   个人中心：行内编辑 / 修改密码
   ============================================================ */
.pp-row { position: relative; }
.pp-row .pp-val {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    text-align: right;
    margin-right: 8px;
}
.pp-edit {
    flex: 0 0 auto;
    border: 0; cursor: pointer;
    padding: 3px 9px;
    border-radius: 6px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 11.5px;
    transition: background .14s;
}
.pp-edit:hover { background: var(--accent-line); color: var(--accent-ink); }
.pp-row.is-editing .pp-val { margin-right: 0; }
.pp-input {
    width: 100%;
    height: 30px;
    padding: 0 9px;
    border-radius: 7px;
    border: 1px solid var(--accent-line);
    background: var(--panel-3);
    color: var(--text);
    font-size: 12.5px;
    outline: none;
}
.pp-input:focus { border-color: var(--accent); }
.pp-pw-toggle {
    width: 100%;
    border: 0; cursor: pointer;
    background: transparent;
    color: var(--text-3);
    font-size: 12.5px;
    text-align: left;
    padding: 10px 16px 6px;
}
.pp-pw-toggle:hover { color: var(--accent); }
.pp-pw {
    display: flex; flex-direction: column; gap: 8px;
    padding: 6px 16px 12px;
}
.pp-pw input {
    height: 34px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--panel-3);
    color: var(--text);
    font-size: 13px;
    outline: none;
}
.pp-pw input:focus { border-color: var(--accent); }
.pp-pw-btns { display: flex; gap: 8px; justify-content: flex-end; }
.pp-msg {
    min-height: 16px;
    font-size: 11.5px;
    color: var(--success);
}
.pp-msg.is-err { color: var(--danger); }
.pp-msg.is-ok { color: var(--success); }
.pp-msg:empty { min-height: 0; }

/* ============================================================
   登录门：科技感粒子动画背景
   ============================================================ */
.login-canvas {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    pointer-events: none;
}
.login-glow {
    position: absolute; inset: 0;
    pointer-events: none;
    background:
        radial-gradient(700px 420px at 12% 18%, var(--accent-soft), transparent 65%),
        radial-gradient(640px 400px at 88% 84%, rgba(176, 107, 255, .12), transparent 65%);
    animation: glow-drift 14s ease-in-out infinite alternate;
}
@keyframes glow-drift {
    from { transform: translate3d(0, 0, 0) scale(1); opacity: .85; }
    to   { transform: translate3d(0, -18px, 0) scale(1.06); opacity: 1; }
}
.login-card { position: relative; z-index: 1; }
.login-hint.is-err { color: var(--danger); }
.login-hint.is-info { color: var(--accent); }

/* ============================================================
   任务栏：主题/时钟居右
   ============================================================ */
.tb-side.tb-right { margin-left: auto; }

/* ============================================================
   模型连通状态：右上角竖列
   ============================================================ */
.side-models {
    position: fixed;
    right: 14px; bottom: 58px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 7px;
    pointer-events: none;
    max-height: calc(100vh - 120px);
    overflow-y: auto; overflow-x: hidden;
    scrollbar-width: none;
    padding: 2px 2px 2px 6px;
}
.side-models::-webkit-scrollbar { display: none; }
.sm-item {
    display: inline-flex; align-items: center; gap: 8px;
    height: 30px;
    padding: 0 12px 0 10px;
    border-radius: 15px;
    background: color-mix(in srgb, var(--panel) 82%, transparent);
    backdrop-filter: blur(18px) saturate(1.4);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    border: 1px solid var(--border-soft);
    color: var(--text-2);
    font-size: 12px;
    box-shadow: var(--shadow-sm);
    pointer-events: auto;
    animation: tray-in .2s ease;
    transition: border-color .15s, transform .15s;
}
.sm-item:hover { transform: translateX(-3px); }
.sm-item .dot {
    width: 7px; height: 7px; border-radius: 50%;
    flex: 0 0 auto;
}
.sm-item.is-ok .dot { background: var(--success); box-shadow: 0 0 7px rgba(47, 191, 113, .85); }
.sm-item.is-bad { border-color: rgba(242, 85, 90, .5); }
.sm-item.is-bad .dot { background: var(--danger); box-shadow: 0 0 7px rgba(242, 85, 90, .85); }
.sm-name {
    max-width: 190px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.sm-prov {
    font-style: normal;
    font-size: 10.5px;
    color: var(--text-3);
    padding: 2px 7px;
    border-radius: 9px;
    background: var(--panel-3);
    flex: 0 0 auto;
}

/* ============================================================
   壁纸科技动画层
   ============================================================ */
.wall-fx {
    position: fixed; inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: .9;
}

/* ============================================================
   桌面图标动态效果 + 长按拖动
   ============================================================ */
.di-glyph {
    position: relative;
}
.di-glyph::after {
    content: "";
    position: absolute; inset: 0;
    border-radius: inherit;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .28) 48%, transparent 62%);
    background-size: 220% 220%;
    /* 连贯流光：光带全程扫过图标（原 130%→-60% 有近半程空档，观感像卡顿） */
    animation: icon-shine 2.8s linear infinite;
    pointer-events: none;
}
@keyframes icon-shine {
    from { background-position: 96% 0; }
    to   { background-position: 0% 0; }
}
.desk-icon.is-drag {
    opacity: .45;
    transform: scale(1.06);
    filter: drop-shadow(0 0 12px var(--accent-line));
    cursor: grabbing;
}
.desk-icon.is-drag .di-glyph { animation: none; }

/* ============================================================
   个人中心：VIP 等级 + 存储空间用量条
   ============================================================ */
.pp-space { padding: 10px 0 6px; border-bottom: 1px dashed var(--border-soft); }
.pp-space-head {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 12.5px; margin-bottom: 7px;
}
.pp-space-head span { color: var(--text-3); }
.pp-space-head b { color: var(--text); font-variant-numeric: tabular-nums; }
.pp-bar {
    height: 8px; border-radius: 5px;
    background: var(--panel-3);
    overflow: hidden;
}
.pp-bar i {
    display: block; height: 100%;
    width: 0;
    border-radius: 5px;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    transition: width .4s ease;
}
.pp-space em {
    display: block; margin-top: 6px;
    font-style: normal; font-size: 11px; line-height: 1.5;
    color: var(--text-3);
}

/* ============================================================
   第 18 轮新增：素材文件夹 / 悬浮预览 / 彩色角标 / 关键词chips
   封面模型多选 / 模型配置重设计
   ============================================================ */

/* ---- 分类彩色角标：同类别同色 ---- */
.grid-cat.is-role  { background: rgba(124, 92, 255, .88); }   /* 角色 · 紫 */
.grid-cat.is-scene { background: rgba(34, 150, 170, .88); }   /* 场景 · 青 */
.grid-cat.is-prop  { background: rgba(230, 145, 56, .88); }   /* 道具 · 橙 */
.grid-cat.is-style { background: rgba(233, 96, 132, .88); }   /* 风格 · 粉 */
.grid-cat.is-voice { background: rgba(72, 170, 96, .88); }    /* 声音 · 绿 */
.grid-badge.is-multi { background: rgba(41, 128, 220, .92); }

/* ---- 文件夹条 ---- */
.folder-bar {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-bottom: 12px;
}
.folder-chip {
    display: inline-flex; align-items: center; gap: 6px;
    height: 32px; padding: 0 12px;
    border-radius: 16px; border: 1px solid var(--border-soft);
    background: color-mix(in srgb, var(--panel-2) 60%, transparent);
    color: var(--text-2); font-size: 12.5px; cursor: pointer;
    transition: border-color .14s, color .14s, background .14s;
}
.folder-chip b { font-weight: 600; font-size: 11px; color: var(--text-3); }
.folder-chip:hover { border-color: var(--text-3); color: var(--text); }
.folder-chip.is-on {
    border-color: var(--accent); color: var(--text);
    background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.folder-chip.is-on b { color: var(--accent); }
.folder-op {
    border: 0; background: transparent; color: var(--text-3);
    cursor: pointer; font-size: 11px; padding: 0 1px;
}
.folder-op:hover { color: var(--text); }
.folder-op[data-fop="del"]:hover { color: var(--danger); }
.folder-new { border-style: dashed; color: var(--text-3); }
.folder-new:hover { color: var(--accent); border-color: var(--accent); }

/* ---- 素材页空间用量 ---- */
.lib-space {
    display: inline-flex; align-items: center; gap: 7px;
    height: 32px; padding: 0 12px;
    border-radius: 16px; border: 1px solid var(--border-soft);
    color: var(--text-2); font-size: 12px;
}
.lib-space .ls-text { font-variant-numeric: tabular-nums; white-space: nowrap; }
.lib-space .ls-bar {
    width: 64px; height: 5px; border-radius: 3px;
    background: var(--panel-3); overflow: hidden;
}
.lib-space .ls-bar i {
    display: block; height: 100%; width: 0;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    transition: width .3s;
}

/* ---- 悬浮预览（原图 / 音频试听）---- */
#imgPreview {
    position: fixed; z-index: 900;
    width: 380px; max-width: 46vw;
    padding: 8px; border-radius: 12px;
    background: color-mix(in srgb, var(--panel) 92%, transparent);
    border: 1px solid var(--border-soft);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
    pointer-events: none;
    opacity: 0; transform: scale(.96);
    transition: opacity .14s, transform .14s;
    display: none;
}
#imgPreview.is-show { display: block; opacity: 1; transform: none; }
#imgPreview img { display: block; width: 100%; max-height: 300px; object-fit: contain; border-radius: 8px; }
#imgPreview audio { display: block; width: 100%; margin-top: 2px; }

/* ---- 关键词 chips 录入 ---- */
.kw-chips {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    min-height: 40px; padding: 5px 8px;
    border-radius: 9px; border: 1px solid var(--border-soft);
    background: var(--panel-2);
}
.kw-chips:focus-within { border-color: var(--accent); }
.kw-chips input {
    flex: 1 1 90px; min-width: 90px; height: 26px;
    border: 0; background: transparent; outline: none;
    color: var(--text); font-size: 12.5px;
}
.kw-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 4px 2px 9px; border-radius: 13px;
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    color: var(--text); font-size: 12px;
}
.kw-chip button {
    border: 0; background: transparent; cursor: pointer;
    color: var(--text-3); font-size: 10px; padding: 1px 4px;
    border-radius: 50%;
}
.kw-chip button:hover { color: var(--danger); }

/* ---- 素材编辑：附加图片 + 四视图模型 ---- */
.am-images { display: flex; gap: 7px; flex-wrap: wrap; }
.am-img {
    position: relative; width: 58px; height: 58px;
    border-radius: 8px; overflow: hidden;
    border: 1px solid var(--border-soft);
}
.am-img img { width: 100%; height: 100%; object-fit: cover; }
.am-img-del {
    position: absolute; right: 2px; top: 2px;
    width: 16px; height: 16px; border: 0; border-radius: 50%;
    background: rgba(0, 0, 0, .68); color: #fff;
    font-size: 9px; cursor: pointer; line-height: 1;
}
.am-img-del:hover { background: var(--danger); }
.am-img-add {
    width: 58px; height: 58px; border-radius: 8px;
    border: 1px dashed var(--border-soft); background: transparent;
    color: var(--text-3); cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    font-size: 16px; gap: 0;
}
.am-img-add em { font-style: normal; font-size: 9.5px; }
.am-img-add:hover { border-color: var(--accent); color: var(--accent); }
.am-img-full {
    display: flex; align-items: center; padding: 0 10px;
    height: 58px; border-radius: 8px;
    border: 1px dashed var(--border-soft);
    color: var(--text-3); font-size: 11px;
}
.am-sheet-model select { width: 100%; }
.am-sheet-model { margin-bottom: -3px; }

/* ---- 封面制作：模型多选 chips ---- */
.cv-models { display: flex; flex-wrap: wrap; gap: 7px; }
.cv-model {
    display: inline-flex; align-items: center; gap: 6px;
    height: 30px; padding: 0 12px;
    border-radius: 15px; border: 1px solid var(--border-soft);
    background: color-mix(in srgb, var(--panel-2) 60%, transparent);
    color: var(--text-2); font-size: 12px; cursor: pointer;
    transition: border-color .14s, color .14s, background .14s;
}
.cv-model i {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--text-3);
}
.cv-model:hover { border-color: var(--text-3); color: var(--text); }
.cv-model.is-on {
    border-color: var(--accent); color: var(--text);
    background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.cv-model.is-on i { background: var(--accent); box-shadow: 0 0 5px var(--accent); }
.cv-cover figcaption { display: flex; align-items: center; gap: 8px; }
.cv-cover-model {
    font-style: normal; font-size: 10px; padding: 1px 7px; border-radius: 8px;
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    color: var(--accent);
}

/* ---- 模型配置窗口重设计 ---- */
.settings-page { max-width: 720px; width: 100%; margin: 0 auto; }
.set-intro {
    padding: 13px 16px; border-radius: 12px;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
}
.set-intro b { display: block; font-size: 13.5px; margin-bottom: 4px; }
.set-intro p { margin: 0; font-size: 12.5px; line-height: 1.75; color: var(--text-2); }
.set-intro p b { display: inline; font-size: 12.5px; color: var(--text); }
.set-card {
    padding: 15px 17px; border-radius: 12px;
    border: 1px solid var(--border-soft);
    background: color-mix(in srgb, var(--panel-2) 42%, transparent);
    display: flex; flex-direction: column; gap: 11px;
}
.set-card-head { display: flex; align-items: center; gap: 10px; }
.set-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.set-dot.is-vidu { background: #22b6e0; box-shadow: 0 0 6px rgba(34, 182, 224, .7); }
.set-dot.is-ark { background: #4d6bfe; box-shadow: 0 0 6px rgba(77, 107, 254, .7); }
.set-dot.is-na { background: #e69138; box-shadow: 0 0 6px rgba(230, 145, 56, .7); }
.set-dot.is-ok { background: #2fbf71; box-shadow: 0 0 6px rgba(47, 191, 113, .7); }
.set-dot.is-dimdot { background: var(--text-3); }
.set-card-title { flex: 1; min-width: 0; }
.set-card-title b { display: block; font-size: 14px; }
.set-card-title em { display: block; font-style: normal; font-size: 11.5px; color: var(--text-3); margin-top: 1px; }
.set-link {
    flex: 0 0 auto; font-size: 12px; padding: 5px 12px;
    border-radius: 15px; border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
    color: var(--accent);
}
.set-link:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.set-link.is-dim { color: var(--text-3); border-color: var(--border-soft); pointer-events: none; }
.set-desc { margin: 0; font-size: 12.5px; line-height: 1.75; color: var(--text-2); }
.set-desc b { color: var(--text); }
.set-desc a { color: var(--accent); }
.set-caps { display: flex; flex-direction: column; gap: 9px; }
.set-cap { display: grid; grid-template-columns: 74px 1fr; gap: 10px; align-items: center; }
.set-cap > span { font-size: 12px; color: var(--text-3); }

/* ============================================================
   第21轮新增：模型管理 / VIP & 充值 / 个人中心动作 / 刷新拦截
   实名弹层 / 封面文件夹筛选 / VIP 模版锁定 / 桌面图标配色
   ============================================================ */

/* ---------------- 模型管理窗口 ---------------- */
.mm-page { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 18px 20px 40px; }
.mm-page .set-intro { margin-bottom: 18px; flex: 0 0 auto; }
.mm-sec-title { margin: 4px 0 12px; font-size: 13px; font-weight: 600; color: var(--text); display: flex; align-items: baseline; gap: 8px; }
.mm-sec-title em { font-style: normal; font-weight: 400; font-size: 11.5px; color: var(--text-3); }
.mm-plat { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 18px; background: linear-gradient(135deg, rgba(124,92,255,.08), rgba(176,107,255,.03)); }
.mm-plat-head { display: flex; align-items: center; gap: 10px; }
.mm-plat-head .set-card-title { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mm-plat-head .set-card-title em { font-size: 11px; color: var(--text-3); font-style: normal; }
.mm-balance { font-size: 12px; color: var(--text-2); white-space: nowrap; }
.mm-balance b { color: var(--warn); font-size: 14px; }
.mm-plat-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 26px; margin-top: 12px; }
.mm-plat-row { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--text-2); padding: 5px 10px; border-radius: 8px; background: color-mix(in srgb, var(--panel-2) 65%, transparent); }
.mm-plat-row b { color: var(--text); font-weight: 600; }
.mm-plat-row em { color: var(--text-3); font-style: normal; font-size: 11.5px; }
.mm-model { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); margin-top: 10px; transition: border-color .15s, background .15s; }
.mm-model:hover { border-color: var(--accent-line); }
.mm-model.is-default { border-color: var(--accent-line); background: var(--accent-soft); }
.mm-model.is-flash { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.mm-model-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mm-model-info b { font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-model-info em { font-size: 11.5px; color: var(--text-3); font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-tag { display: inline-block; padding: 1px 6px; border-radius: 7px; font-size: 10px; font-style: normal; background: var(--accent-soft); color: var(--accent); vertical-align: 1px; }
.mm-model-ops { display: flex; gap: 6px; flex-shrink: 0; }
/* 模型管理：四类能力卡片之间的呼吸间距 */
#mmTypes .set-card { padding: 14px 16px; }
#mmTypes .set-card + .set-card { margin-top: 16px; }
.mm-op { border: 1px solid var(--border); background: transparent; color: var(--text-2); font-size: 11.5px; padding: 3px 9px; border-radius: 7px; cursor: pointer; transition: color .15s, border-color .15s; }
.mm-op:hover { color: var(--accent); border-color: var(--accent-line); }
.mm-op.is-del:hover { color: var(--danger); border-color: rgba(242,85,90,.4); }
.mm-empty { font-size: 12px; color: var(--text-3); padding: 14px 4px; text-align: center; }

/* 模型编辑弹层（复用 tpl-overlay 定位） */
.mm-editor { width: min(480px, 92vw); max-height: 86vh; overflow: auto; background: var(--panel-2); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg); }
.mm-editor.is-narrow { width: min(400px, 92vw); }
.mm-ed-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.mm-gen-opts { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px 12px; background: rgba(127,127,127,.05); display: flex; flex-direction: column; gap: 8px; }
.mm-gen-opts-title { display: flex; flex-direction: column; gap: 2px; }
.mm-gen-opts-title b { font-size: 12.5px; color: var(--text); }
.mm-gen-opts-title em { font-style: normal; font-size: 11px; color: var(--text-3); line-height: 1.5; }
/* 标签输入框：输入后回车上填为标签，点击 ✕ 删除 */
.tagbox { display: flex; flex-direction: column; gap: 6px; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 8px; transition: border-color .15s; }
.tagbox:focus-within { border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-soft); }
.tagbox-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.tagbox-chips:empty { display: none; }
.tagchip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 4px 2px 8px; border-radius: 6px; background: var(--accent-soft, rgba(124,92,255,.16)); border: 1px solid var(--accent-line, rgba(124,92,255,.4)); font-size: 11.5px; color: var(--text); }
.tagchip i { font-style: normal; cursor: pointer; width: 15px; height: 15px; line-height: 14px; text-align: center; border-radius: 50%; font-size: 10px; color: var(--text-3); background: rgba(127,127,127,.15); }
.tagchip i:hover { color: #fff; background: var(--danger, #f2555a); }
.tagbox-in { width: 100%; border: none !important; background: transparent !important; padding: 3px 2px !important; box-shadow: none !important; font-size: 12.5px; }
.tagbox-in:focus { outline: none; }
.dub-ed-hint { font-size: 12px; color: var(--text-2); line-height: 1.6; }

/* ---------------- VIP 开通 / 余额充值 ---------------- */
.vip-page { padding: 26px 30px 30px; overflow: auto; height: 100%; display: flex; flex-direction: column; gap: 18px; }
.vip-hero { text-align: center; padding: 22px 16px 18px; border-radius: 16px; position: relative; overflow: hidden;
    background: linear-gradient(150deg, rgba(124,92,255,.22), rgba(176,107,255,.10) 45%, rgba(245,166,35,.14));
    border: 1px solid rgba(176,107,255,.32); }
.vip-hero h2 { margin: 10px 0 6px; font-size: 21px; letter-spacing: 1px; background: linear-gradient(90deg, #f5d48a, #f5a623); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.vip-hero p { font-size: 12.5px; color: var(--text-2); }
.vip-crown { width: 58px; height: 58px; margin: 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #f5c76a, #f5a623); color: #fff; box-shadow: 0 8px 24px rgba(245,166,35,.35); }
.vip-crown.is-wallet { background: linear-gradient(135deg, #4a7dff, #2fb5a3); box-shadow: 0 8px 24px rgba(74,125,255,.3); }
.vip-current { margin-top: 8px !important; font-size: 12px !important; color: var(--text-3) !important; }
.vip-perks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.vip-perk { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; padding: 13px 8px;
    border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel-2); }
.vip-perk i { font-style: normal; color: var(--accent-2); font-size: 14px; }
.vip-perk b { font-size: 12.5px; color: var(--text); }
.vip-perk em { font-size: 11px; color: var(--text-3); font-style: normal; }
.plan-grid { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.plan-card { position: relative; width: 148px; padding: 18px 14px 15px; border-radius: 14px; cursor: pointer; text-align: center;
    border: 1.5px solid var(--border); background: var(--panel-2); color: var(--text);
    display: flex; flex-direction: column; gap: 4px; align-items: center; transition: border-color .15s, transform .15s, box-shadow .15s; }
.plan-card:hover { transform: translateY(-2px); border-color: var(--accent-line); }
.plan-card.is-on { border-color: var(--accent); background: linear-gradient(160deg, var(--accent-soft), var(--panel-2)); box-shadow: 0 6px 22px rgba(124,92,255,.25); }
.plan-card b { font-size: 14px; }
.plan-card .plan-days { font-size: 11px; color: var(--text-3); font-style: normal; }
.plan-card strong { font-size: 21px; color: var(--warn); letter-spacing: .5px; }
.plan-badge { position: absolute; top: -9px; right: 10px; padding: 2px 9px; border-radius: 9px; font-size: 10.5px; font-style: normal;
    background: linear-gradient(135deg, #f5a623, #ff7a45); color: #fff; font-weight: 600; }
.vip-actions { display: flex; align-items: center; gap: 14px; justify-content: center; flex-wrap: wrap; }
.vip-buy { min-width: 180px; }
.pay-type-pick { display: inline-flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.pay-type-pick button { border: none; background: transparent; color: var(--text-2); font-size: 12.5px; padding: 9px 16px; cursor: pointer; transition: background .15s, color .15s; }
.pay-type-pick button + button { border-left: 1px solid var(--border); }
.pay-type-pick button.is-on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.vip-note { text-align: center; font-size: 11.5px; color: var(--text-3); }
.rc-balance { color: var(--warn); font-size: 15px; }
.rc-amounts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 420px; margin: 0 auto; width: 100%; }
.rc-amt { padding: 14px 0; border-radius: 12px; border: 1.5px solid var(--border); background: var(--panel-2); color: var(--text);
    font-size: 15px; font-weight: 600; cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
.rc-amt:hover { transform: translateY(-1px); border-color: var(--accent-line); }
.rc-amt.is-on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.rc-custom { display: flex; align-items: center; }
.rc-custom input { width: 100%; height: 100%; border: 1.5px dashed var(--border); background: transparent; color: var(--text);
    border-radius: 12px; text-align: center; font-size: 14px; outline: none; }
.rc-custom input:focus { border-color: var(--accent-line); }
.rc-usage { max-width: 420px; margin: 0 auto; width: 100%; border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px; background: var(--panel-2); }
.rc-usage > b { font-size: 12.5px; color: var(--text-2); }
.rc-prices { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; margin-top: 8px; }
.rc-prices span { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-2); }
.rc-prices b { color: var(--text); font-weight: 600; }

/* ---------------- 个人中心动作按钮 ---------------- */
.pp-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
.pp-btn { border: none; border-radius: 10px; padding: 9px 0; font-size: 12.5px; font-weight: 600; cursor: pointer; color: #fff; transition: filter .15s, transform .1s; }
.pp-btn:hover { filter: brightness(1.08); }
.pp-btn:active { transform: scale(.98); }
.pp-btn.is-vip { background: linear-gradient(135deg, #f5c76a, #f5a623); }
.pp-btn.is-rc { background: linear-gradient(135deg, #7c5cff, #b06bff); }

/* ---------------- 刷新确认弹层 ---------------- */
.refresh-mask { position: fixed; inset: 0; z-index: 3000; background: rgba(5, 8, 14, .6); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center; }
.refresh-box { width: min(360px, 90vw); background: var(--panel-2); border: 1px solid var(--border); border-radius: 16px;
    padding: 26px 26px 22px; text-align: center; box-shadow: var(--shadow-lg); }
.refresh-ico { font-size: 30px; margin-bottom: 10px; }
.refresh-box b { font-size: 15px; color: var(--text); }
.refresh-box p { font-size: 12.5px; color: var(--text-2); line-height: 1.7; margin: 8px 0 18px; }
.refresh-btns { display: flex; gap: 10px; }
.refresh-btns .btn { flex: 1; }

/* ---------------- 封面制作：文件夹筛选 ---------------- */
.cv-folders { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.cv-folder { border: 1px solid var(--border); background: transparent; color: var(--text-2); font-size: 11.5px;
    padding: 3px 11px; border-radius: 20px; cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.cv-folder:hover { color: var(--text); border-color: var(--accent-line); }
.cv-folder.is-on { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); font-weight: 600; }

/* 封面制作页：左表单右结果，素材框拉到底 */
.cv-page { display: grid; grid-template-columns: minmax(320px, 5fr) minmax(340px, 6fr); gap: 18px; height: 100%; min-height: 0; flex: 1 1 auto; }
.cv-form { display: flex; flex-direction: column; min-height: 0; }
.cv-form .cv-asset-field,
.cv-form .dub-field:has(> .cv-assets) { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.cv-assets { flex: 1 1 auto; min-height: 200px; max-height: none; overflow: auto; }

/* ---------------- VIP 模版锁定 ---------------- */
.tpl-item.is-locked { opacity: .6; }
.tpl-btn.is-viplock { background: linear-gradient(135deg, #f5a623, #ff7a45); border: none; color: #fff; font-weight: 600; }
.tpl-btn.is-viplock:hover { filter: brightness(1.08); }

/* ---------------- 实名弹层（复用 tpl-overlay） ---------------- */
#rnOverlay .mm-editor .dub-field input { background: var(--panel-3); }

/* ---------------- 任务栏窗口图标（VIP / 充值） ---------------- */
.wg-vip { background: linear-gradient(135deg, #f5c76a, #f5a623); }
.wg-recharge { background: linear-gradient(135deg, #4a7dff, #6aa2ff); }

/* ---------------- 桌面图标配色扩展 ---------------- */
.di-vip { background: linear-gradient(135deg, #f5c76a, #f5a623); }
.di-covers   { background: linear-gradient(135deg, #e05a8a, #f07fae); }
.di-settings { background: linear-gradient(135deg, #5a6b85, #8494ad); }

:root[data-theme="light"] .refresh-mask { background: rgba(30, 40, 60, .35); }
:root[data-theme="light"] .vip-hero { border-color: rgba(176,107,255,.25); }
:root[data-theme="light"] .di-vip, :root[data-theme="light"] .wg-vip,
:root[data-theme="light"] .di-covers, :root[data-theme="light"] .wg-recharge { color: #fff; }

/* ============================================================
   登录 / 注册门：高大上炫酷增强（覆盖旧样式）
   ============================================================ */
.login-gate {
    background:
        radial-gradient(1100px 620px at 18% 8%, rgba(124, 92, 255, .28), transparent 60%),
        radial-gradient(900px 560px at 85% 88%, rgba(245, 166, 35, .16), transparent 62%),
        radial-gradient(700px 500px at 78% 18%, rgba(47, 181, 163, .14), transparent 60%),
        var(--bg);
}
.login-card {
    position: relative;
    width: min(400px, 92vw);
    padding: 34px 32px 28px;
    border-radius: 22px;
    border: 1px solid transparent;
    background:
        linear-gradient(var(--panel-2), var(--panel-2)) padding-box,
        linear-gradient(140deg, rgba(124, 92, 255, .65), rgba(176, 107, 255, .18) 40%, rgba(245, 166, 35, .5)) border-box;
    box-shadow: 0 30px 90px rgba(0, 0, 0, .6), 0 0 60px rgba(124, 92, 255, .12);
    backdrop-filter: blur(18px);
    animation: login-in .55s cubic-bezier(.22, 1.1, .32, 1) both;
}
@keyframes login-in {
    from { opacity: 0; transform: translateY(26px) scale(.96); }
    to   { opacity: 1; transform: none; }
}
.login-card::before {
    content: '';
    position: absolute;
    inset: -46px;
    z-index: -1;
    background: conic-gradient(from 0deg, rgba(124, 92, 255, .22), rgba(176, 107, 255, .05), rgba(245, 166, 35, .18), rgba(124, 92, 255, .22));
    border-radius: 50%;
    filter: blur(52px);
    animation: login-spin 9s linear infinite;
    pointer-events: none;
}
@keyframes login-spin { to { transform: rotate(1turn); } }
.login-brand { margin-bottom: 20px; }
.login-brand b {
    background: linear-gradient(92deg, var(--text), #cdbcff 55%, #f5d48a);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 18px;
}
.login-card .dub-field input {
    background: var(--panel-3);
    border-color: var(--border);
    height: 44px;
    transition: border-color .18s, box-shadow .18s;
}
.login-card .dub-field input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(124, 92, 255, .16);
}
.login-submit {
    height: 46px;
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: 2px;
    border: none;
    background: linear-gradient(120deg, #7c5cff, #b06bff 55%, #f5a623 130%);
    background-size: 180% 100%;
    box-shadow: 0 10px 28px rgba(124, 92, 255, .38);
    transition: background-position .4s, box-shadow .2s, transform .12s;
}
.login-submit:hover { background-position: 100% 0; box-shadow: 0 12px 34px rgba(176, 107, 255, .45); }
.login-submit:active { transform: scale(.98); }
.login-hint { text-align: center; }
:root[data-theme="light"] .login-card {
    box-shadow: 0 30px 80px rgba(30, 40, 80, .22), 0 0 60px rgba(124, 92, 255, .1);
}

/* ============================================================
   第22轮修正：登录/实名按钮间隔 · 封面素材框 · VIP/充值页版式
   ============================================================ */

/* 一、登录提交按钮与密码框拉开间隔 */
.login-submit { margin-top: 40px; }
.login-card .dub-field + .dub-field { margin-top: 14px; }
.login-card .login-hint { margin-top: 16px; }

/* 二、实名认证刷脸按钮与输入框拉开间隔 */
#rnStart, #rnCheck { margin-top: 40px; }
#rnOverlay .dub-field + .dub-field { margin-top: 12px; }

/* 四、封面制作：素材框更大、素材缩略图更小更密集 */
.cv-assets { grid-template-columns: repeat(5, 1fr); gap: 6px; padding: 7px; }
.cv-asset { border-width: 1.5px; border-radius: 7px; }
.cv-asset span { font-size: 9.5px; padding: 2px 4px; }
.cv-asset.is-on::after { width: 15px; height: 15px; top: 4px; right: 4px; font-size: 10px; }
@media (min-width: 1200px) {
    .cv-assets { grid-template-columns: repeat(6, 1fr); }
}

/* 五、VIP 开通 / 余额充值页错版修复 + 整体居中 */
.vip-page { align-items: center; }
.vip-page > * { width: 100%; }
.vip-hero { max-width: 640px; }
.vip-perks { max-width: 640px; }
.plan-grid { max-width: 640px; }
.rc-balance { text-align: center; display: block; }
.rc-amounts { grid-template-columns: repeat(3, 1fr); }
.rc-usage { max-width: 420px; }
.vip-actions { margin-top: 4px; }
/* 支付方式选择与购买按钮等高，底部不再错位 */
.pay-type-pick { height: 46px; }
.pay-type-pick button { height: 100%; line-height: 1; display: inline-flex; align-items: center; }
.vip-buy { height: 46px; display: inline-flex; align-items: center; justify-content: center; }
.rc-amt { height: 52px; display: inline-flex; align-items: center; justify-content: center; }
.rc-custom { height: 52px; }

/* ============================================================
   第23轮：任务栏图标+名称 · 修改密码按钮 · 存储包入口 · VIP 美化
   ============================================================ */

/* 六、任务栏：图标 + 名称 */
.tb-btn.tb-dyn { width: auto; min-width: 42px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px 0 10px; }
.tb-btn .tb-name { font-size: 11.5px; color: var(--text-2); white-space: nowrap; letter-spacing: .3px; }
.tb-btn.is-active .tb-name, .tb-btn.tb-dyn:hover .tb-name { color: var(--accent); }

/* 四、个人中心：修改密码按钮美化 */
.pp-pw-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    margin: 12px 16px 4px; padding: 7px 14px;
    border: 1px solid var(--border); border-radius: 20px;
    background: var(--panel-3); color: var(--text-2);
    font-size: 12px; cursor: pointer; width: auto;
    transition: color .15s, border-color .15s, background .15s, box-shadow .15s;
}
.pp-pw-toggle::before { content: '🔑'; font-size: 12px; }
.pp-pw-toggle:hover {
    color: var(--accent); border-color: var(--accent-line);
    background: var(--accent-soft); box-shadow: 0 3px 12px rgba(124, 92, 255, .18);
}
.pp-pw-toggle + .pp-pw { padding-left: 16px; padding-right: 16px; }

/* 五、个人中心：加购存储包按钮（第三颗，通栏） */
.pp-actions { grid-template-columns: 1fr 1fr; }
.pp-btn.is-space { background: linear-gradient(135deg, #2fb5a3, #4a7dff); }
.pp-btn-wide { grid-column: 1 / -1; }

/* 七、VIP 会员页美化 */
.vip-sec-title {
    display: flex; align-items: center; gap: 8px;
    margin: 10px 0 2px; font-size: 14px; color: var(--text);
    max-width: 640px;
}
.vip-sec-dot { width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, #2fb5a3, #4a7dff); }
.vip-sec-dot.is-space { box-shadow: 0 0 8px rgba(47, 181, 163, .5); }
.plan-grid-space .plan-card { border-color: rgba(47, 181, 163, .35); }
.plan-grid-space .plan-card.is-on {
    border-color: #2fb5a3;
    background: linear-gradient(160deg, rgba(47, 181, 163, .12), var(--panel-2));
    box-shadow: 0 6px 22px rgba(47, 181, 163, .22);
}
.plan-grid-space .plan-card strong { color: #2fb5a3; }

/* VIP hero 光效增强 + 卡片动效（扫光连续循环，原关键帧有 55% 停顿） */
.vip-hero::after {
    content: '';
    position: absolute; top: -60%; left: -20%; width: 60%; height: 220%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .07), transparent);
    transform: rotate(18deg);
    animation: vip-shine 3.2s linear infinite;
    pointer-events: none;
}
@keyframes vip-shine {
    from { left: -45%; }
    to   { left: 135%; }
}
.vip-crown { animation: vip-float 3.2s ease-in-out infinite; }
@keyframes vip-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}
.plan-card b { letter-spacing: .3px; }
.plan-card.is-on .plan-badge { box-shadow: 0 2px 10px rgba(245, 166, 35, .5); }
.vip-buy { min-width: 200px; border-radius: 23px; }

/* ============================================================
   第24轮：实名按钮 40px · 个人中心按钮行 · 独立存储包窗口 · VIP 版式
   ============================================================ */

/* 二、实名按钮间隔 40px（旧 48px 覆盖） */
#rnStart, #rnCheck { margin-top: 40px; }

/* 四、个人中心：修改密码 + 退出登录 同排、统一样式 */
.pp-foot { display: flex; gap: 10px; margin-top: 14px; padding: 12px 16px 16px; border-top: 1px solid var(--border); }
.pp-foot .pp-pw-toggle { margin: 0; flex: 1; justify-content: center; }
.pp-pw-toggle.is-logout::before { content: '⎋'; }
.pp-pw-toggle.is-logout:hover {
    color: var(--danger, #f2555a); border-color: rgba(242, 85, 90, .45);
    background: rgba(242, 85, 90, .08); box-shadow: 0 3px 12px rgba(242, 85, 90, .15);
}

/* 五、独立「存储空间包」窗口 */
.wg-storage { background: linear-gradient(135deg, #2fb5a3, #4a7dff); }
.vip-hero.is-storage {
    background: linear-gradient(150deg, rgba(47, 181, 163, .22), rgba(74, 125, 255, .10) 50%, rgba(47, 181, 163, .08));
    border-color: rgba(47, 181, 163, .32);
}
.vip-hero.is-storage h2 {
    background: linear-gradient(90deg, #7fe3d4, #4a7dff);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.vip-crown.is-disk { background: linear-gradient(135deg, #2fb5a3, #4a7dff); box-shadow: 0 8px 24px rgba(47, 181, 163, .35); }
.sto-perks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 560px; }
.sto-balance { color: #2fb5a3; }
.sto-buy {
    background: linear-gradient(120deg, #2fb5a3, #4a7dff 130%);
    box-shadow: 0 10px 24px rgba(47, 181, 163, .35);
}
.plan-grid-space { max-width: 560px; }

/* 七、VIP 页：横幅固定 220px；购买按钮与支付方式同行、不占宽 */
.vip-hero {
    height: 220px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; padding: 0 16px; overflow: hidden;
    max-width: 640px; width: 100%; margin: 0 auto;
}
.vip-hero .vip-crown { width: 46px; height: 46px; margin-bottom: 4px; }
.vip-hero h2 { margin: 0; font-size: 20px; }
.vip-actions { flex-wrap: nowrap; }
.vip-buy { min-width: 0; width: auto; padding: 0 26px; border-radius: 10px; flex-shrink: 0; }
.vip-link {
    border: none; background: none; color: var(--accent); cursor: pointer;
    font-size: inherit; padding: 0; text-decoration: underline; text-underline-offset: 3px;
}
.vip-link:hover { color: var(--accent-2, #b06bff); }

/* ============================================================
   第26轮：VIP / 充值 / 存储包 三页统一版式（横幅 266px + 内容重排）
   ============================================================ */
:root { --vip-max: 700px; }

.vip-page {
    padding: 22px 26px 28px;
    align-items: center;
    gap: 16px;
}

/* ---------------- 顶部横幅：固定 266px ---------------- */
.vip-hero {
    position: relative;
    width: 100%;
    max-width: var(--vip-max);
    height: 266px;
    margin: 0 auto;
    padding: 0 30px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    text-align: center;
    overflow: hidden;
    background:
        radial-gradient(620px 260px at 50% -32%, rgba(245, 166, 35, .30), transparent 72%),
        radial-gradient(460px 240px at 4% 116%, rgba(124, 92, 255, .38), transparent 72%),
        linear-gradient(150deg, rgba(124, 92, 255, .20), rgba(176, 107, 255, .08) 46%, rgba(245, 166, 35, .12));
    border: 1px solid rgba(176, 107, 255, .32);
    box-shadow: 0 18px 46px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.vip-hero.is-recharge {
    background:
        radial-gradient(620px 260px at 50% -32%, rgba(74, 125, 255, .34), transparent 72%),
        radial-gradient(460px 240px at 6% 116%, rgba(47, 181, 163, .30), transparent 72%),
        linear-gradient(150deg, rgba(74, 125, 255, .20), rgba(47, 181, 163, .10) 60%);
    border-color: rgba(74, 125, 255, .34);
}
.vip-hero.is-storage {
    background:
        radial-gradient(620px 260px at 50% -32%, rgba(47, 181, 163, .34), transparent 72%),
        radial-gradient(460px 240px at 6% 116%, rgba(74, 125, 255, .28), transparent 72%),
        linear-gradient(150deg, rgba(47, 181, 163, .20), rgba(74, 125, 255, .10) 60%);
    border-color: rgba(47, 181, 163, .34);
}
.vip-hero .vip-crown {
    width: 56px; height: 56px;
    margin: 0 auto 12px;
}
.vip-hero .vip-crown svg { width: 30px; height: 30px; }
.vip-hero h2 {
    margin: 0;
    font-size: 24px;
    letter-spacing: 2px;
}
.vip-hero p {
    margin: 10px auto 0;
    max-width: 560px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--text-2);
}
.vip-hero .vip-current { margin-top: 12px !important; }
.vip-hero-chips {
    display: flex; flex-wrap: wrap; gap: 8px;
    justify-content: center;
    margin-top: 14px;
}
.vip-hero-chips span {
    font-size: 11.5px; color: var(--text-2);
    padding: 5px 12px; border-radius: 20px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .10);
    backdrop-filter: blur(6px);
}
.vip-hero-chips b { color: var(--warn); font-weight: 600; margin-left: 2px; }
:root[data-theme="light"] .vip-hero-chips span {
    background: rgba(255, 255, 255, .6);
    border-color: rgba(20, 30, 60, .08);
}

/* ---------------- 横幅下方内容：统一栏宽 ---------------- */
.vip-body {
    width: 100%;
    max-width: var(--vip-max);
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.vip-block {
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 15px 18px 16px;
    background: var(--panel-2);
}
.vip-block-head {
    display: flex;
    align-items: baseline;
    gap: 9px;
    margin-bottom: 12px;
}
.vip-block-head b { font-size: 13.5px; color: var(--text); letter-spacing: .3px; }
.vip-block-head em { font-style: normal; font-size: 11.5px; color: var(--text-3); }

/* 套餐卡：按容器宽度自适应铺满 */
.plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 10px;
    justify-content: stretch;
    max-width: none;
}
.plan-card { width: auto; padding: 16px 12px 14px; }
.plan-card strong { font-size: 20px; }
.vip-perks { max-width: none; grid-template-columns: repeat(4, 1fr); }
.vip-perk { padding: 12px 8px; }
.sto-perks { max-width: none; grid-template-columns: repeat(3, 1fr); margin-top: 14px; }

/* 应付金额 + 支付方式 + 购买按钮 */
.vip-checkout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
    border-radius: 16px;
    border: 1px solid rgba(245, 166, 35, .28);
    background: linear-gradient(120deg, rgba(245, 166, 35, .10), rgba(124, 92, 255, .08));
}
.vip-checkout.is-recharge {
    border-color: rgba(74, 125, 255, .3);
    background: linear-gradient(120deg, rgba(74, 125, 255, .12), rgba(47, 181, 163, .07));
}
.vip-checkout.is-storage {
    border-color: rgba(47, 181, 163, .3);
    background: linear-gradient(120deg, rgba(47, 181, 163, .12), rgba(74, 125, 255, .07));
}
.vip-total { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.vip-total em { font-style: normal; font-size: 11.5px; color: var(--text-3); }
.vip-total b { font-size: 26px; line-height: 1.25; color: var(--warn); font-variant-numeric: tabular-nums; }
.vip-total span { font-size: 11.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vip-checkout.is-storage .vip-total b { color: #2fb5a3; }
.vip-checkout-ops { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.vip-checkout .pay-type-pick { height: 44px; }
.vip-checkout .vip-buy { height: 44px; padding: 0 28px; border-radius: 12px; }

/* 充值金额：3 列铺满 */
.rc-amounts { max-width: none; width: 100%; margin: 0; grid-template-columns: repeat(3, 1fr); }
.rc-usage { max-width: none; width: 100%; margin: 0; }
.rc-prices { margin-top: 10px; }

/* 存储空间使用进度 */
.sto-meter { display: flex; align-items: center; gap: 12px; }
.sto-bar {
    flex: 1; height: 10px; border-radius: 6px;
    background: var(--panel-3);
    border: 1px solid var(--border);
    overflow: hidden;
}
.sto-bar i {
    display: block; height: 100%; width: 0;
    border-radius: 6px;
    background: linear-gradient(90deg, #2fb5a3, #4a7dff);
    transition: width .45s ease;
}
.sto-pct { font-size: 12px; color: var(--text-2); min-width: 58px; text-align: right; font-variant-numeric: tabular-nums; }

/* 窄窗口：横幅保持 266px，结算区上下排布 */
@media (max-width: 680px) {
    .vip-page { padding: 16px 16px 22px; }
    .vip-hero { padding: 0 18px; }
    .vip-hero h2 { font-size: 21px; }
    .vip-hero p { font-size: 12.5px; }
    .vip-perks { grid-template-columns: repeat(2, 1fr); }
    .sto-perks { grid-template-columns: 1fr; }
    .vip-checkout { flex-direction: column; align-items: stretch; gap: 12px; }
    .vip-checkout-ops { justify-content: space-between; }
    .vip-checkout .vip-buy { flex: 1; }
}

/* 三页：横幅高度固定，不随内容缩放（flex 列内禁止收缩） */
.vip-page > * { flex: 0 0 auto; }
.vip-page > .vip-hero { flex: 0 0 266px; }
.vip-body > * { flex: 0 0 auto; }

/* ============================================================
   第27轮：开始创作（项目中心 win-create）+ 创作工作台（win-project）
   ============================================================ */
.wg-create, .di-create  { background: linear-gradient(135deg, #2fb5a3, #38b6ff); }
.wg-project             { background: linear-gradient(135deg, #7c5cff, #4a7dff); }

/* ---------------- 项目中心 ---------------- */
.pc-page { height: 100%; display: flex; flex-direction: column; padding: 18px 22px 20px; gap: 14px; overflow: auto; }
.pc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex: 0 0 auto; }
.pc-head h1 { margin: 0 0 4px; font-size: 18px; }
.pc-head .page-desc { margin: 0; font-size: 12px; color: var(--text-3); }
.pc-sub {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 10px;
    font-size: 13px; font-weight: 600; color: var(--text);
}
.pc-count {
    font-size: 11px; font-weight: 500; color: var(--text-3);
    padding: 3px 9px; border-radius: 20px;
    border: 1px solid var(--border); background: var(--panel-2);
}
.pc-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 14px; align-content: start;
}
.pc-card {
    position: relative;
    border: 1px solid var(--border); border-radius: 14px;
    background: var(--panel-2);
    padding: 10px 12px 12px; text-align: left;
    cursor: pointer; overflow: hidden;
    display: flex; flex-direction: column; gap: 6px;
    transition: border-color .15s, transform .15s, box-shadow .15s;
    color: var(--text);
}
.pc-card:hover {
    border-color: var(--accent-line);
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(4, 8, 22, .3);
}
.pc-cover {
    position: relative; height: 86px; border-radius: 10px;
    display: grid; place-items: center; color: rgba(255, 255, 255, .5);
    background:
        radial-gradient(120px 70px at 30% 20%, rgba(124, 92, 255, .35), transparent 70%),
        radial-gradient(140px 90px at 80% 90%, rgba(47, 181, 163, .28), transparent 70%),
        linear-gradient(150deg, rgba(124, 92, 255, .16), rgba(47, 181, 163, .08));
    border: 1px solid var(--border-soft);
}
.pc-badge {
    position: absolute; left: 8px; bottom: 8px;
    font-size: 10.5px; font-style: normal; font-weight: 600;
    padding: 3px 8px; border-radius: 20px; color: #fff;
    background: rgba(10, 14, 30, .55); backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, .14);
}
.pc-badge.is-script { background: linear-gradient(135deg, #7c5cff, #b06bff); }
.pc-badge.is-creative { background: linear-gradient(135deg, #2fb5a3, #38b6ff); }
.pc-badge.is-direct { background: linear-gradient(135deg, #f5a623, #ff7a45); }
.pc-badge.is-new { color: var(--text-2); }
.pc-script-ok {
    position: absolute; right: 8px; bottom: 8px;
    font-size: 10.5px; color: var(--success);
    padding: 3px 8px; border-radius: 20px;
    background: rgba(47, 191, 113, .12); border: 1px solid rgba(47, 191, 113, .3);
}
.pc-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-time {
    font-style: normal; font-size: 11px; color: var(--text-3);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pc-del {
    position: absolute; top: 7px; right: 7px;
    width: 20px; height: 20px; border-radius: 50%;
    display: none; place-items: center;
    font-style: normal; font-size: 11px; color: var(--text-2);
    background: rgba(10, 14, 30, .6); border: 1px solid var(--border);
}
.pc-card:hover .pc-del { display: grid; }
.pc-del:hover { color: var(--danger); border-color: var(--danger); }
.pc-empty {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 6px;
    color: var(--text-3); text-align: center;
}
.pc-empty b { color: var(--text-2); }
.pc-empty p { margin: 0; font-size: 12.5px; }
.pc-empty-art { font-size: 44px; filter: saturate(.8); }

/* 新建项目弹窗 */
.pc-dialog {
    width: 460px; max-width: calc(100vw - 40px);
    background: var(--panel); border: 1px solid var(--border);
    border-radius: 18px; padding: 20px 22px 18px;
    box-shadow: 0 30px 80px rgba(4, 8, 22, .55);
    display: flex; flex-direction: column; gap: 10px;
}
.pc-dlg-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.pc-dlg-head h3 { margin: 0 0 4px; font-size: 17px; }
.pc-dlg-head p { margin: 0; font-size: 12px; color: var(--text-3); }
.pc-dlg-label { font-size: 12.5px; color: var(--text-2); }
.pc-dialog input[type="text"] {
    height: 44px; border-radius: 12px;
    border: 1px solid var(--accent-line);
    background: var(--panel-2); color: var(--text);
    padding: 0 14px; font-size: 14px; outline: none;
}
.pc-dialog input[type="text"]:focus { box-shadow: 0 0 0 3px rgba(124, 92, 255, .18); }
.pc-dialog select.pc-type {
    height: 40px; border-radius: 12px;
    border: 1px solid var(--accent-line);
    background: var(--panel-2); color: var(--text);
    padding: 0 10px; font-size: 13px; outline: none;
    color-scheme: dark; cursor: pointer;
}
.pc-dialog select.pc-type:focus { box-shadow: 0 0 0 3px rgba(124, 92, 255, .18); }
.pc-dlg-hint { margin: 0; font-size: 11.5px; color: var(--text-3); }
.pc-dlg-btns { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }

/* ---------------- 创作工作台 ---------------- */
.pj-page { height: 100%; display: flex; min-height: 0; }
.pj-side {
    flex: 0 0 210px; width: 210px;
    display: flex; flex-direction: column; gap: 14px;
    padding: 18px 14px;
    border-right: 1px solid var(--border-soft);
    background: color-mix(in srgb, var(--panel-2) 60%, transparent);
}
.pj-side-name {
    font-size: 15px; font-weight: 700;
    padding: 10px 12px; border-radius: 12px;
    background: var(--panel-2); border: 1px solid var(--border);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pj-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pj-steps li {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 10px 11px; border-radius: 12px;
    border: 1px solid transparent;
    color: var(--text-3); cursor: default;
}
.pj-steps li i {
    flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%;
    display: grid; place-items: center;
    font-style: normal; font-size: 11.5px; font-weight: 700;
    background: var(--panel-3); border: 1px solid var(--border);
}
.pj-steps li b { display: block; font-size: 12.5px; color: var(--text-2); }
.pj-steps li em { font-style: normal; font-size: 10.5px; }
.pj-steps li.is-on {
    border-color: var(--accent-line);
    background: var(--accent-soft);
    color: var(--accent);
}
.pj-steps li.is-on i { background: linear-gradient(135deg, #7c5cff, #b06bff); border-color: transparent; color: #fff; }
.pj-steps li.is-on b { color: var(--accent); }
.pj-steps li.is-lock { opacity: .55; }
.pj-back { margin-top: auto; }

/* 左侧剧集栏（替代原步骤菜单） */
.pj-epside { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.pj-epside-head { font-size: 10.5px; letter-spacing: 3px; color: var(--text-3); padding: 0 12px; }
.pj-epside-list {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin;
    display: flex; flex-direction: column; gap: 6px; padding: 2px;
}
.pj-epside-item {
    display: flex; align-items: center; gap: 7px; text-align: left;
    padding: 8px 10px; border-radius: 11px; cursor: pointer;
    border: 1px solid var(--border); background: var(--panel-2); color: var(--text-2);
    font-size: 12px; line-height: 1.4;
}
.pj-epside-item em { font-style: normal; font-weight: 600; flex: 0 0 auto; }
.pj-epside-item u {
    flex: 1 1 auto; min-width: 0; text-decoration: none;
    font-size: 10.5px; color: var(--text-3);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pj-epside-item i { flex: 0 0 auto; font-style: normal; font-size: 10px; color: var(--text-3); }
.pj-epside-item:hover { border-color: var(--accent-line); color: var(--text); }
.pj-epside-item.is-on {
    border-color: var(--accent-line); background: var(--accent-soft);
}
.pj-epside-item.is-on em { color: var(--accent); }
.pj-epside-item.is-empty { opacity: .42; cursor: not-allowed; }


.pj-main { flex: 1; min-width: 0; overflow: auto; padding: 20px 24px 26px; }
.pj-placeholder {
    height: 100%; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 6px;
    color: var(--text-3); text-align: center;
}
.pj-placeholder b { color: var(--text-2); }
.pj-placeholder p { margin: 0; font-size: 12.5px; }
.pj-main-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    margin-bottom: 16px;
}
/* 生成视频页隐藏标题块时，右侧操作按钮保持靠右 */
.pj-main-head > #pjHeadInfo[hidden] + .pj-head-ops { margin-left: auto; }
.pj-flow { font-size: 10.5px; letter-spacing: 2px; color: var(--accent); font-weight: 700; }
.pj-main-head h2 { margin: 2px 0 4px; font-size: 19px; }
.pj-main-head p { margin: 0; font-size: 12px; color: var(--text-3); max-width: 560px; line-height: 1.7; }

/* 模式二选一大卡 */
.pj-mode-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.pj-mode-card {
    display: flex; align-items: center; gap: 12px;
    padding: 15px 16px; border-radius: 14px;
    border: 1px solid var(--border); background: var(--panel-2);
    color: var(--text); cursor: pointer; text-align: left;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.pj-mode-card i {
    flex: 0 0 40px; width: 40px; height: 40px; border-radius: 11px;
    display: grid; place-items: center; color: #fff;
    background: linear-gradient(135deg, #7c5cff, #b06bff);
}
.pj-mode-card[data-mode="creative"] i { background: linear-gradient(135deg, #2fb5a3, #38b6ff); }
.pj-mode-card b { display: block; font-size: 13.5px; }
.pj-mode-card em { font-style: normal; font-size: 11.5px; color: var(--text-3); }
.pj-mode-card:hover { border-color: var(--accent-line); }
.pj-mode-card.is-on {
    border-color: var(--accent-line);
    background: var(--accent-soft);
    box-shadow: 0 0 0 1px var(--accent-line) inset;
}

/* 模式面板 */
.pj-pane {
    border: 1px solid var(--border); border-radius: 14px;
    background: var(--panel-2);
    padding: 14px 16px 14px;
    display: flex; flex-direction: column; gap: 10px;
}
.pj-pane-head { display: flex; align-items: baseline; gap: 9px; }
.pj-pane-head b { font-size: 13px; }
.pj-pane-head em { font-style: normal; font-size: 11.5px; color: var(--text-3); }
.pj-type-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.pj-type-tabs button {
    height: 32px; padding: 0 16px; border-radius: 18px;
    border: 1px solid var(--border); background: transparent;
    color: var(--text-2); font-size: 12.5px; cursor: pointer;
    transition: all .14s;
}
.pj-type-tabs button:hover { color: var(--text); border-color: var(--accent-line); }
.pj-type-tabs button.is-on {
    color: #fff; border-color: transparent; font-weight: 600;
    background: linear-gradient(135deg, #7c5cff, #b06bff);
}
.pj-script, .pj-summary, .pj-gen-out .pj-script {
    width: 100%; min-height: 180px; resize: vertical;
    border-radius: 12px; border: 1px solid var(--border);
    background: var(--panel-3); color: var(--text);
    padding: 12px 14px; font-size: 13px; line-height: 1.8;
    outline: none; font-family: inherit;
}
.pj-script:focus, .pj-summary:focus { border-color: var(--accent-line); }
.pj-summary { min-height: 84px; }
.pj-pane-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pj-wordcount { font-size: 11.5px; color: var(--text-3); }

/* 创意标签 */
.pj-tags { display: flex; flex-direction: column; gap: 8px; }
.pj-tag-row { display: flex; gap: 10px; align-items: flex-start; }
.pj-tag-name {
    flex: 0 0 62px; text-align: right;
    font-size: 12px; color: var(--text-3); padding-top: 6px;
}
/* 单选/多选标记 */
.pj-tag-name .pj-tag-mode {
    display: block; font-style: normal; font-size: 9.5px;
    color: var(--text-3); opacity: .68; letter-spacing: .3px;
    margin-top: 1px;
}
.pj-tag-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.pj-tag-opts button {
    height: 27px; padding: 0 12px; border-radius: 14px;
    border: 1px solid var(--border); background: transparent;
    color: var(--text-2); font-size: 11.5px; cursor: pointer;
    transition: all .13s;
}
.pj-tag-opts button:hover { color: var(--text); border-color: var(--accent-line); }
.pj-tag-opts button.is-on {
    color: #fff; border-color: transparent;
    background: linear-gradient(135deg, #2fb5a3, #38b6ff);
    font-weight: 600;
}
.pj-summary-label { font-size: 12.5px; color: var(--text-2); }
.pj-gen-out {
    border-top: 1px dashed var(--border);
    padding-top: 12px; margin-top: 4px;
    display: flex; flex-direction: column; gap: 10px;
}

/* 窄窗口 */
@media (max-width: 860px) {
    .pj-side { flex-basis: 168px; width: 168px; }
    .pj-mode-cards { grid-template-columns: 1fr; }
    .pj-tag-row { flex-direction: column; gap: 4px; }
    .pj-tag-name { text-align: left; }
}

/* ============================================================
   第28轮：创作流水线（创意 → 大纲 → 分集 → 资产 → 分镜 → 视频）
   ============================================================ */

/* 项目卡：默认封面图 */
.pc-cover img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; border-radius: 10px;
}
.pc-cover { position: relative; overflow: hidden; }
.pc-cover svg { position: relative; z-index: 0; }

/* 剧本模式：满屏输入框 */
.pj-pane-fill { flex: 1; min-height: 0; }
.pj-script.is-fill { flex: 1; min-height: 380px; }

/* 创意模式子页 */
.pj-pane-creative { gap: 14px; }
.pj-subtabs {
    display: flex; gap: 8px; padding: 5px;
    background: var(--panel-3); border: 1px solid var(--border);
    border-radius: 12px; width: fit-content;
}
.pj-subtabs button {
    height: 34px; padding: 0 20px; border-radius: 9px;
    border: 0; background: transparent; color: var(--text-2);
    font-size: 13px; cursor: pointer; transition: all .14s;
}
.pj-subtabs button:hover { color: var(--text); }
.pj-subtabs button.is-on {
    color: #fff; font-weight: 600;
    background: linear-gradient(135deg, #7c5cff, #b06bff);
}
.pj-sub { display: flex; flex-direction: column; gap: 12px; }

/* 模板选择行 */
.pj-tpl-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pj-tpl-row label { display: flex; flex-direction: column; gap: 5px; font-size: 11.5px; color: var(--text-3); }
.pj-tpl-row select, .pj-boardtpl, .pj-params select {
    height: 38px; border-radius: 10px; border: 1px solid var(--border);
    background: var(--panel-3); color: var(--text); padding: 0 10px; font-size: 12.5px; outline: none;
}
.pj-tpl-row select:focus, .pj-boardtpl:focus { border-color: var(--accent-line); }

/* 创意方案列表 + 详情 */
.pj-ideas-wrap { display: grid; grid-template-columns: 240px 1fr; gap: 12px; }
.pj-idea-list { display: flex; flex-direction: column; gap: 8px; }
.pj-idea-item {
    display: flex; align-items: center; gap: 9px;
    padding: 11px 12px; border-radius: 12px; text-align: left;
    border: 1px solid var(--border); background: var(--panel-3); color: var(--text);
    cursor: pointer; transition: all .14s; font-size: 13px;
}
.pj-idea-item i {
    flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%;
    display: grid; place-items: center; font-style: normal;
    font-size: 11px; font-weight: 700; color: #fff;
    background: linear-gradient(135deg, #7c5cff, #b06bff);
}
.pj-idea-item b { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-idea-item.is-on {
    border-color: var(--accent-line);
    background: var(--accent-soft);
    box-shadow: 0 0 0 1px var(--accent-line) inset;
}
.pj-idea-ok { font-style: normal; font-size: 10.5px; color: var(--success); flex: 0 0 auto; }
/* 创意方案审核通过后的锁定横幅 */
.pj-ideas-lock {
    margin: 0 0 10px; padding: 9px 13px; border-radius: 9px; font-size: 12.5px;
    border: 1px solid color-mix(in srgb, var(--success) 45%, transparent);
    background: color-mix(in srgb, var(--success) 12%, transparent);
    color: var(--text); font-weight: 600;
}
.pj-idea-detail { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.pj-idea-detail input[type="text"] {
    height: 40px; border-radius: 10px; border: 1px solid var(--border);
    background: var(--panel-3); color: var(--text); padding: 0 12px; font-size: 13.5px; font-weight: 600; outline: none;
}
.pj-idea-text { min-height: 150px; }
.pj-idea-lab { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-2); }
.pj-idea-mini { min-height: 52px; }
/* 已选定创意：按要素分块展示 */
.pj-idea-chosen p { margin: 4px 0 0; white-space: pre-wrap; }
.pj-ideas, .pj-outline { border-top: 1px dashed var(--border); padding-top: 12px; }

/* 已选创意摘要 */
.pj-idea-chosen {
    border: 1px solid var(--border); border-radius: 12px;
    background: var(--panel-3); padding: 11px 14px;
    display: flex; flex-direction: column; gap: 4px;
}
.pj-idea-chosen b { font-size: 13.5px; color: var(--accent); }
.pj-idea-chosen p { margin: 0; font-size: 12px; line-height: 1.75; color: var(--text-2); }

/* 大纲参数行（联动） */
.pj-params { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pj-params label { display: flex; flex-direction: column; gap: 5px; font-size: 11.5px; color: var(--text-3); }
.pj-params input {
    height: 40px; border-radius: 10px; border: 1px solid var(--border);
    background: var(--panel-3); color: var(--text); padding: 0 12px; font-size: 13px; outline: none;
}
.pj-params input:focus { border-color: var(--accent-line); }
.pj-params input:disabled { opacity: .55; }
.pj-params2 { grid-template-columns: 1fr 1fr; }

/* 大纲列表 */
.pj-outline-list { display: flex; flex-direction: column; gap: 9px; }
.pj-outline-item { display: flex; gap: 10px; align-items: flex-start; }
.pj-outline-item > i {
    flex: 0 0 30px; width: 30px; height: 30px; border-radius: 9px;
    display: grid; place-items: center; font-style: normal;
    font-size: 12px; font-weight: 700; color: #fff;
    background: linear-gradient(135deg, #7c5cff, #b06bff);
    margin-top: 3px;
}
.pj-outline-fields { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pj-outline-fields input {
    height: 34px; border-radius: 9px; border: 1px solid var(--border);
    background: var(--panel-3); color: var(--text); padding: 0 11px; font-size: 12.5px; font-weight: 600; outline: none;
}
.pj-outline-fields textarea, .pj-asset-card textarea {
    border-radius: 9px; border: 1px solid var(--border);
    background: var(--panel-3); color: var(--text);
    padding: 8px 11px; font-size: 12px; line-height: 1.7;
    outline: none; resize: vertical; font-family: inherit; width: 100%;
}
.pj-outline-fields input:focus, .pj-outline-fields textarea:focus { border-color: var(--accent-line); }

/* 分集统计与列表 */
.pj-ep-stats {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px;
}
.pj-ep-stats > div {
    border: 1px solid var(--border); border-radius: 12px;
    background: var(--panel-3); padding: 10px 12px;
    display: flex; flex-direction: column; gap: 2px;
}
.pj-ep-stats b { font-size: 17px; }
.pj-ep-stats em { font-style: normal; font-size: 10.5px; color: var(--text-3); }
.pj-ep-item {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    border: 1px solid var(--border); border-radius: 12px;
    background: var(--panel-3); padding: 10px 14px;
}
.pj-ep-info { display: flex; align-items: center; gap: 9px; min-width: 0; }
.pj-ep-info b { font-size: 12.5px; flex: 0 0 auto; }
.pj-ep-info em { font-style: normal; font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-ep-ops { display: flex; gap: 8px; flex: 0 0 auto; }
.pj-ep-list { display: flex; flex-direction: column; gap: 8px; }

/* 选集弹窗 */
.pj-ep-quick { display: flex; gap: 8px; flex-wrap: wrap; }
.pj-ep-quick button {
    height: 32px; padding: 0 14px; border-radius: 17px;
    border: 1px solid var(--border); background: transparent;
    color: var(--text-2); font-size: 12px; cursor: pointer;
}
.pj-ep-quick button:hover { color: var(--text); border-color: var(--accent-line); }
.pj-ep-grid {
    display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px;
    max-height: 320px; overflow: auto; padding: 2px;
}
.pj-ep-cell {
    border: 1px solid var(--border); border-radius: 10px;
    background: var(--panel-3); color: var(--text);
    padding: 8px 4px; display: flex; flex-direction: column; align-items: center; gap: 2px;
    cursor: pointer; transition: all .13s;
}
.pj-ep-cell b { font-size: 14px; }
.pj-ep-cell em { font-style: normal; font-size: 9.5px; color: var(--text-3); }
.pj-ep-cell.is-on {
    border-color: transparent; color: #fff;
    background: linear-gradient(135deg, #2fb5a3, #38b6ff);
}
.pj-ep-cell.is-on em { color: rgba(255, 255, 255, .85); }
.pj-ep-cell.is-done { opacity: .55; cursor: not-allowed; }
.pj-ep-cell.is-done b { color: var(--success); }

/* 风格库 */
.pj-style-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.pj-style-card {
    width: 104px; border: 1px solid var(--border); border-radius: 12px;
    background: var(--panel-3); color: var(--text);
    padding: 7px; display: flex; flex-direction: column; gap: 6px;
    cursor: pointer; position: relative; transition: all .14s;
}
.pj-style-card:hover { border-color: var(--accent-line); }
.pj-style-card.is-on { border-color: var(--accent-line); box-shadow: 0 0 0 1px var(--accent-line) inset; }
.pj-style-thumb {
    height: 64px; border-radius: 8px; display: grid; place-items: center;
    font-size: 15px; font-weight: 700; color: var(--text-2);
    background: linear-gradient(135deg, rgba(124, 92, 255, .25), rgba(47, 181, 163, .18));
    overflow: hidden;
}
.pj-style-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* 新增风格弹窗：缩略图上传 */
.pj-stylethumb-box { display: flex; flex-direction: column; gap: 8px; }
.pj-stylethumb-prev {
    height: 160px; border-radius: 12px; border: 1px dashed var(--border);
    background: var(--panel-3); display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 6px; overflow: hidden;
}
.pj-stylethumb-prev span { font-size: 13px; font-weight: 600; color: var(--text-2); }
.pj-stylethumb-prev em { font-size: 11.5px; color: var(--text-3); }
.pj-stylethumb-prev img { width: 100%; height: 100%; object-fit: cover; }
.pj-stylethumb-prev.has-img span, .pj-stylethumb-prev.has-img em { display: none; }
.pj-stylethumb-stat { margin: 0; font-size: 11.5px; color: var(--text-3); word-break: break-all; }
.pj-style-card b { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-style-on {
    position: absolute; top: 11px; right: 11px;
    font-style: normal; font-size: 9.5px; color: #fff;
    padding: 2px 6px; border-radius: 10px;
    background: rgba(47, 181, 163, .9);
}

/* 资产分组 */
.pj-asset-groups { display: flex; flex-direction: column; gap: 14px; }
.pj-asset-group-head { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.pj-asset-group-head b { font-size: 13px; }
.pj-asset-group-head em { font-style: normal; font-size: 11px; color: var(--text-3); margin-right: auto; }
.pj-asset-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.pj-asset-card {
    border: 1px solid var(--border); border-radius: 12px;
    background: var(--panel-3); padding: 10px;
    display: flex; flex-direction: column; gap: 6px;
}
.pj-asset-card input {
    height: 32px; border-radius: 8px; border: 1px solid var(--border);
    background: var(--panel); color: var(--text); padding: 0 9px; font-size: 12px; outline: none; width: 100%;
}
.pj-asset-card textarea:focus, .pj-asset-card input:focus { border-color: var(--accent-line); }
.pj-asset-face {
    position: relative; width: 100%; max-width: 224px; aspect-ratio: 1 / 1;
    margin: 0 auto; border-radius: 10px; overflow: hidden;
    display: grid; place-items: center; font-size: 26px; color: var(--text-3);
    background: linear-gradient(135deg, rgba(124, 92, 255, .22), rgba(47, 181, 163, .16));
}
.pj-asset-face.has-img { cursor: zoom-in; background: var(--panel); }
.pj-asset-face img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.pj-asset-face.has-img:hover img { transform: scale(1.04); }
.pj-asset-ops { display: flex; gap: 6px; flex-wrap: wrap; }

/* 分镜 */
.pj-board-eps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 1100px) { .pj-board-eps { grid-template-columns: repeat(2, 1fr); } }
.pj-board-ep {
    border: 1px solid var(--border); border-radius: 12px;
    background: var(--panel-3); padding: 13px 15px;
    display: flex; flex-direction: column; gap: 8px;
}
.pj-board-ep.is-done { border-color: rgba(47, 191, 113, .35); }
.pj-board-ep header { display: flex; align-items: center; gap: 8px; }
.pj-board-ep header b { font-size: 13px; flex: 0 0 auto; }
.pj-board-ep header .pj-ep-title { font-style: normal; font-size: 12px; color: var(--text-2); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-ep-done {
    flex: 0 0 auto; font-size: 10.5px; font-style: normal; padding: 2px 8px; border-radius: 999px;
    background: rgba(47, 191, 113, .14); color: var(--a-ok, #2fbf71); border: 1px solid rgba(47, 191, 113, .3);
}
.pj-board-epsum {
    margin: 0; font-size: 12px; color: var(--text-3); line-height: 1.7;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
    min-height: 80px;
}
.pj-board-ep .pj-ep-ops { margin-top: auto; flex-wrap: wrap; }
.pj-board-ep .pj-ep-ops .btn { flex: 1 1 auto; white-space: nowrap; }

/* 分镜完成横幅 */
.pj-done-banner {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    border: 1px solid rgba(124, 92, 255, .35); border-radius: 12px;
    background: linear-gradient(90deg, rgba(124, 92, 255, .14), rgba(124, 92, 255, .04));
    padding: 10px 14px; margin-bottom: 12px;
}
.pj-done-info { display: flex; align-items: center; gap: 9px; font-size: 12.5px; }
.pj-done-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--a-ok, #2fbf71); box-shadow: 0 0 0 3px rgba(47, 191, 113, .18); }
.pj-done-ops { display: flex; gap: 8px; flex: 0 0 auto; }

/* 绿色渐变主按钮（分镜已完成 / 进工作台） */
.btn-happy {
    background: linear-gradient(135deg, #2fd98a, #14b8c4) !important;
    border: none !important; color: #05221a !important; font-weight: 600;
}
.btn-happy:hover { filter: brightness(1.08); }

/* 头部任务队列按钮 + 浮窗 */
.pj-head-ops { display: flex; align-items: center; gap: 10px; }
.st-queue-btn {
    display: inline-flex; align-items: center; gap: 6px;
    height: 32px; padding: 0 12px; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--border); background: var(--panel-3); color: var(--text-2);
    font-size: 12px; position: relative;
}
.st-queue-btn:hover { border-color: var(--accent-line); color: var(--text); }
.st-queue-badge {
    min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #e5484d; color: #fff; font-size: 10px; font-weight: 700; font-style: normal;
}
.st-queue-pop {
    position: fixed; top: 118px; right: 18px; z-index: 260;
    width: min(440px, calc(100vw - 36px)); max-height: min(64vh, 560px);
    display: flex; flex-direction: column;
    background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .35);
    overflow: hidden;
}
.st-queue-pop[hidden] { display: none; }
.st-queue-pop-head {
    flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
    padding: 12px 14px; border-bottom: 1px solid var(--border);
}
.st-queue-pop-head b { font-size: 13px; }
.st-queue-pop-head .queue-sub { flex: 1 1 auto; font-size: 11.5px; color: var(--text-3); }
.st-queue-close {
    flex: 0 0 auto; width: 24px; height: 24px; border-radius: 7px; cursor: pointer;
    border: none; background: transparent; color: var(--text-3); font-size: 12px;
}
.st-queue-close:hover { background: var(--panel-3); color: var(--text); }
.st-queue-pop .queue-list { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; scrollbar-width: thin; padding: 10px 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.st-queue-pop .queue-item { border: 1px solid var(--border-soft); border-radius: 10px; }
.st-queue-pop .queue-item:last-child { border-bottom: 1px solid var(--border-soft); }

/* 队列浮窗：统计 / 筛选 / 清除 */
.st-queue-stats {
    flex: 0 0 auto; padding: 10px 14px 0;
    font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums;
}
.st-queue-filters { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 14px 0; }
.st-queue-filters button {
    display: inline-flex; align-items: center; gap: 4px;
    height: 24px; padding: 0 10px; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--border); background: var(--panel-3); color: var(--text-2); font-size: 11.5px;
}
.st-queue-filters button i { font-style: normal; font-size: 10px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.st-queue-filters button:hover { border-color: var(--accent-line); color: var(--text); }
.st-queue-filters button.is-on {
    background: var(--accent); border-color: var(--accent-line); color: #fff; font-weight: 600;
}
.st-queue-filters button.is-on i { color: rgba(255, 255, 255, .8); }
.st-queue-ops { flex: 0 0 auto; padding: 10px 14px 2px; }
.st-queue-clear {
    display: inline-flex; align-items: center; gap: 5px;
    height: 26px; padding: 0 10px; border-radius: 8px; cursor: pointer;
    border: 1px solid var(--border); background: transparent; color: var(--text-3); font-size: 11.5px;
}
.st-queue-clear:hover { color: var(--text); border-color: var(--accent-line); }
.st-queue-clear:disabled { opacity: .5; cursor: default; }

/* 入队动画：新任务跳进队列 */
.st-queue-pop.is-jump { animation: stQueueJump .55s cubic-bezier(.2, .9, .3, 1.15); }
@keyframes stQueueJump {
    from { transform: translateY(26px) scale(.94); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}
.queue-item.is-new { animation: stQueueItemIn .6s ease; border-color: var(--accent-line) !important; }
@keyframes stQueueItemIn {
    0% { transform: translateX(28px); opacity: 0; }
    60% { transform: translateX(-4px); }
    100% { transform: translateX(0); opacity: 1; }
}

/* 队列卡片美化（对齐本镜素材卡片质感） */
.st-queue-pop .queue-item {
    border: 1px solid var(--border); border-radius: 12px;
    background: var(--panel-2); padding: 10px 12px 11px;
    transition: border-color .15s, transform .15s, box-shadow .15s;
}
.st-queue-pop .queue-item:hover {
    border-color: var(--accent-line);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
}
.st-queue-pop .queue-item.is-active {
    border-color: var(--accent-line); background: var(--accent-soft); box-shadow: none;
}
.st-queue-pop .queue-item:last-child { border-bottom: 1px solid var(--border); }
.st-queue-pop .queue-bar { border-radius: 999px; overflow: hidden; }
.st-queue-pop .queue-bar i.is-run { background: linear-gradient(90deg, #7c5cff, #b06bff); }

.pj-boarddlg-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 4px 0 8px; }
.pj-boarddlg-stats > div {
    border: 1px solid var(--border); border-radius: 10px;
    background: var(--panel-3); padding: 8px 10px;
}
.pj-boarddlg-stats b { display: block; font-size: 14px; }
.pj-boarddlg-stats em { font-style: normal; font-size: 10px; color: var(--text-3); }

/* 步骤底部导航：上一步 / 下一步 */
.pj-flow-foot {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 14px; padding: 10px 14px;
    background: var(--panel-2); border: 1px solid var(--border); border-radius: 14px;
    position: sticky; bottom: 10px; z-index: 4;
}
.pj-flow-foot .btn { min-width: 150px; }
.pj-sec-badge {
    margin-left: auto; font-size: 12px; color: var(--accent);
    border: 1px solid var(--accent-line); border-radius: 8px; padding: 1px 8px;
}
.pj-board-list { display: flex; flex-direction: column; gap: 10px; }
.pj-board-card {
    border: 1px solid var(--border); border-radius: 12px;
    background: var(--panel-3); padding: 11px 13px;
    display: flex; flex-direction: column; gap: 9px;
}
.pj-board-card-head { display: flex; align-items: center; gap: 9px; }
.pj-board-card-head b { font-size: 12.5px; }
.pj-board-card-head em { font-style: normal; font-size: 11.5px; color: var(--accent); flex: 1; }
.pj-board-card-head span { font-size: 11px; color: var(--text-3); }
.pj-board-card-body { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 12px; }
.pj-board-card-body label, .pj-video-prompts label {
    display: flex; flex-direction: column; gap: 3px;
    font-size: 11px; color: var(--text-3);
}
.pj-board-card-body input, .pj-video-prompts input, .pj-video-prompts textarea {
    height: 30px; border-radius: 8px; border: 1px solid var(--border);
    background: var(--panel); color: var(--text); padding: 0 9px; font-size: 12px; outline: none; width: 100%;
}
.pj-video-prompts textarea {
    height: auto; padding: 7px 9px; line-height: 1.65; resize: vertical; font-family: inherit;
}
.pj-board-card-body textarea {
    height: auto; border-radius: 8px; border: 1px solid var(--border);
    background: var(--panel); color: var(--text); padding: 6px 9px;
    font-size: 12px; line-height: 1.65; outline: none; resize: vertical; font-family: inherit; width: 100%;
}
.pj-board-card-body input:focus, .pj-board-card-body textarea:focus,
.pj-video-prompts input:focus, .pj-video-prompts textarea:focus { border-color: var(--accent-line); }
.pj-board-inline { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pj-board-img { max-width: 280px; border-radius: 9px; border: 1px solid var(--border); }
.pj-range-marks { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--text-3); margin-top: -6px; }
input[type="range"] { width: 100%; accent-color: #7c5cff; }

/* 生成进度弹窗 */
.pj-progress-dlg { width: 560px; }
.pj-progress-tag { font-size: 10.5px; letter-spacing: 2px; color: var(--accent); font-weight: 700; }
.pj-progress-dlg h3 { margin: 4px 0 2px; font-size: 18px; }
.pj-progress-sub { margin: 0 0 6px; font-size: 12px; color: var(--text-3); }
.pj-progress-tip {
    margin: 0 0 12px; font-size: 12.5px; color: var(--accent);
    animation: pjtip 2.6s ease-in-out infinite;
}
@keyframes pjtip {
    0%, 100% { opacity: .55; }
    50% { opacity: 1; }
}
.pj-progress-bar {
    height: 8px; border-radius: 6px; overflow: hidden;
    background: var(--panel-3); border: 1px solid var(--border);
}
.pj-progress-bar i {
    display: block; height: 100%; width: 40%; border-radius: 6px;
    background: linear-gradient(90deg, #7c5cff, #38b6ff);
    animation: pjbar 1.4s ease-in-out infinite;
}
@keyframes pjbar {
    0% { margin-left: -40%; }
    100% { margin-left: 100%; }
}
.pj-progress-stats { display: flex; gap: 8px; margin-top: 10px; font-size: 12px; color: var(--text-3); }
.pj-progress-stats b { color: var(--accent); }
.pj-progress-stats .pj-progress-tick { margin-left: auto; font-style: normal; font-variant-numeric: tabular-nums; }
.pj-progress-out { margin-top: 8px; font-size: 12px; color: var(--text-2); white-space: pre-wrap; }

/* ============ 资产生图工具条 / 勾选 / 画廊 / 声音 ============ */
.pj-asset-tools {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px;
    padding: 10px 12px; margin-bottom: 12px;
    border: 1px solid var(--border); border-radius: 12px; background: var(--panel-3);
}
.pj-asset-tools label { display: flex; flex-direction: column; gap: 5px; font-size: 11.5px; color: var(--text-3); }
.pj-asset-tools select {
    height: 36px; border-radius: 10px; border: 1px solid var(--border);
    background: var(--panel-2); color: var(--text); padding: 0 10px; font-size: 12.5px; outline: none;
}
.pj-asset-tools select:focus { border-color: var(--accent-line); }
.pj-asset-tools .pj-asset-tools-gap { flex: 1; }

/* 配音管理：语音模型选择浮层（单列选项卡 + 问号悬浮说明） */
.dub-model-opt {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; margin-bottom: 8px;
    border: 1px solid var(--border); border-radius: 10px; background: var(--panel-2);
    cursor: pointer; transition: border-color .15s ease;
}
.dub-model-opt:hover { border-color: var(--accent-line); }
.dub-model-opt:has(input:checked) { border-color: var(--accent); background: var(--panel-3); }
.dub-model-opt input[type="radio"] { flex: none; width: 15px; height: 15px; accent-color: var(--accent); }
.dub-model-opt .dub-model-name {
    flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 12.5px; color: var(--text);
}
.dub-model-opt .dub-model-price { flex: none; font-size: 11.5px; font-style: normal; color: var(--text-3); }
.dub-model-opt .dub-model-tip {
    flex: none; width: 16px; height: 16px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--border); color: var(--text-3);
    font-size: 10.5px; line-height: 1; cursor: help; position: relative; user-select: none;
}
.dub-model-opt .dub-model-tip:hover { color: var(--text); border-color: var(--text-3); }
/* 问号悬浮说明（悬停 / 键盘聚焦时显示在右侧，窄屏自动收进视口） */
.dub-model-opt .dub-model-tip::after {
    content: attr(data-tip);
    position: absolute; left: 50%; top: 50%; transform: translateY(-50%) translateX(12px);
    width: max-content; max-width: 280px; white-space: pre-line;
    padding: 8px 10px; border-radius: 8px;
    background: var(--panel-3); border: 1px solid var(--border);
    color: var(--text); font-size: 11.5px; line-height: 1.55; text-align: left;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
    opacity: 0; visibility: hidden; pointer-events: none; z-index: 30;
    transition: opacity .12s ease;
}
.dub-model-opt .dub-model-tip:hover::after,
.dub-model-opt .dub-model-tip:focus::after { opacity: 1; visibility: visible; }
/* 浮层里最后一行选项的提示气泡翻到左侧，避免溢出窗口 */
#dubModelList .dub-model-opt:nth-last-child(-n + 3) .dub-model-tip::after {
    left: auto; right: 50%; transform: translateY(-50%) translateX(-12px);
}

/* 配音模型浮层：参考音频选择 / 上传区（AutoDL TTS 工作流） */
.dub-ref {
    margin-top: 4px; padding: 10px 12px;
    border: 1px dashed var(--border); border-radius: 10px; background: var(--panel-2);
}
.dub-ref-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.dub-ref-head b { font-size: 12.5px; color: var(--text); }
.dub-ref-head span { font-size: 11px; color: var(--text-3); line-height: 1.5; }
.dub-ref-row { display: flex; align-items: center; gap: 8px; }
.dub-ref-sel {
    flex: 1; min-width: 0; height: 30px; padding: 0 8px;
    border: 1px solid var(--border); border-radius: 8px;
    background: var(--panel); color: var(--text); font-size: 12px;
}
.dub-ref-sel:focus { border-color: var(--accent-line); outline: none; }
.dub-ref-prev { width: 100%; height: 30px; margin-top: 8px; }
.dub-ref-prev[hidden] { display: none; }

/* 场景 / 物品分组自带的生图工具行 */
.pj-gtools {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px;
    padding: 8px 12px; margin: 0 0 10px;
    border: 1px dashed var(--border); border-radius: 10px; background: var(--panel-3);
}
.pj-gtools label { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: var(--text-3); }
.pj-gtools select {
    height: 32px; border-radius: 9px; border: 1px solid var(--border);
    background: var(--panel-2); color: var(--text); padding: 0 8px; font-size: 12px; outline: none;
}
.pj-gtools select:focus { border-color: var(--accent-line); }
.pj-gtools .btn { height: 32px; }

.pj-asel { position: absolute; top: 10px; right: 10px; display: inline-flex; cursor: pointer; z-index: 2; }
.pj-asel input { position: absolute; opacity: 0; pointer-events: none; }
.pj-asel span {
    width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid var(--border);
    background: var(--panel-2); display: inline-block; position: relative; transition: all .15s;
}
.pj-asel input:checked + span { background: linear-gradient(135deg, #7c5cff, #b06bff); border-color: transparent; }
.pj-asel input:checked + span::after {
    content: '✓'; position: absolute; inset: 0; display: grid; place-items: center;
    color: #fff; font-size: 11px; font-weight: 700;
}
.pj-asset-card { position: relative; }
.pj-asset-card.is-sel { border-color: var(--accent-line); box-shadow: 0 0 0 1px var(--accent-line); }

.pj-asset-gallery { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pj-asset-gthumb {
    position: relative; width: 64px; height: 64px; border-radius: 8px; overflow: hidden;
    border: 1px solid var(--border); background: var(--panel-3);
}
.pj-asset-gthumb img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }

/* 资产图悬浮操作条：放大 / 编辑 / 重新生成 / 删除 */
.pj-aimg-ops {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    display: flex; gap: 5px; justify-content: center; padding: 6px 4px;
    background: linear-gradient(to top, rgba(6, 8, 14, .78), rgba(6, 8, 14, .28) 62%, transparent);
    opacity: 0; transform: translateY(6px); transition: opacity .16s ease, transform .16s ease;
    pointer-events: none;
}
.pj-asset-face:hover .pj-aimg-ops,
.pj-asset-face:focus-within .pj-aimg-ops,
.pj-asset-gthumb:hover .pj-aimg-ops,
.pj-asset-gthumb:focus-within .pj-aimg-ops { opacity: 1; transform: none; pointer-events: auto; }
.pj-aimg-op {
    width: 26px; height: 26px; padding: 0; border-radius: 8px; cursor: pointer;
    display: grid; place-items: center;
    border: 1px solid rgba(255, 255, 255, .3);
    background: rgba(18, 20, 28, .62); color: #f2f3f8;
    backdrop-filter: blur(4px); transition: background .14s, border-color .14s, transform .14s;
}
.pj-aimg-op:hover { background: rgba(124, 92, 255, .9); border-color: transparent; transform: translateY(-1px); }
.pj-aimg-op.is-danger:hover { background: rgba(224, 74, 90, .92); }
.pj-aimg-ops.is-mini { gap: 3px; padding: 4px 2px; }
.pj-aimg-ops.is-mini .pj-aimg-op { width: 18px; height: 18px; border-radius: 6px; }
.pj-aimg-ops.is-mini .pj-aimg-op svg { width: 10px; height: 10px; }
.pj-aimg-ops.is-mini .pj-aimg-op[data-aszoom] { display: none; }
/* 触屏设备没有 hover：操作条常显，保证可点 */
@media (hover: none) {
    .pj-aimg-ops { opacity: .95; transform: none; pointer-events: auto; }
}

/* 悬停浮出的大图预览 */
.pj-img-peek {
    position: fixed; z-index: 9400; pointer-events: none;
    width: 300px; height: 300px; padding: 5px; border-radius: 14px;
    background: rgba(16, 18, 26, .92); border: 1px solid var(--border);
    box-shadow: 0 20px 48px rgba(0, 0, 0, .46); backdrop-filter: blur(6px);
    animation: pjPeekIn .14s ease-out;
}
.pj-img-peek[hidden] { display: none; }
.pj-img-peek img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 10px; background: #0b0d14; }
@keyframes pjPeekIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }

/* 资产图全屏查看 */
.pj-imgviewer {
    position: fixed; inset: 0; z-index: 9600;
    display: flex; align-items: center; justify-content: center;
    background: rgba(8, 10, 16, .84); backdrop-filter: blur(8px);
    animation: cvLbIn .16s ease-out;
}
.pj-imgviewer[hidden] { display: none; }
.pj-iv-body {
    margin: 0; max-width: min(84vw, 880px); max-height: 92%;
    display: flex; flex-direction: column; border-radius: 14px; overflow: auto;
    background: var(--panel); border: 1px solid color-mix(in srgb, #fff 12%, transparent);
    box-shadow: 0 24px 80px rgba(0, 0, 0, .5);
}
.pj-iv-body img { display: block; max-width: 100%; max-height: 70vh; object-fit: contain; background: #0c0e15; cursor: zoom-out; margin: 0 auto; }
.pj-iv-cap { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 14px; font-size: 12px; color: var(--text-2); }
.pj-iv-dl { color: var(--accent); text-decoration: none; }
.pj-iv-dl:hover { text-decoration: underline; }
.pj-iv-close {
    position: absolute; top: 20px; right: 22px; width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .18); background: rgba(20, 22, 30, .7); color: #fff;
    font-size: 15px; cursor: pointer;
}

/* 单图编辑弹窗 */
.pj-imgedit-dlg { width: 780px; max-width: 94vw; max-height: 92%; overflow: auto; }
.pj-imgedit-body { display: grid; grid-template-columns: 296px 1fr; gap: 16px; align-items: start; }
@media (max-width: 820px) { .pj-imgedit-body { grid-template-columns: 1fr; } }
.pj-imgedit-pic {
    margin: 0; border-radius: 12px; overflow: hidden;
    background: var(--panel-3); border: 1px solid var(--border); cursor: zoom-in;
}
.pj-imgedit-pic img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: #0b0d14; }
.pj-imgedit-pic figcaption { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; font-size: 11px; color: var(--text-3); }
.pj-imgedit-zoom { border: 0; background: none; color: var(--accent); font-size: 11px; cursor: pointer; padding: 0; }
.pj-imgedit-form { display: flex; flex-direction: column; gap: 6px; }
.pj-imgedit-form input[type="text"] { height: 32px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel); color: var(--text); padding: 0 9px; font-size: 12px; }
.pj-imgedit-form textarea { border-radius: 8px; border: 1px solid var(--border); background: var(--panel); color: var(--text); padding: 8px 9px; font-size: 12px; resize: vertical; }
.pj-imgedit-form select { height: 32px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel); color: var(--text); padding: 0 8px; font-size: 12px; }
.pj-imgedit-btns { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pj-imgedit-gap { flex: 1; }
.pj-imgedit-del { color: #e46a7c; border-color: rgba(228, 106, 124, .42); }
.pj-imgedit-del:hover { background: rgba(228, 106, 124, .14); }

.pj-asset-voice { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.pj-asset-voice em { font-size: 10.5px; color: var(--text-3); font-style: normal; }
.pj-asset-voice.is-on em { color: var(--accent); }
.pj-asset-voice audio { height: 28px; max-width: 150px; }

/* 资产风格设置弹窗 */
.pj-assetstyle-dlg { width: 620px; max-height: 86vh; overflow: auto; }
.pj-astyle-tabs { margin-bottom: 10px; }
.pj-astyle-body { display: flex; flex-direction: column; gap: 8px; }
.pj-astyle-refs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pj-astyle-ref {
    position: relative; aspect-ratio: 3/4; border: 1.5px dashed var(--border); border-radius: 10px;
    display: grid; place-items: center; cursor: pointer; overflow: hidden;
    font-size: 11px; color: var(--text-3); text-align: center; padding: 4px;
}
.pj-astyle-ref.is-fill { border-style: solid; cursor: default; }
.pj-astyle-ref img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .8; }
.pj-astyle-ref span { position: relative; z-index: 1; text-shadow: 0 1px 4px rgba(0,0,0,.8); }
.pj-astyle-refdel {
    position: absolute; top: 4px; right: 4px; z-index: 2; width: 18px; height: 18px;
    border-radius: 50%; border: none; background: rgba(0,0,0,.65); color: #fff;
    font-size: 11px; cursor: pointer; line-height: 1;
}

/* 参考图选择弹窗 */
.pj-refpick-dlg { width: 640px; max-height: 80vh; overflow: auto; }
.pj-refpick-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; max-height: 52vh; overflow: auto; }
.pj-refpick-item {
    border: 1px solid var(--border); border-radius: 10px; background: var(--panel-3);
    padding: 0 0 4px; cursor: pointer; overflow: hidden; font-size: 10.5px; color: var(--text-3);
}
.pj-refpick-item img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.pj-refpick-item span { display: block; padding: 4px 5px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pj-refpick-item:hover { border-color: var(--accent-line); }
.pj-refpick-video {
    display: flex; align-items: center; justify-content: center; text-align: center;
    width: 100%; aspect-ratio: 1; font-size: 10px; line-height: 1.4;
    color: var(--text-3); background: var(--panel-4, rgba(255, 255, 255, .04));
}

/* 资产声音弹窗 */
.pj-voice-dlg { width: 560px; max-height: 86vh; overflow: auto; }
.pj-voice-now {
    display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin-bottom: 8px;
    border: 1px solid var(--border); border-radius: 10px; background: var(--panel-3); font-size: 12px;
}
.pj-voice-now em { font-style: normal; color: var(--accent); font-size: 11.5px; }
.pj-voice-now em.is-none { color: var(--text-3); }
.pj-voice-now audio { height: 30px; flex: 1; max-width: 320px; }
.pj-voice-div { display: flex; align-items: center; gap: 10px; margin: 14px 0 8px; color: var(--text-3); font-size: 11px; }
.pj-voice-div::before, .pj-voice-div::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.pj-voice-lib { display: flex; flex-direction: column; gap: 6px; max-height: 240px; overflow: auto; }
.pj-voice-item {
    display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px;
    padding: 6px 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel-3);
    font-size: 12px;
}
.pj-voice-item b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pj-voice-item audio { height: 28px; width: 170px; }

/* 审阅全屏浮窗 */
.pj-review {
    position: absolute; inset: 0; z-index: 30;
    background: var(--panel);
    display: flex; flex-direction: column;
    border-radius: inherit;
}
.pj-review-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 16px 22px; border-bottom: 1px solid var(--border);
}
.pj-review-head h3 { margin: 2px 0 0; font-size: 18px; }
.pj-review-ops { display: flex; align-items: center; gap: 8px; }
.pj-review-close {
    width: 32px; height: 32px; border-radius: 50%;
    border: 1px solid var(--border); background: transparent;
    color: var(--text-2); cursor: pointer; font-size: 13px;
}
.pj-review-close:hover { color: var(--text); border-color: var(--accent-line); }
.pj-review-text {
    flex: 1; min-height: 0; resize: none;
    border: 0; outline: none; background: transparent; color: var(--text);
    padding: 22px 26px; font-size: 16.5px; line-height: 2.1;
    font-family: inherit;
}

/* 生成视频工作台 */
.pj-video-top { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.pj-video-tabs { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pj-video-tabs button {
    height: 32px; padding: 0 16px; border-radius: 17px;
    border: 1px solid var(--border); background: transparent;
    color: var(--text-2); font-size: 12.5px; cursor: pointer;
}
.pj-video-tabs button.is-on {
    color: #fff; border-color: transparent;
    background: linear-gradient(135deg, #2fb5a3, #38b6ff); font-weight: 600;
}
.pj-video-params { display: flex; gap: 18px; font-size: 12px; color: var(--text-3); flex-wrap: wrap; }
.pj-video-params b { color: var(--text); margin-left: 5px; }
.pj-video-row {
    border: 1px solid var(--border); border-radius: 14px;
    background: var(--panel-2); padding: 12px 14px; margin-bottom: 12px;
}
.pj-video-row-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.pj-video-row-head b { font-size: 13px; }
.pj-video-row-head span { font-size: 11.5px; color: var(--accent); flex: 1; }
.pj-video-row-head em { font-style: normal; font-size: 11.5px; color: var(--text-3); }
.pj-video-row-body { display: grid; grid-template-columns: 230px 1fr 190px; gap: 14px; }
.pj-video-media { display: flex; flex-direction: column; gap: 8px; }
.pj-video-tabs2 { display: flex; gap: 6px; }
.pj-video-tabs2 button {
    flex: 1; height: 28px; border-radius: 8px; font-size: 11.5px;
    border: 1px solid var(--border); background: transparent; color: var(--text-2); cursor: pointer;
}
.pj-video-tabs2 button.is-on { color: #fff; border-color: transparent; background: var(--accent); }
.pj-video-canvas {
    height: 128px; border-radius: 10px; display: grid; place-items: center;
    font-size: 11.5px; color: var(--text-3); overflow: hidden;
    background: var(--panel-3); border: 1px dashed var(--border);
}
.pj-video-canvas img { width: 100%; height: 100%; object-fit: cover; }
.pj-video-prompts { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.pj-chipline {
    font-style: normal; font-weight: 400; font-size: 11.5px; color: var(--text-2);
    background: var(--panel-3); border: 1px solid var(--border);
    border-radius: 8px; padding: 5px 9px; line-height: 1.6;
}
.pj-video-prompts blockquote {
    margin: 0; font-size: 11.5px; line-height: 1.7; color: var(--text-2);
    border-left: 2px solid var(--accent-line); padding: 4px 10px;
    background: var(--panel-3); border-radius: 0 8px 8px 0;
    max-height: 90px; overflow: auto; white-space: pre-wrap;
}
.pj-video-params2 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pj-video-params2 label { display: flex; flex-direction: column; gap: 3px; font-size: 10.5px; color: var(--text-3); }
.pj-video-params2 select {
    height: 28px; border-radius: 8px; border: 1px solid var(--border);
    background: var(--panel-3); color: var(--text); font-size: 11.5px; padding: 0 7px; outline: none;
}
.pj-video-assets { display: flex; flex-direction: column; gap: 6px; font-size: 11px; color: var(--text-3); }
.pj-video-assets > b { font-size: 11.5px; color: var(--text-2); }

@media (max-width: 900px) {
    .pj-tpl-row { grid-template-columns: 1fr 1fr; }
    .pj-ideas-wrap { grid-template-columns: 1fr; }
    .pj-params, .pj-boarddlg-stats { grid-template-columns: 1fr 1fr; }
    .pj-ep-grid { grid-template-columns: repeat(5, 1fr); }
    .pj-board-card-body { grid-template-columns: 1fr; }
    .pj-video-row-body { grid-template-columns: 1fr; }
}

/* 剧本模式输入框真正撑满窗口（视图容器 flex 列） */
.pj-work { height: 100%; display: flex; flex-direction: column; min-height: 0; }
#pjViewMode { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 16px; }
.pj-pane-fill { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.pj-pane-fill .pj-script.is-fill { flex: 1; min-height: 220px; }

/* 模型管理：平台通道多模型序号 */
.mm-plat-idx { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; margin-left: 5px; border-radius: 50%; background: var(--accent, #7c5cff); color: #fff; font-size: 10px; font-style: normal; vertical-align: 1px; }

/* ---------------- 封面制作：类型 / 剧名 / 比例 / 成品卡（第36轮） ---------------- */
.cv-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cv-col { display: flex; flex-direction: column; gap: 6px; }
.cv-row .cv-col > span { font-weight: 600; display: flex; align-items: center; gap: 8px; color: var(--text-2); }
.cv-row .cv-col > span em { font-style: normal; font-weight: 400; font-size: 11px; color: var(--text-3); }
.cv-select {
    width: 100%;
    border-radius: 9px; border: 1px solid var(--border);
    background: var(--panel-3); color: var(--text);
    padding: 8px 11px; font-size: 12.5px; font-family: inherit; outline: none;
}
.cv-select:focus { border-color: var(--accent-line); }
.cv-seg {
    display: inline-flex; padding: 3px; gap: 2px;
    border-radius: 10px; border: 1px solid var(--border-soft);
    background: color-mix(in srgb, var(--panel-2) 65%, transparent);
}
.cv-seg button {
    flex: 1 1 0; height: 28px; padding: 0 10px;
    border: 0; border-radius: 8px; background: transparent;
    color: var(--text-2); font-size: 12px; font-family: inherit; cursor: pointer;
    transition: background .14s, color .14s;
}
.cv-seg button:hover { color: var(--text); }
.cv-seg button.is-on { background: var(--accent); color: #fff; font-weight: 600; }

.cv-ratios { display: flex; flex-wrap: wrap; gap: 8px; }
.cv-ratio {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    min-width: 128px; padding: 7px 12px;
    border-radius: 10px; border: 1px solid var(--border-soft);
    background: color-mix(in srgb, var(--panel-2) 60%, transparent);
    color: var(--text-2); cursor: pointer;
    transition: border-color .14s, background .14s;
}
.cv-ratio b { font-size: 13px; color: var(--text); }
.cv-ratio span { font-size: 10.5px; color: var(--text-3); }
.cv-ratio:hover { border-color: var(--text-3); }
.cv-ratio.is-on {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.cv-ratio.is-on b { color: var(--accent); }

/* 成品卡片：图 + 元信息 + 下载 */
.cv-cover { position: relative; display: flex; flex-direction: column; }
.cv-cover figcaption.cv-meta {
    display: grid; grid-template-columns: 1fr 1fr; gap: 3px 12px;
    padding: 9px 11px 10px;
    border-top: 1px solid var(--border-soft);
}
.cv-meta > div { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; min-width: 0; font-size: 11px; }
.cv-meta span { color: var(--text-3); flex: 0 0 auto; }
.cv-meta b { color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-meta .cv-meta-model { grid-column: 1 / -1; padding-top: 4px; border-top: 1px dashed color-mix(in srgb, var(--border-soft) 80%, transparent); }
.cv-meta .cv-meta-model b { max-width: 72%; text-align: right; }
.cv-dl {
    position: absolute; top: 8px; right: 8px;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 10px; border-radius: 999px;
    background: rgba(12, 14, 22, .58); color: #fff;
    font-size: 11.5px; font-weight: 600; text-decoration: none;
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, .22);
    transition: background .14s, transform .14s;
}
.cv-dl:hover { background: var(--accent); border-color: transparent; transform: translateY(-1px); }

/* 生成中：幽默提示 */
.cv-loading-text {
    margin: 0; color: var(--text-2); font-size: 12.5px;
    letter-spacing: .3px;
    animation: cvPulse 2.2s ease-in-out infinite;
}
.cv-loading-model { font-style: normal; font-size: 10.5px; color: var(--text-3); }
@keyframes cvPulse { 0%, 100% { opacity: .58; } 50% { opacity: 1; } }

/* ---------------- 封面制作：制作记录 / 放大浮窗（第37轮） ---------------- */
.cv-hist-wrap { margin-top: 14px; }
.cv-results-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cv-results-head em { font-style: normal; }
.cv-hist-tools { display: inline-flex; align-items: center; gap: 10px; }
.cv-hist-all { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text-2); cursor: pointer; }
.cv-hist-all input { accent-color: var(--accent); cursor: pointer; }
.cv-hist-del {
    height: 24px; padding: 0 10px; border-radius: 8px;
    border: 1px solid color-mix(in srgb, #e5484d 55%, transparent);
    background: color-mix(in srgb, #e5484d 12%, transparent);
    color: #ff7b81; font-size: 11.5px; font-family: inherit; cursor: pointer;
    transition: background .14s;
}
.cv-hist-del:hover { background: color-mix(in srgb, #e5484d 26%, transparent); }

.cv-hist { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.cv-hist-item {
    border: 1px solid var(--border-soft); border-radius: 12px;
    background: color-mix(in srgb, var(--panel-2) 45%, transparent);
    padding: 9px 11px 10px;
}
.cv-hist-head { display: flex; align-items: center; gap: 8px; min-width: 0; margin-bottom: 8px; }
.cv-hist-head input[type="checkbox"] { accent-color: var(--accent); cursor: pointer; flex: 0 0 auto; }
.cv-hist-name { font-size: 12.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-hist-meta { font-size: 10.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; }
.cv-hist-st { flex: 0 0 auto; font-style: normal; font-size: 10px; padding: 1px 7px; border-radius: 999px; }
.cv-hist-st.is-ok { color: #58d68d; background: color-mix(in srgb, #58d68d 14%, transparent); }
.cv-hist-st.is-run { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.cv-hist-st.is-bad { color: #ff7b81; background: color-mix(in srgb, #e5484d 14%, transparent); }
.cv-hist-one {
    flex: 0 0 auto; height: 22px; padding: 0 9px; border-radius: 7px;
    border: 1px solid var(--border-soft); background: transparent;
    color: var(--text-2); font-size: 11px; font-family: inherit; cursor: pointer;
    transition: color .14s, border-color .14s;
}
.cv-hist-one:hover { color: #ff7b81; border-color: color-mix(in srgb, #e5484d 55%, transparent); }
.cv-hist-thumbs { display: flex; flex-wrap: wrap; gap: 10px; }
.cv-hist-thumb {
    width: 84px; margin: 0; cursor: zoom-in;
    border-radius: 9px; overflow: hidden;
    border: 1px solid var(--border-soft);
    transition: transform .14s, border-color .14s;
}
.cv-hist-thumb img { display: block; width: 100%; height: auto; object-fit: contain; }
.cv-hist-thumb figcaption { font-size: 10px; color: var(--text-3); text-align: center; padding: 3px 0 4px; }
.cv-hist-thumb:hover { transform: translateY(-2px); border-color: var(--accent-line); }
.cv-hist-noimg { margin: 0; font-size: 11px; color: var(--text-3); }

/* 生成结果的封面也可点击放大 */
.cv-grid .cv-cover:not(.is-loading) img { cursor: zoom-in; }

/* 放大浮窗 */
.cv-lightbox {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    background: rgba(8, 10, 16, .78); backdrop-filter: blur(8px);
    animation: cvLbIn .18s ease-out;
}
.cv-lightbox[hidden] { display: none; }
@keyframes cvLbIn { from { opacity: 0; } to { opacity: 1; } }
.cv-lb-body {
    margin: 0; max-width: min(76vw, 760px); max-height: 88vh;
    display: flex; flex-direction: column;
    border-radius: 14px; overflow: hidden;
    background: var(--panel, #141826);
    border: 1px solid color-mix(in srgb, #fff 12%, transparent);
    box-shadow: 0 24px 80px rgba(0, 0, 0, .5);
}
.cv-lb-body img { display: block; max-width: 100%; max-height: 74vh; object-fit: contain; background: #0c0e15; }
.cv-lb-cap {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 9px 14px; font-size: 12px; color: var(--text-2);
}
.cv-lb-cap span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-lb-cap .cv-dl { position: static; }
.cv-lb-close {
    position: absolute; top: 18px; right: 22px;
    width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .08);
    color: #fff; font-size: 20px; line-height: 1; cursor: pointer;
    transition: background .14s;
}
.cv-lb-close:hover { background: rgba(255, 255, 255, .18); }

/* ---------------- 封面制作第38轮：结果/记录统一样式、素材优化、按钮固定 ---------------- */
/* 制作记录与生成结果同款成品卡：任务分组卡 + 同款 cv-cover 网格 */
.cv-hist-wrap .cv-hist { display: flex; flex-direction: column; gap: 12px; padding: 12px; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.cv-hist-item {
    border: 1px solid var(--border-soft); border-radius: 12px;
    background: color-mix(in srgb, var(--panel-3) 40%, transparent);
    overflow: hidden;
}
.cv-hist-head {
    display: flex; align-items: center; gap: 9px; min-width: 0;
    padding: 9px 13px;
    border-bottom: 1px solid var(--border-soft);
    background: color-mix(in srgb, var(--panel-2) 55%, transparent);
}
.cv-hist-head input[type="checkbox"] { accent-color: var(--accent); cursor: pointer; flex: 0 0 auto; }
.cv-hist-name { font-size: 12.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-hist-meta { font-size: 10.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; }
.cv-hist-st { flex: 0 0 auto; font-style: normal; font-size: 10px; padding: 1px 7px; border-radius: 999px; }
.cv-hist-st.is-ok { color: #58d68d; background: color-mix(in srgb, #58d68d 14%, transparent); }
.cv-hist-st.is-run { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.cv-hist-st.is-bad { color: #ff7b81; background: color-mix(in srgb, #e5484d 14%, transparent); }
.cv-hist-one {
    flex: 0 0 auto; height: 22px; padding: 0 9px; border-radius: 7px;
    border: 1px solid var(--border-soft); background: transparent;
    color: var(--text-2); font-size: 11px; font-family: inherit; cursor: pointer;
    transition: color .14s, border-color .14s;
}
.cv-hist-one:hover { color: #ff7b81; border-color: color-mix(in srgb, #e5484d 55%, transparent); }
.cv-hist-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px; padding: 12px 13px 13px; align-content: start;
}

/* 素材选择：更大更圆润、悬停浮起 + 放大预览按钮 */
.cv-assets { grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 10px; border-radius: 12px; }
@media (min-width: 1200px) { .cv-assets { grid-template-columns: repeat(5, 1fr); } }
.cv-asset { border-radius: 10px; transition: transform .15s, border-color .15s, box-shadow .15s; }
.cv-asset:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0, 0, 0, .28); }
.cv-zoom {
    position: absolute; top: 6px; left: 6px;
    width: 24px; height: 24px;
    display: grid; place-items: center;
    border-radius: 999px;
    background: rgba(10, 12, 18, .62); color: #fff;
    backdrop-filter: blur(4px);
    opacity: 0; cursor: zoom-in;
    transition: opacity .15s, transform .15s;
}
.cv-asset:hover .cv-zoom { opacity: 1; }
.cv-zoom:hover { transform: scale(1.12); background: var(--accent); }

/* 开始生成：固定高度常驻表单底部，不随素材区伸缩 */
.cv-run {
    position: sticky; bottom: 0; z-index: 6;
    flex: 0 0 auto; width: 100%; height: 46px;
    justify-content: center; gap: 6px;
    padding: 0 16px; margin-top: 2px;
    box-shadow: 0 -12px 22px color-mix(in srgb, var(--bg, #0d1017) 62%, transparent);
    border-radius: 12px;
}
.cv-run em { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------------- 封面制作第40轮：布局修复 / 队列 / Vidu 锁定 / 素材中心放大 ---------------- */
/* 右列显式两行：生成结果在上、制作记录在下（第42轮互换）；左表单跨两行 */
.cv-page { grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
.cv-form { grid-column: 1; grid-row: 1 / span 2; }
.cv-results:not(.cv-hist-wrap) { grid-column: 2; grid-row: 1; }
.cv-hist-wrap { grid-column: 2; grid-row: 2; margin-top: 0; overflow: hidden; }
/* 历史任务卡禁止被 flex 压缩（否则记录行被挤成一条条细线） */
.cv-hist-item { flex: 0 0 auto; }

/* Vidu 锁定纯画面：开关组降透明度提示 */
.cv-seg.is-locked button[data-val="1"] { opacity: .45; cursor: not-allowed; }

/* 素材中心：点击缩略图全屏放大 */
#imgZoom {
    position: fixed; inset: 0; z-index: 9500;
    display: flex; align-items: center; justify-content: center;
    background: rgba(8, 10, 16, .8); backdrop-filter: blur(8px);
}
#imgZoom[hidden] { display: none; }
#imgZoom .iz-body {
    margin: 0; max-width: min(78vw, 860px); max-height: 88vh;
    display: flex; flex-direction: column;
    border-radius: 14px; overflow: hidden;
    background: var(--panel, #141826);
    border: 1px solid color-mix(in srgb, #fff 12%, transparent);
    box-shadow: 0 24px 80px rgba(0, 0, 0, .5);
}
#imgZoom img { display: block; max-width: 100%; max-height: 76vh; object-fit: contain; background: #0c0e15; }
#imgZoom figcaption {
    display: flex; align-items: center; justify-content: center;
    padding: 9px 14px; font-size: 12px; color: var(--text-2);
}
#imgZoom figcaption span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#imgZoom .iz-close {
    position: absolute; top: 18px; right: 22px;
    width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .08);
    color: #fff; font-size: 20px; line-height: 1; cursor: pointer;
}
#imgZoom .iz-close:hover { background: rgba(255, 255, 255, .18); }

/* ---------------- 封面制作第42轮：素材区上传按钮 / 结果与记录互换 ---------------- */
.cv-asset-head { display: flex; align-items: center; gap: 8px; }
.cv-asset-head em { margin-left: 0; }
.cv-upload {
    display: inline-flex; align-items: center; gap: 4px;
    margin-left: auto; height: 24px; padding: 0 10px;
    border-radius: 999px; border: 1px solid var(--accent-line);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent); font-size: 11.5px; font-family: inherit; cursor: pointer;
    transition: background .14s, color .14s, transform .14s;
}
.cv-upload:hover { background: var(--accent); color: #fff; transform: translateY(-1px); }
.cv-upload:disabled { opacity: .55; cursor: default; transform: none; }

/* ============================================================
   第53轮：素材浮窗大图 / 预览模式 / 生图按钮 / 滚动条 / 作品卡升级
   ============================================================ */

/* 剧集列表与任务队列滚动条：灰黑细滚动条（标准属性，优先于 webkit 伪元素生效） */
.pj-epside-list,
.st-queue-pop .queue-list,
.st-queue-pop .queue-sub {
    scrollbar-color: rgba(255, 255, 255, .22) transparent;
    scrollbar-width: thin;
}
.pj-epside-list::-webkit-scrollbar,
.st-queue-pop .queue-list::-webkit-scrollbar { width: 8px; height: 8px; }
.pj-epside-list::-webkit-scrollbar-track,
.st-queue-pop .queue-list::-webkit-scrollbar-track { background: transparent; }
.pj-epside-list::-webkit-scrollbar-thumb,
.st-queue-pop .queue-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .22);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: content-box;
}
.pj-epside-list::-webkit-scrollbar-thumb:hover,
.st-queue-pop .queue-list::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, .34);
    background-clip: content-box;
}

/* 素材缩略图挂图兜底：隐藏破图，露出渐变占位 */
.asset-thumb { position: relative; }
.asset-thumb img.is-broken { visibility: hidden; }
.asset-thumb::before {
    content: '';
    position: absolute; inset: 0; z-index: 0;
    background:
        radial-gradient(60px 40px at 30% 25%, rgba(124, 92, 255, .25), transparent 70%),
        linear-gradient(150deg, rgba(124, 92, 255, .12), rgba(47, 181, 163, .08));
}
.asset-thumb > img,
.asset-thumb > span,
.asset-thumb > button { position: relative; z-index: 1; }

/* 本镜素材 hover 大图浮窗 */
#stAssetFloat {
    position: fixed; z-index: 400;
    width: 260px; height: 260px;
    padding: 6px; border-radius: 14px;
    background: var(--panel-2);
    border: 1px solid var(--accent-line);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .45);
    pointer-events: none;
    opacity: 0; transform: scale(.94);
    transition: opacity .12s, transform .12s;
}
#stAssetFloat.is-show { opacity: 1; transform: scale(1); }
#stAssetFloat img {
    width: 100%; height: 100%; object-fit: contain; display: block;
    border-radius: 10px; background: var(--panel-3);
}

/* 预览模式切换（图片 / 视频） */
.pv-mode {
    display: inline-flex; align-items: center; gap: 2px;
    padding: 2px; border-radius: 999px;
    border: 1px solid var(--border); background: var(--panel-3);
}
.pv-mode button {
    height: 22px; padding: 0 10px; border-radius: 999px; border: none; cursor: pointer;
    background: transparent; color: var(--text-3); font-size: 11px;
}
.pv-mode button.is-on { background: var(--accent); color: #fff; font-weight: 600; }
.stage-image { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 10px; }

/* 分镜提示词输入框高度拉满 */
.control-scroll { display: flex; flex-direction: column; }
.field-prompt { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 280px; }
.field-prompt .prompt-wrap { flex: 1 1 auto; display: flex; min-height: 0; }
.field-prompt .prompt-wrap textarea { flex: 1 1 auto; height: 100%; min-height: 220px; }

/* 创意分镜：快捷入口（风格选择 / 资产提取 / 视频生成） */
.pj-pane-head { align-items: center; }
.pj-quick-ops { margin-left: auto; display: flex; gap: 8px; flex: 0 0 auto; }

/* 左上角作品名称：点击编辑 */
.pj-side-name.is-editable { cursor: pointer; transition: border-color .15s; }
.pj-side-name.is-editable:hover { border-color: var(--accent-line); }
.pj-side-name input {
    width: 100%; background: transparent; border: none; outline: none;
    color: var(--text); font-size: 15px; font-weight: 700; padding: 0;
}

/* 开始创作：作品卡 350x300 大封面 */
.pc-grid { grid-template-columns: repeat(auto-fill, minmax(450px, 1fr)); gap: 18px; }
.pc-card { padding: 10px 12px 14px; }
.pc-cover { height: 250px; border-radius: 12px; }
.pc-name { font-size: 14px; }

/* 删除 / 重命名弹窗 + 右键菜单 */
.pc-dialog-sm { width: min(400px, calc(100vw - 40px)); }
.pc-del-name { font-size: 14px; font-weight: 700; margin: 0 0 6px; }
.btn-danger {
    background: var(--danger) !important;
    border-color: transparent !important;
    color: #fff !important;
}
.btn-danger:hover { filter: brightness(1.08); }
.pc-ctx {
    position: fixed; z-index: 500; min-width: 140px;
    padding: 6px; border-radius: 12px;
    background: var(--panel-2); border: 1px solid var(--border);
    box-shadow: 0 14px 38px rgba(0, 0, 0, .4);
    display: flex; flex-direction: column; gap: 2px;
}
.pc-ctx[hidden] { display: none; }
.pc-ctx button {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px; border-radius: 8px; border: none; cursor: pointer;
    background: transparent; color: var(--text-2); font-size: 12.5px; text-align: left;
}
.pc-ctx button:hover { background: var(--hover); color: var(--text); }
.pc-ctx button.is-danger { color: var(--danger); }
.pc-ctx button.is-danger:hover { background: rgba(242, 85, 90, .1); color: var(--danger); }

/* ============================================================
   第55轮：全局导航条 / 挂起后台运行条 / 分镜弹窗模型选择
   ============================================================ */

/* 全局步骤导航条：位于项目头部下方，跨视图可见（创意模式） */
.pj-subtabs-global {
    display: flex; align-items: center; gap: 6px;
    margin: 10px 0 15px; flex-wrap: wrap;
}
.pj-subtabs-global[hidden] { display: none; }

/* 创建分镜弹窗内的模型下拉 */
.pj-dlg select#pjModelBoardDlg {
    width: 100%; height: 36px; padding: 0 10px;
    border-radius: 10px; border: 1px solid var(--border);
    background: var(--panel-3); color: var(--text); font-size: 12.5px;
}

/* 进度弹窗：挂起按钮行 */
.pj-progress-ops { display: flex; justify-content: center; margin-top: 12px; }

/* 挂起后台运行条：固定右上角，多个挂起任务胶囊堆叠 */
.pj-suspend-bar {
    position: fixed; top: 76px; right: 22px; z-index: 320;
    display: flex; flex-direction: column; gap: 8px;
    max-width: 460px;
    animation: pj-suspend-in .25s ease;
}
.pj-suspend-bar[hidden] { display: none; }
@keyframes pj-suspend-in {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}
.pj-suspend-chip {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(30, 24, 62, .96), rgba(18, 20, 38, .96));
    border: 1px solid var(--accent-line);
    box-shadow: 0 14px 38px rgba(0, 0, 0, .45);
    animation: pj-suspend-in .25s ease;
}
.pj-suspend-dot {
    flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 0 rgba(124, 92, 255, .5);
    animation: pj-suspend-pulse 1.4s infinite;
}
@keyframes pj-suspend-pulse {
    0% { box-shadow: 0 0 0 0 rgba(124, 92, 255, .45); }
    70% { box-shadow: 0 0 0 9px rgba(124, 92, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(124, 92, 255, 0); }
}
.pj-suspend-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pj-suspend-text b { font-size: 12.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pj-suspend-text em { font-style: normal; font-size: 11px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px; }
.pj-suspend-chip .btn { flex: 0 0 auto; }

/* ============================================================
   第57轮：任务队列【图/视频】标记 + 取消/删除按钮 + 作品步骤隔离
   ============================================================ */

/* 任务类型标记：图片（黄）/ 视频（青绿），与「镜头几」同款胶囊样式 */
.queue-kind {
    flex: 0 0 auto;
    padding: 1px 7px;
    border-radius: 5px;
    font-size: 10px; line-height: 1.5;
    white-space: nowrap;
    font-weight: 600;
}
.queue-kind.is-img {
    color: #f5b73d;
    background: rgba(245, 183, 61, .12);
    border: 1px solid rgba(245, 183, 61, .38);
}
.queue-kind.is-video {
    color: #2fd6b8;
    background: rgba(47, 214, 184, .12);
    border: 1px solid rgba(47, 214, 184, .38);
}

/* 队列条目操作按钮：加急 / 取消 / 删除 */
.queue-ops { flex: 0 0 auto; display: inline-flex; gap: 4px; }
.q-op {
    height: 20px; padding: 0 8px;
    border-radius: 6px; cursor: pointer;
    border: 1px solid var(--border);
    background: var(--panel-3); color: var(--text-3);
    font-size: 10.5px; line-height: 1;
}
.q-op:hover { border-color: var(--accent-line); color: var(--text); }
.q-op.is-danger:hover { border-color: var(--danger); color: var(--danger); background: rgba(242, 85, 90, .08); }
.q-op:disabled { opacity: .45; cursor: default; }
.q-op.is-urgent { color: #e8c268; border-color: rgba(232, 194, 104, .4); }
.q-op.is-urgent:hover { border-color: #e8c268; color: #ffe2a0; background: rgba(232, 194, 104, .08); }
.q-op.is-urgent.is-on { color: #ffe2a0; background: rgba(232, 194, 104, .12); }

/* ============================================================
   第58轮：多开工作台标签栏
   ============================================================ */
.pj-tabs {
    display: flex; align-items: center; gap: 6px;
    padding: 7px 12px 0;
    border-bottom: 1px solid var(--border-soft);
    overflow-x: auto; scrollbar-width: thin;
}
.pj-tabs[hidden] { display: none; }
.pj-tab {
    display: inline-flex; align-items: center; gap: 6px;
    max-width: 200px; padding: 5px 8px 5px 12px;
    border-radius: 8px 8px 0 0;
    border: 1px solid transparent; border-bottom: none;
    color: var(--text-3); font-size: 12px;
    cursor: pointer; user-select: none;
    white-space: nowrap;
}
.pj-tab:hover { color: var(--text); background: var(--hover); }
.pj-tab.is-on {
    color: var(--text);
    background: var(--panel-3);
    border-color: var(--border-soft);
    box-shadow: inset 0 2px 0 var(--accent);
}
.pj-tab-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pj-tab-close {
    flex: 0 0 auto; width: 15px; height: 15px;
    display: grid; place-items: center;
    border-radius: 4px; font-style: normal; font-size: 12px; line-height: 1;
    color: var(--text-3);
}
.pj-tab-close:hover { background: rgba(242, 85, 90, .16); color: var(--danger); }

/* ============================================================
   AI 实时追踪：右下角悬浮按钮 + 数据面板
   ============================================================ */
.ai-fab {
    position: fixed; right: 18px; bottom: 68px; z-index: 9000;
    width: 48px; height: 48px; border-radius: 50%;
    border: 1px solid var(--accent-line);
    background: linear-gradient(135deg, #7c5cff, #4f8cff);
    color: #fff; font-size: 14px; font-weight: 700; letter-spacing: .5px;
    cursor: pointer; box-shadow: 0 6px 20px rgba(90, 80, 255, .35);
    transition: transform .15s ease, box-shadow .15s ease;
}
.ai-fab:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(90, 80, 255, .5); }
.ai-fab.is-open { background: linear-gradient(135deg, #5a48d8, #3d6fe0); }

.ai-trace-pop {
    position: fixed; right: 18px; bottom: 126px; z-index: 9000;
    width: min(560px, calc(100vw - 36px));
    max-height: min(660px, calc(100vh - 120px));
    display: flex; flex-direction: column;
    border: 1px solid var(--accent-line); border-radius: 14px;
    background: var(--panel-1, #1b1d24);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
    overflow: hidden;
}
.ai-trace-head {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px; border-bottom: 1px solid var(--border);
    background: var(--panel-2);
}
.ai-trace-title { font-size: 13px; font-weight: 700; color: var(--text); }
.ai-trace-sub { font-size: 11px; color: var(--text-3); flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-trace-live { font-size: 10.5px; color: var(--text-3); }
.ai-trace-live.is-on { color: #38d692; }
.ai-trace-btn {
    height: 24px; padding: 0 10px; border-radius: 7px;
    border: 1px solid var(--border); background: var(--panel-3);
    color: var(--text-3); font-size: 11px; cursor: pointer;
}
.ai-trace-btn:hover { color: var(--text); border-color: var(--accent-line); }

/* 类型筛选：全部 / 视频 / 生图 / 文案 / 失败 */
.ai-trace-tabs {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding: 7px 10px; border-bottom: 1px solid var(--border);
    background: var(--panel-1, #1b1d24);
}
.ai-trace-tab {
    display: inline-flex; align-items: center; gap: 4px;
    height: 22px; padding: 0 9px; border-radius: 999px;
    border: 1px solid var(--border); background: transparent;
    color: var(--text-3); font-size: 11px; line-height: 1; cursor: pointer;
}
.ai-trace-tab:hover { color: var(--text); border-color: var(--accent-line); }
.ai-trace-tab.is-on { color: var(--text); border-color: var(--accent-line); background: rgba(122, 162, 255, .13); }
.ai-trace-tab em { font-style: normal; font-size: 10px; color: var(--text-3); }
.ai-trace-tab.is-on em { color: var(--accent, #7aa2ff); }

.ai-trace-list { flex: 1 1 auto; overflow-y: auto; padding: 8px 10px; }
.ai-trace-empty { padding: 34px 10px; text-align: center; font-size: 12px; color: var(--text-3); line-height: 1.9; }

.ai-trace-item {
    border: 1px solid var(--border); border-radius: 10px;
    background: var(--panel-2); padding: 8px 10px; margin-bottom: 8px;
}
.ai-trace-item.is-err { border-color: rgba(242, 85, 90, .45); }
.ai-trace-top { display: flex; align-items: center; gap: 7px; min-width: 0; }
.ai-trace-scene {
    flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 12.5px; font-weight: 600; color: var(--text);
}
.ai-trace-note {
    flex: 0 1 auto; max-width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 10.5px; color: var(--text-2); background: rgba(255, 255, 255, .05);
    border-radius: 5px; padding: 2px 6px;
}
.ai-trace-dl {
    flex: 0 0 auto; margin-left: auto; cursor: pointer;
    font-size: 10px; line-height: 1; padding: 3px 6px; border-radius: 5px;
    border: 1px solid var(--border); background: transparent; color: var(--text-3);
}
.ai-trace-dl:hover { color: var(--accent, #7aa2ff); border-color: var(--accent-line, #7aa2ff); }

.ai-trace-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ai-trace-status { flex: 0 0 auto; font-size: 10px; font-weight: 700; line-height: 1; padding: 3px 6px; border-radius: 5px; }
.ai-trace-status.is-ok { color: #38d692; background: rgba(56, 214, 146, .12); }
.ai-trace-status.is-fail { color: var(--danger, #f2555a); background: rgba(242, 85, 90, .12); }
.ai-trace-status.is-run { color: #e8b64c; background: rgba(232, 182, 76, .12); }
.ai-trace-kind { font-size: 10px; padding: 2px 6px; border-radius: 5px; color: var(--text-2); background: rgba(255, 255, 255, .05); }
.ai-trace-kind.k-video { color: #9db4ff; background: rgba(122, 162, 255, .12); }
.ai-trace-kind.k-image { color: #8ee6b8; background: rgba(142, 230, 184, .1); }
.ai-trace-kind.k-text, .ai-trace-kind.k-idea { color: #c9b8ff; background: rgba(155, 124, 255, .12); }
.ai-trace-model {
    min-width: 0; max-width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 10.5px; color: #9db4ff;
}
.ai-trace-time, .ai-trace-cost { flex: 0 0 auto; font-size: 10.5px; color: var(--text-3); }
.ai-trace-cost.is-wait { color: #8ea2c4; }

/* 阶段时间线：提交 → 出片结果（同一任务的两次记录合并展示） */
.ai-trace-steps { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 6px; font-size: 10.5px; }
.ai-trace-step { padding: 2px 6px; border-radius: 5px; background: rgba(255, 255, 255, .04); color: var(--text-3); }
.ai-trace-step.is-ok { color: #7fd8a8; }
.ai-trace-step.is-fail { color: var(--danger, #f2555a); }
.ai-trace-arrow { color: var(--text-3); font-size: 10px; }

.ai-trace-error {
    margin-top: 6px; padding: 6px 8px; border-radius: 7px;
    background: rgba(242, 85, 90, .1); color: var(--danger, #f2555a);
    font-size: 11px; line-height: 1.6; word-break: break-all;
    max-height: 110px; overflow-y: auto;
}
.ai-trace-item details { margin-top: 6px; }
.ai-trace-item summary {
    cursor: pointer; font-size: 11px; color: var(--text-3);
    user-select: none; outline: none;
}
.ai-trace-item summary:hover { color: var(--text); }
.ai-trace-steplabel { margin-top: 6px; font-size: 10.5px; font-weight: 600; color: var(--text-3); }
.ai-trace-msg { margin: 6px 0 0; border-radius: 8px; background: var(--panel-3); padding: 7px 9px; }
.ai-trace-msg .role {
    display: inline-block; font-size: 10px; font-weight: 700;
    padding: 2px 7px; border-radius: 5px; margin-bottom: 5px;
    color: #c9b8ff; background: rgba(124, 92, 255, .14);
}
.ai-trace-msg .role.r-user { color: #7fd8ff; background: rgba(56, 182, 255, .13); }
.ai-trace-msg .role.r-assistant { color: #38d692; background: rgba(56, 214, 146, .12); }
.ai-trace-msg pre {
    margin: 0; white-space: pre-wrap; word-break: break-word;
    font-size: 11px; line-height: 1.65; color: var(--text-2);
    font-family: inherit; max-height: 240px; overflow-y: auto;
}

/* ============================================ 全局美化确认/提示弹窗（替代原生 confirm/alert） */
.app-cmdlg { position: fixed; inset: 0; z-index: 9999; display: none; }
.app-cmdlg.is-open { display: block; }
.app-cmdlg-mask {
    position: absolute; inset: 0;
    background: rgba(5, 7, 11, .58);
    backdrop-filter: blur(3px);
    animation: appcmdlgFade .18s ease both;
}
.app-cmdlg-box {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: min(400px, calc(100vw - 48px));
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    padding: 20px 22px 18px;
    animation: appcmdlgPop .2s cubic-bezier(.2, .9, .3, 1.2) both;
}
@keyframes appcmdlgFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes appcmdlgPop { from { opacity: 0; transform: translate(-50%, -46%) scale(.94); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.app-cmdlg-box header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.app-cmdlg-box header b { font-size: 15px; color: var(--text); }
.app-cmdlg-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 10px; flex: none;
    color: var(--accent);
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
}
.app-cmdlg-icon.is-danger { color: var(--danger); background: rgba(242, 85, 90, .12); border-color: rgba(242, 85, 90, .35); }
.app-cmdlg-msg { margin: 0 0 18px; font-size: 13.5px; line-height: 1.75; color: var(--text-2); word-break: break-word; }
.app-cmdlg-box footer { display: flex; justify-content: flex-end; gap: 10px; }
.app-cmdlg-box footer .btn { min-width: 88px; }

/* ============================================ 桌面浮窗标题栏「刷新」按钮 */
.win-ctl [data-winact="refresh"] svg { transition: transform .45s ease; }
.win-ctl [data-winact="refresh"]:hover svg { transform: rotate(180deg); }

/* ============================================ 我的账单弹层（个人中心） */
.bill-editor { width: min(460px, calc(100vw - 40px)); }
.bill-summary {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 10px; margin-bottom: 14px;
}
.bill-summary > div {
    padding: 12px 10px;
    border-radius: 12px;
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
    text-align: center;
}
.bill-summary em {
    display: block; margin-bottom: 4px;
    font-style: normal; font-size: 11.5px; color: var(--text-3);
}
.bill-summary b { font-size: 16px; color: var(--text); font-variant-numeric: tabular-nums; }
.bill-tabs {
    display: flex; gap: 6px; margin-bottom: 10px;
}
.bill-tabs button {
    border: 1px solid var(--border-soft);
    background: var(--panel-2);
    color: var(--text-2);
    border-radius: 999px;
    padding: 5px 16px;
    font-size: 12.5px; cursor: pointer;
    font-family: inherit;
}
.bill-tabs button.is-on {
    background: var(--accent-soft);
    border-color: var(--accent-line);
    color: var(--accent);
    font-weight: 600;
}
.bill-list {
    max-height: min(46vh, 380px);
    overflow-y: auto;
    display: flex; flex-direction: column; gap: 8px;
    padding-right: 2px;
}
.bill-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    border-radius: 11px;
    background: var(--panel-2);
    border: 1px solid var(--border-soft);
}
.bill-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 9px; flex: none;
}
.bill-item.is-rc .bill-ico { color: var(--success); background: rgba(47, 191, 113, .12); }
.bill-item.is-cs .bill-ico { color: var(--danger); background: rgba(242, 85, 90, .1); }
.bill-main { flex: 1 1 auto; min-width: 0; }
.bill-main b {
    display: block; font-size: 13px; color: var(--text); font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bill-main em {
    display: block; margin-top: 2px;
    font-style: normal; font-size: 11.5px; color: var(--text-3);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bill-side { flex: none; text-align: right; }
.bill-side b { display: block; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.bill-item.is-rc .bill-side b { color: var(--success); }
.bill-item.is-cs .bill-side b { color: var(--danger); }
.bill-side em {
    display: block; margin-top: 2px;
    font-style: normal; font-size: 11px; color: var(--text-3);
    font-variant-numeric: tabular-nums;
}
.bill-empty {
    padding: 34px 10px;
    text-align: center;
    font-size: 12.5px; color: var(--text-3);
}

/* ============================================ 第72轮：队列定位 / 配音生成 / 分镜分类 */
/* 任务队列可点击跳转的「第N集 / 镜头N」徽标 */
.queue-shot.is-link {
    cursor: pointer;
    text-decoration: underline dotted;
    text-underline-offset: 3px;
}
.queue-shot.is-link:hover { filter: brightness(1.25); }
/* 配音项目：生成按钮 + 逐句结果 */
.tpl-btn.is-accent {
    color: var(--accent);
    border-color: var(--accent-line);
}
.tpl-btn.is-accent:hover { background: var(--accent-soft); }
.tpl-btn.is-accent:disabled { opacity: .55; cursor: wait; }
.dub-item-gen-ok {
    margin-left: 8px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    color: var(--success);
    background: rgba(47, 191, 113, .12);
}
.dub-outs {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 220px;
    overflow-y: auto;
    padding-right: 4px;
}
.dub-out {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    border-radius: 9px;
    background: var(--panel-2);
    border: 1px solid var(--border-soft);
}
.dub-out-no {
    flex: none;
    min-width: 22px;
    text-align: center;
    font-size: 11px;
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
}
.dub-out-role {
    flex: none;
    max-width: 88px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--accent);
}
.dub-out-role.is-narr { color: var(--text-3); }
.dub-out audio {
    flex: 1 1 auto;
    min-width: 0;
    height: 30px;
}
/* 素材库：分镜分类色 */
.grid-cat.is-board { background: rgba(124, 92, 255, .88); }   /* 分镜 · 紫 */

/* ============================================ 音频素材统一封面图 */
.grid-audio.is-img {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 120px;
    overflow: hidden;
    border-radius: inherit;
}
.grid-audio-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.grid-audio.is-img > svg { display: none; }   /* 封面图自带波形，不再叠加图标 */
.grid-audio.is-img audio {
    position: absolute;
    left: 6px;
    right: 6px;
    bottom: 6px;
    width: calc(100% - 12px);
    height: 30px;
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .45));
}
.asset-thumb .audio-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ============================================ 素材库批量管理模式 */
.batch-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 14px;
    margin-bottom: 12px;
    border-radius: 11px;
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
    font-size: 12.5px;
    color: var(--text-2);
}
.batch-pickall { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
.batch-count b { color: var(--accent); font-variant-numeric: tabular-nums; }
.batch-bar .btn-danger { margin-left: auto; }
#manageBtn.is-on {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    font-weight: 600;
}
/* 勾选角标 */
.grid-pick {
    position: absolute;
    top: 7px;
    right: 7px;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, .75);
    background: rgba(17, 17, 26, .45);
    color: transparent;
    font-size: 13px;
    font-weight: 700;
    transition: all .12s;
}
.grid-pick.is-on {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.grid-card.is-picked {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}
/* 管理模式：隐藏单卡悬浮操作与角标，弱化元信息 */
.asset-grid.is-manage .grid-actions,
.asset-grid.is-manage .grid-badge,
.asset-grid.is-manage .grid-cat { display: none; }
.asset-grid.is-manage .grid-card { cursor: pointer; }

/* ============================================================
   交流论坛（窗口 win-forum）
   ============================================================ */
.wg-forum { background: linear-gradient(135deg, #3b82f6, #22d3ee); }
.wg-forum, .di-forum { background: linear-gradient(135deg, #3b82f6, #22d3ee); }

.fm-page { display: flex; height: 100%; min-height: 0; }
.fm-side {
    width: 216px; flex: 0 0 auto;
    border-right: 1px solid var(--line, rgba(255,255,255,.08));
    padding: 14px 12px; display: flex; flex-direction: column; gap: 10px; min-height: 0;
}
.fm-side-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fm-side-head b { font-size: 13px; color: var(--text2); letter-spacing: .04em; }
.fm-boards { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.fm-board {
    text-align: left; border: 1px solid transparent; cursor: pointer;
    background: var(--panel2, rgba(255,255,255,.04)); color: var(--text);
    border-radius: 10px; padding: 9px 11px; display: flex; flex-direction: column; gap: 3px;
    transition: all .15s;
}
.fm-board:hover { border-color: var(--accent, #7c5cff); }
.fm-board.is-active { background: linear-gradient(135deg, rgba(124,92,255,.22), rgba(34,211,238,.14)); border-color: rgba(124,92,255,.5); }
.fm-board b { font-size: 13px; font-weight: 600; }
.fm-board em { font-style: normal; font-size: 11px; color: var(--text3, #8b93a7); }
.fm-board span { font-size: 11px; color: var(--text3, #8b93a7); line-height: 1.4; }
.fm-tip { font-size: 11px; color: var(--text3, #8b93a7); text-align: center; margin: 0; }

.fm-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.fm-pane { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; padding: 14px 16px; gap: 10px; }
.fm-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fm-toolbar input[type="search"] {
    flex: 1 1 220px; max-width: 340px; padding: 8px 12px; border-radius: 9px;
    border: 1px solid var(--line, rgba(255,255,255,.1)); background: var(--panel2, rgba(255,255,255,.05)); color: var(--text);
}
.fm-stat { font-size: 12px; color: var(--text3, #8b93a7); }
.fm-list { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.fm-thread {
    position: relative; display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 14px; border-radius: 12px; cursor: pointer;
    background: var(--panel2, rgba(255,255,255,.04));
    border: 1px solid var(--line, rgba(255,255,255,.07));
    transition: border-color .15s, transform .15s;
}
.fm-thread:hover { border-color: rgba(124,92,255,.45); transform: translateY(-1px); }
.fm-thread.is-pinned { border-color: rgba(245,166,35,.4); background: linear-gradient(180deg, rgba(245,166,35,.08), transparent); }
.fm-thread-main { flex: 1 1 auto; min-width: 0; }
.fm-thread-title { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fm-title { font-size: 14px; font-weight: 600; color: var(--text); }
.fm-title.is-bold { font-weight: 800; }
.fm-thread p { margin: 4px 0 0; font-size: 12px; color: var(--text2, #a8b0c2); line-height: 1.5; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.fm-meta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; font-size: 11px; color: var(--text3, #8b93a7); }
.fm-badge {
    font-size: 10.5px; padding: 1px 7px; border-radius: 999px; line-height: 1.6;
    background: rgba(255,255,255,.08); color: var(--text2, #a8b0c2);
}
.fm-badge-pin { background: rgba(245,166,35,.16); color: #f5a623; border: 1px solid rgba(245,166,35,.35); }
/* 论坛作者身份徽章：昵称后 管理员 / VIP / 普通会员 */
.fm-rank {
    display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px;
    font-size: 10px; line-height: 1.7; font-weight: 600; vertical-align: 1px;
    background: rgba(255,255,255,.07); color: var(--text3, #8b93a7); border: 1px solid rgba(255,255,255,.12);
}
.fm-rank.is-admin { background: rgba(235,87,87,.16); color: #ff6b6b; border-color: rgba(235,87,87,.4); }
.fm-rank.is-vip { background: rgba(245,166,35,.16); color: #f5a623; border-color: rgba(245,166,35,.4); }
.fm-del {
    border: 0; background: transparent; color: var(--text3, #8b93a7); cursor: pointer;
    font-size: 11.5px; padding: 4px 8px; border-radius: 7px; flex: 0 0 auto;
}
.fm-del:hover { background: rgba(242,85,90,.14); color: #f2555a; }
.fm-card-acts { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.fm-linkbtn {
    border: 0; background: transparent; color: var(--text3, #8b93a7); cursor: pointer;
    font-size: 12px; padding: 4px 6px; border-radius: 7px; line-height: 1; opacity: .65;
}
.fm-linkbtn:hover { background: rgba(124,92,255,.16); color: #a78bfa; opacity: 1; }
.fm-sharebtn {
    margin-left: auto; border: 1px solid var(--line, rgba(255,255,255,.12)); background: transparent;
    color: var(--text2, #a8b0c2); cursor: pointer; font-size: 11px; padding: 2px 8px; border-radius: 999px;
}
.fm-sharebtn:hover { border-color: rgba(124,92,255,.55); color: #a78bfa; }
.fm-empty { padding: 40px 0; text-align: center; font-size: 12.5px; color: var(--text3, #8b93a7); }
.fm-pager { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 12px; color: var(--text3, #8b93a7); }

.fm-detail { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.fm-post { padding: 16px; border-radius: 12px; background: var(--panel2, rgba(255,255,255,.04)); border: 1px solid var(--line, rgba(255,255,255,.07)); }
.fm-post-title { font-size: 16px; font-weight: 700; color: var(--text); }
.fm-post-title.is-bold { font-weight: 800; }
.fm-post-body { margin-top: 10px; font-size: 13px; line-height: 1.75; color: var(--text2, #c3cad9); word-break: break-word; }
.fm-modbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line, rgba(255,255,255,.1)); }
.fm-modbtn {
    border: 1px solid var(--line, rgba(255,255,255,.12)); background: transparent; color: var(--text2, #a8b0c2);
    font-size: 11.5px; padding: 4px 10px; border-radius: 8px; cursor: pointer;
}
.fm-modbtn:hover { border-color: var(--accent, #7c5cff); color: var(--text); }
.fm-modbtn.is-danger:hover { border-color: rgba(242,85,90,.55); color: #f2555a; }
.fm-modcolor { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text3, #8b93a7); }
.fm-modcolor select {
    background: var(--panel2, rgba(255,255,255,.05)); color: var(--text);
    border: 1px solid var(--line, rgba(255,255,255,.12)); border-radius: 7px; padding: 3px 6px; font-size: 11.5px;
}
.fm-replies { display: flex; flex-direction: column; gap: 8px; }
.fm-reply { padding: 12px 14px; border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid var(--line, rgba(255,255,255,.06)); }
.fm-reply-head { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text3, #8b93a7); }
.fm-reply-head b { color: var(--text); font-weight: 600; }
.fm-reply-head .fm-del { margin-left: auto; }
.fm-reply-body { margin-top: 6px; font-size: 12.5px; line-height: 1.7; color: var(--text2, #c3cad9); word-break: break-word; }
.fm-reply-box { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid var(--line, rgba(255,255,255,.08)); }
.fm-reply-box textarea, .fm-compose textarea, .fm-compose input {
    width: 100%; padding: 10px 12px; border-radius: 9px; resize: vertical;
    border: 1px solid var(--line, rgba(255,255,255,.1)); background: var(--panel2, rgba(255,255,255,.05));
    color: var(--text); font-size: 13px; font-family: inherit;
}
.fm-reply-box button { align-self: flex-end; }
.fm-compose { display: flex; flex-direction: column; gap: 12px; max-width: 720px; }
.fm-compose-foot { display: flex; justify-content: flex-end; }
.fm-c-gold { color: #f5c76a !important; }
.fm-c-red { color: #ff7a7f !important; }
.fm-c-green { color: #58d68d !important; }
.fm-c-blue { color: #6aa2ff !important; }
.fm-c-purple { color: #b06bff !important; }
.fm-c-pink { color: #f07fae !important; }

/* ---- 富文本：链接 / 内联媒体 ---- */
.fm-link { color: var(--accent, #7c5cff); text-decoration: underline; text-underline-offset: 2px; word-break: break-all; }
.fm-link:hover { filter: brightness(1.15); }
.fm-media { display: block; max-width: min(420px, 100%); max-height: 320px; border-radius: 10px; margin: 8px 0; border: 1px solid var(--line, rgba(255,255,255,.1)); }
.fm-audio { display: block; width: min(420px, 100%); margin: 6px 0; height: 36px; }

/* ---- 楼中楼（叠楼层） ---- */
.fm-reply.is-nested {
    margin: 10px 0 0 22px; padding: 9px 12px;
    border-left: 2px solid var(--accent-line, rgba(124, 92, 255, .4));
    border-radius: 8px; background: rgba(124, 92, 255, .05);
}
.fm-reply.is-nested .fm-reply-head { font-size: 11.5px; }
.fm-floor { font-style: normal; font-size: 10.5px; padding: 1px 7px; border-radius: 999px; background: rgba(255,255,255,.06); color: var(--text3, #8b93a7); }
.fm-floor-nest { background: rgba(124, 92, 255, .14); color: var(--accent, #9d85ff); }
.fm-replyto {
    border: 1px solid var(--line, rgba(255,255,255,.12)); background: transparent; color: var(--text3, #8b93a7);
    font-size: 11px; padding: 2px 8px; border-radius: 999px; cursor: pointer;
}
.fm-replyto:hover { border-color: var(--accent, #7c5cff); color: var(--text); }
.fm-reply-target {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 6px 10px; border-radius: 8px; font-size: 11.5px; color: var(--text2, #a8b0c2);
    background: rgba(124, 92, 255, .1); border: 1px dashed var(--accent-line, rgba(124, 92, 255, .4));
}
.fm-reply-target b { color: var(--accent, #9d85ff); }
.fm-reply-target button { border: 0; background: transparent; color: var(--text3, #8b93a7); cursor: pointer; font-size: 12px; }
.fm-reply-actions { display: flex; justify-content: flex-end; }

/* ---- 编辑器工具条 ---- */
.fm-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.fm-tool {
    display: inline-flex; align-items: center; gap: 4px;
    border: 1px solid var(--line, rgba(255,255,255,.12)); background: transparent; color: var(--text2, #a8b0c2);
    font-size: 11.5px; padding: 4px 9px; border-radius: 8px; cursor: pointer; white-space: nowrap;
}
.fm-tool:hover { border-color: var(--accent, #7c5cff); color: var(--text); }
.fm-tool:disabled { opacity: .45; cursor: wait; }
.fm-tool.is-b b { font-weight: 800; font-size: 12.5px; }
.fm-tool-group { display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px; border: 1px solid var(--line, rgba(255,255,255,.12)); border-radius: 8px; }
.fm-swatch { width: 13px; height: 13px; border-radius: 4px; cursor: pointer; display: inline-block; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.fm-swatch:hover { transform: scale(1.2); }
.fm-tool-sep { width: 1px; height: 16px; background: var(--line, rgba(255,255,255,.14)); margin: 0 4px; }

/* ---- 附件芯片 ---- */
.fm-files { display: flex; flex-direction: column; gap: 6px; }
.fm-attach { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.fm-attach .fm-attach-img { width: min(300px, 100%); border-radius: 8px; border: 1px solid var(--line, rgba(255,255,255,.1)); }
.fm-chips { display: flex; flex-direction: column; gap: 6px; }
.fm-chip {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 7px 10px;
    border-radius: 9px; background: rgba(255,255,255,.04); border: 1px solid var(--line, rgba(255,255,255,.08));
    font-size: 11.5px; color: var(--text2, #a8b0c2); max-width: 620px;
}
.fm-chip-icon { font-size: 14px; }
.fm-chip-name { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 240px; }
.fm-chip-size { font-style: normal; color: var(--text3, #8b93a7); flex: 0 0 auto; }
.fm-chip-price { display: inline-flex; align-items: center; gap: 4px; color: #f5c76a; flex: 0 0 auto; }
.fm-chip-price > em { font-style: normal; font-size: 10.5px; letter-spacing: .3px; opacity: .85; }
.fm-chip-price-hint { font-size: 10px; color: var(--text3, #8b93a7); }
.fm-chip-save {
    border: 1px solid rgba(245, 199, 106, .5); background: rgba(245, 199, 106, .14); color: #f5c76a;
    font-size: 10.5px; padding: 2px 8px; border-radius: 6px; cursor: pointer;
}
.fm-chip-save:hover { background: rgba(245, 199, 106, .24); }
.fm-chip-save:disabled { opacity: .5; cursor: wait; }
.fm-hint { margin: 6px 0 0; font-size: 11px; line-height: 1.6; color: var(--text3, #8b93a7); }
.fm-hint b { color: #f5c76a; font-weight: 600; }
.fm-chip-price input {
    width: 74px; padding: 3px 6px; border-radius: 6px; font-size: 11.5px;
    border: 1px solid var(--line, rgba(255,255,255,.12)); background: var(--panel2, rgba(255,255,255,.05)); color: var(--text);
}
.fm-chip-del { border: 0; background: transparent; color: var(--text3, #8b93a7); cursor: pointer; font-size: 12px; }
.fm-chip-del:hover { color: #f2555a; }
.fm-chip-buy {
    border: 1px solid rgba(245, 199, 106, .55); background: rgba(245, 199, 106, .12); color: #f5c76a;
    font-size: 11.5px; padding: 3px 10px; border-radius: 999px; cursor: pointer; white-space: nowrap;
}
.fm-chip-buy:hover { background: rgba(245, 199, 106, .22); }
.fm-chip-buy:disabled { opacity: .5; cursor: wait; }
.fm-chip-dl {
    border: 1px solid var(--accent-line, rgba(124, 92, 255, .4)); background: rgba(124, 92, 255, .1); color: var(--accent, #9d85ff);
    font-size: 11.5px; padding: 3px 10px; border-radius: 999px; text-decoration: none; white-space: nowrap;
}
.fm-chip-dl:hover { background: rgba(124, 92, 255, .2); }
.fm-chip-owned { font-size: 10.5px; color: #58d68d; }

/* 浅色主题适配 */
:root[data-theme="light"] .fm-board, :root[data-theme="light"] .fm-thread,
:root[data-theme="light"] .fm-post, :root[data-theme="light"] .fm-reply,
:root[data-theme="light"] .fm-reply-box { background: rgba(17, 24, 39, .03); }
:root[data-theme="light"] .fm-reply.is-nested { background: rgba(124, 92, 255, .06); }
:root[data-theme="light"] .fm-chip { background: rgba(17, 24, 39, .04); }
:root[data-theme="light"] .fm-floor { background: rgba(17, 24, 39, .07); }

/* ---- 风格库分类标签页（第129轮） ---- */
.pj-style-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.pj-style-tab {
  appearance: none; border: 1px solid var(--border, rgba(255,255,255,.12));
  background: var(--panel2, rgba(255,255,255,.04)); color: var(--text2, inherit);
  border-radius: 999px; padding: 4px 12px; font-size: 12px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px; transition: all .15s ease;
}
.pj-style-tab em { font-style: normal; font-size: 10.5px; opacity: .65; }
.pj-style-tab:hover { border-color: var(--accent-line, #7c5cff); color: var(--text, inherit); }
.pj-style-tab.is-on {
  border-color: var(--accent-line, #7c5cff); color: var(--accent-line, #7c5cff);
  background: color-mix(in srgb, var(--accent-line, #7c5cff) 12%, transparent);
  font-weight: 600;
}

/* ============================================================
   远程图片回补失败态：图床不可达时给黑块一个可见提示（点击重试）
   ============================================================ */
img.img-fail {
    min-width: 72px;
    min-height: 56px;
    background:
        repeating-linear-gradient(45deg, rgba(124, 92, 255, .06) 0 8px, transparent 8px 16px),
        var(--panel-2);
    outline: 1px dashed var(--accent-line);
    outline-offset: -5px;
    cursor: pointer;
    opacity: .75;
}
img.img-fail:hover { opacity: 1; outline-style: solid; }