/* BOLUO 品牌组件层（1.0）
   依据 docs/design-reference/docs/components.md 与 code/components.css，把前台与管理后台共用的
   现有类名（.btn .panel .tbl .badge .notice .modal .toast …）统一到品牌规格。最后加载，只改外观不改结构。 */

/* ---------- 字级：标题 28/36 600 · 区块 20/28 500 · 正文 16/24 · 辅助 14/22 · 说明 12/18 ---------- */
body { font: 400 16px/24px var(--font-sans); background: var(--bg); color: var(--ink); }
h1 { font: 600 28px/36px var(--font-sans); color: var(--ink-strong); letter-spacing: 0; }
h2 { font: 500 20px/28px var(--font-sans); color: var(--ink-strong); }
h3 { font: 500 16px/24px var(--font-sans); color: var(--ink-strong); }
.small { font-size: 14px; line-height: 22px; }
.caption { font-size: 12px; line-height: 18px; }
.faint { color: var(--ink-muted); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- 链接：ink-strong + 1px 下划线，偏移 3px；蓝色只表示焦点 ---------- */
a { color: var(--ink-strong); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: currentColor; }
a:hover { text-decoration-thickness: 2px; }
a.btn, .nav a, a.hub-mode, a.dashboard-task, a.hub-points, .dashboard-summary a, .lib-card, .hist-card, a.brand { text-decoration: none; }

/* ---------- 按钮：默认即次按钮（白底 + line-strong），.primary 主按钮，.ghost 文字按钮 ---------- */
.btn { height: var(--control-md); min-height: var(--control-md); padding: 0 20px; border-radius: var(--radius-md); border: 1px solid var(--line-strong);
  background: var(--bg); color: var(--ink-strong); font: 500 14px/20px var(--font-sans); gap: var(--space-2); box-shadow: none;
  transition: background-color 120ms cubic-bezier(.2,0,0,1), border-color 120ms; }
.btn:hover { background: var(--bg-sunken); }
.btn:active { background: var(--bg-sunken); transform: none; }
.btn.primary { background: var(--action); border-color: var(--action); color: var(--on-action); }
.btn.primary:hover { background: var(--action-hover); border-color: var(--action-hover); }
.btn.primary:active { background: var(--action-pressed); border-color: var(--action-pressed); }
.btn.ghost { background: transparent; border-color: transparent; padding: 0 12px; }
.btn.ghost:hover { background: var(--bg-sunken); }
.btn.danger { color: var(--danger); border-color: var(--line-strong); }
.btn.danger:hover { background: var(--danger-soft); }
.btn.danger-solid { background: var(--danger); border-color: var(--danger); color: var(--on-danger); }
.btn.danger-solid:hover { background: var(--danger-hover); border-color: var(--danger-hover); }
.btn:disabled, .btn[aria-disabled=true], .btn.primary:disabled { opacity: 1; cursor: not-allowed; background: var(--action-disabled); border-color: var(--action-disabled); color: var(--ink-disabled); }
.btn.sm { height: var(--control-sm); min-height: var(--control-sm); padding: 0 12px; border-radius: var(--radius-sm); }
.btn.icon-only { width: var(--control-md); height: var(--control-md); min-height: var(--control-md); padding: 0; }
.btn .icon { width: 20px; height: 20px; }
.btn.sm .icon { width: 16px; height: 16px; }

/* ---------- 输入：44 高 · bg-sunken · 1px line-strong · 圆角 8；聚焦描边 + 外圈 1px focus ---------- */
label.field, .field { gap: var(--space-2); font: 500 14px/20px var(--font-sans); color: var(--ink); }
.field.small { font-size: 14px; }
.hint, label.field > span.hint { font: 400 12px/18px var(--font-sans); color: var(--ink-muted); }
input[type=text], input[type=search], input[type=email], input[type=password], input[type=number], input[type=url], input[type=tel], select, textarea {
  min-height: var(--control-md); padding: 9px var(--space-3); border-radius: var(--radius-sm); border: 1px solid var(--line-strong);
  background-color: var(--bg-sunken); color: var(--ink); font: 400 16px/24px var(--font-sans); box-shadow: none; }
input:hover, select:hover, textarea:hover { border-color: var(--ink-muted); }
input:focus, select:focus, textarea:focus, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus); }
input:disabled, select:disabled, textarea:disabled { color: var(--ink-disabled); border-color: var(--line); cursor: not-allowed; }
input[aria-invalid=true], textarea[aria-invalid=true], select[aria-invalid=true] { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
input::placeholder, textarea::placeholder { color: var(--ink-muted); }
select { padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }
/* 文件选择：与输入框同高同底色，按钮部分按次按钮样式 */
input[type=file] { width: 100%; min-height: var(--control-md); padding: 5px; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm);
  background: var(--bg-sunken); color: var(--ink-muted); font: 400 14px/22px var(--font-sans); cursor: pointer; }
input[type=file]:hover { border-color: var(--ink-muted); }
input[type=file]:focus-visible { outline: none; border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus); }
input[type=file]::file-selector-button { height: var(--control-sm); margin-right: var(--space-3); padding: 0 12px; border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); background: var(--bg); color: var(--ink-strong); font: 500 14px/20px var(--font-sans); cursor: pointer; }
input[type=file]::file-selector-button:hover { background: var(--bg-sunken); }
input[type=checkbox], input[type=radio] { width: 20px; height: 20px; accent-color: var(--action); }
input[type=range] { accent-color: var(--action); }
.check { min-height: var(--control-md); font: 400 14px/22px var(--font-sans); }

/* ---------- 筛选胶囊：32 高，line-strong 描边，选中 action 底 ---------- */
.chip { height: var(--control-sm); padding: 0 var(--space-3); border-radius: var(--radius-full); border: 1px solid var(--line-strong);
  background: var(--bg); color: var(--ink); font: 500 14px/20px var(--font-sans); }
.chip:hover { background: var(--bg-sunken); color: var(--ink-strong); }
.chip.on, .chip[aria-pressed=true] { background: var(--action); border-color: var(--action); color: var(--on-action); }

/* ---------- 卡片 / 面板：bg-raised · 1px line · 圆角 16 · 无阴影；可点击时悬停描边加深 ---------- */
.panel, .card { background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: none; }
.panel .panel { border: 0; border-radius: 0; }
.panel-head { min-height: 64px; padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--line); gap: var(--space-3); }
.panel-head h2, .panel-head h3 { font: 500 16px/24px var(--font-sans); }
.panel-body { padding: var(--space-6); }
.lib-card, .hist-card, .mat, .cand { transition: border-color 120ms; }
.lib-card:hover, .hist-card:hover, .mat:hover { border-color: var(--line-strong); }
.lib-new { border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); color: var(--ink-muted); font: 500 14px/20px var(--font-sans); }
.lib-new:hover { background: var(--bg-sunken); color: var(--ink-strong); }
.page-head { gap: var(--space-6); }
.page-head h1 { font: 600 28px/36px var(--font-sans); }
.page-head p { font-size: 14px; line-height: 22px; color: var(--ink-muted); }

/* ---------- 标签 Tag：24 高 · 圆角 4 · 12/18 500；状态标签带图标 ---------- */
.badge, .tag { display: inline-flex; align-items: center; gap: var(--space-1); height: 24px; padding: 0 var(--space-2); border-radius: var(--radius-xs);
  font: 500 12px/18px var(--font-sans); background: var(--bg-sunken); color: var(--ink); white-space: nowrap; border: 0; }
.badge.accent, .tag.sp { background: var(--action); color: var(--on-action); }
.badge.info { background: transparent; border: 1px solid var(--line-strong); color: var(--ink); }
.badge.ok { background: var(--success-soft); color: var(--success); }
.badge.danger { background: var(--danger-soft); color: var(--danger); }
.badge.warn { background: var(--bg-sunken); color: var(--warning); }
.badge.ok::before, .badge.danger::before, .badge.warn::before { content: ""; width: 12px; height: 12px; flex: none; background: currentColor;
  -webkit-mask: var(--i-ok) center/12px no-repeat; mask: var(--i-ok) center/12px no-repeat; }
.badge.danger::before { -webkit-mask-image: var(--i-error); mask-image: var(--i-error); }
.badge.warn::before { -webkit-mask-image: var(--i-warn); mask-image: var(--i-warn); }

/* ---------- 提示条 Banner：12/16 内边距 · 圆角 12 · 14/22；警告与信息 bg-sunken + line ---------- */
.notice { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font: 400 14px/22px var(--font-sans);
  background: var(--bg-sunken); border: 1px solid var(--line); color: var(--ink); }
.notice::before { margin-top: 1px; background: var(--warning); }
.notice.info::before { background: var(--ink); }
.notice.danger { background: var(--danger-soft); border-color: transparent; }
.notice.danger::before { background: var(--danger); }
.notice.ok { background: var(--success-soft); border-color: transparent; }
.notice.ok::before { background: var(--success); }
.notice b, .notice strong { font-weight: 500; color: var(--ink-strong); }

/* ---------- 表格：外框 1px line + 圆角 16；表头 40 高 bg-sunken 12/18 500；行 48；无斑马纹与竖线 ---------- */
table.tbl { width: 100%; border-collapse: collapse; font: 400 14px/22px var(--font-sans); color: var(--ink); }
.tbl th { height: 40px; padding: 0 var(--space-4); background: var(--bg-sunken); color: var(--ink-muted); font: 500 12px/18px var(--font-sans);
  text-align: left; white-space: nowrap; border-bottom: 0; }
.tbl tbody:first-child tr:first-child td { border-top: 0; }
.tbl td { height: 48px; padding: var(--space-2) var(--space-4); border-top: 1px solid var(--line); border-bottom: 0; vertical-align: middle; }
.tbl tbody tr:hover td { background: var(--bg-sunken); }
.tbl .numeric, .tbl td.num { text-align: right; font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.tbl td .row { flex-wrap: nowrap; gap: var(--space-1); }
/* 后台表格：短字段不折行，宽表在自身容器内横向滚动；说明类长文本保留换行 */
.admin-content .tbl th, .admin-content .tbl td { white-space: nowrap; }
.admin-content .tbl td.muted, .admin-content .tbl td.wrap, .admin-content .route-table td { white-space: normal; min-width: 200px; }
.admin-content .route-table td:first-child { min-width: 0; }
/* 宽表横向滚动时，操作列固定在右侧，关键操作始终可见 */
.tbl td:last-child:has(> .row > .btn, > .btn) { position: sticky; right: 0; background: var(--bg-raised); box-shadow: inset 1px 0 0 var(--line); }
.tbl tr:has(> td:last-child > .row > .btn, > td:last-child > .btn) + tr td:last-child { background: var(--bg-raised); }
.tbl thead th:last-child { position: sticky; right: 0; }
.tbl tbody tr:hover td:last-child { background: var(--bg-sunken); }
/* 行内操作用文字按钮，保留可见入口但降低噪音 */
.tbl td .btn.sm:not(.primary):not(.danger-solid) { border-color: transparent; background: transparent; padding: 0 8px; }
.tbl td .btn.sm:not(.primary):not(.danger-solid):hover { background: var(--bg); border-color: var(--line); }
.panel > table.tbl:first-child th:first-child { border-top-left-radius: calc(var(--radius-lg) - 1px); }
.panel > table.tbl:first-child th:last-child { border-top-right-radius: calc(var(--radius-lg) - 1px); }
.table-scroll { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-raised); }

/* ---------- 统计数字：数字直接排在页面上，不放进卡片 ---------- */
.stat-row { gap: 0; padding: var(--space-6) 0; border-block: 1px solid var(--line); }
.stat-row > .stat, .stat-row > .panel.stat { background: transparent; border: 0; border-radius: 0; padding: 0 var(--space-6); display: grid; gap: var(--space-1); align-content: start; }
.stat-row > .stat:first-child { padding-left: 0; }
.stat-row > .stat + .stat { border-left: 1px solid var(--line); }
.stat > span:first-child { font: 400 14px/22px var(--font-sans); color: var(--ink-muted); }
.stat b { font: 500 32px/40px var(--font-num); font-variant-numeric: tabular-nums; color: var(--ink-strong); margin: 0; }
.stat .small { font-size: 12px; line-height: 18px; color: var(--ink-muted); }

/* ---------- 标签页：选中 ink-strong 500 + 底部 2px 线；项间距 24 ---------- */
.tabs { gap: var(--space-6); padding: 0 var(--space-4); border-bottom: 1px solid var(--line); }
.tabs button { position: relative; height: 44px; padding: 0; border: 0; background: none; box-shadow: none; font: 400 14px/20px var(--font-sans); color: var(--ink-muted); }
.tabs button:hover { color: var(--ink-strong); }
.tabs button.on { color: var(--ink-strong); font-weight: 500; box-shadow: inset 0 -2px 0 var(--ink-strong); border: 0; }
.page-tabs { display: flex; gap: var(--space-6); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; margin-bottom: var(--space-8); }
.page-tabs a { position: relative; flex: none; padding: var(--space-3) 0; font: 400 14px/20px var(--font-sans); color: var(--ink-muted); text-decoration: none; white-space: nowrap; }
.page-tabs a:hover { color: var(--ink-strong); }
.page-tabs a[aria-current=page] { color: var(--ink-strong); font-weight: 500; }
.page-tabs a[aria-current=page]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ink-strong); }
/* 分段控件 */
.auth-tabs, .packaging-presets { border-radius: var(--radius-md); }
.auth-tabs { background: var(--bg-sunken); padding: 2px; gap: 2px; margin: var(--space-6) 0; }
.auth-tabs button { height: 36px; border: 1px solid transparent; border-radius: 10px; font: 500 14px/20px var(--font-sans); color: var(--ink-muted); background: transparent; box-shadow: none; }
.auth-tabs button.on { background: var(--bg-raised); border-color: var(--line); color: var(--ink-strong); }

/* ---------- 弹窗：bg-raised · 圆角 24 · 内边距 24 · 无阴影；标题 20/28 600；按钮右对齐 ---------- */
.mask { background: var(--scrim); }
.modal { background: var(--bg-raised); border-radius: var(--radius-xl); box-shadow: none; animation: bl-dialog-in 220ms cubic-bezier(.2,0,0,1); }
.modal-head { padding: var(--space-6) var(--space-6) var(--space-3); }
.modal-head h2, .modal-head h3, .modal-head b { font: 600 20px/28px var(--font-sans); color: var(--ink-strong); }
.modal-body { padding: 0 var(--space-6) var(--space-6); font-size: 16px; line-height: 24px; }
.modal-body > p { color: var(--ink-muted); }
.modal-foot { padding: var(--space-4) var(--space-6) var(--space-6); border-top: 0; gap: var(--space-2); justify-content: flex-end; }
@keyframes bl-dialog-in { from { opacity: 0; transform: translateY(8px); } }

/* ---------- 轻提示 Toast：bg-inverse · 圆角 12 · 最小高 48 · 最宽 360 · 左下 24 ---------- */
.toasts { left: var(--space-6); bottom: var(--space-6); transform: none; align-items: flex-start; }
.toast { min-height: 48px; max-width: min(360px, calc(100vw - 32px)); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  background: var(--bg-inverse); color: var(--ink-inverse); font: 400 14px/22px var(--font-sans); box-shadow: none; animation: bl-dialog-in 200ms cubic-bezier(.2,0,0,1); }

/* ---------- 加载：三方块（按钮内与局部）、4px 进度条 ---------- */
.spin { width: 28px; height: 8px; border: 0; border-radius: 0; background: none; clip-path: none; display: inline-block; flex: none; position: relative; animation: none; }
.spin::before { content: ""; position: absolute; inset: 0;
  background: linear-gradient(currentColor 0 0) 0 0 / 8px 8px no-repeat, linear-gradient(currentColor 0 0) 10px 0 / 8px 8px no-repeat, linear-gradient(currentColor 0 0) 20px 0 / 8px 8px no-repeat;
  opacity: .25; }
.spin::after { content: ""; position: absolute; top: 0; left: 0; width: 8px; height: 8px; background: currentColor; animation: bl-step 900ms steps(1) infinite; }
@keyframes bl-step { 0% { transform: translateX(0); } 33.33% { transform: translateX(10px); } 66.66% { transform: translateX(20px); } }
.dots { gap: 4px; }
.dots i { width: 8px; height: 8px; border-radius: 0; background: currentColor; animation: bl-dots 900ms steps(1) infinite; opacity: .25; }
.dots i:nth-child(2) { animation-delay: 300ms; } .dots i:nth-child(3) { animation-delay: 600ms; }
@keyframes bl-dots { 0%, 33% { opacity: 1; } 34%, 100% { opacity: .25; } }
.progress { height: 4px; border-radius: var(--radius-full); background: var(--line); }
.progress > i { background: var(--action); border-radius: inherit; }
@media (prefers-reduced-motion: reduce) { .spin::after, .dots i { animation: none; } .dots i { opacity: 1; } }

/* ---------- 空状态：块面图形（line 色块 + 一个 ink-strong 小方块）→ 标题 → 说明 ---------- */
.empty, .workbench-empty, .table-message { color: var(--ink-muted); font-size: 14px; line-height: 22px; }
.empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-10) var(--space-6); text-align: center; }
.empty::before, .data-table .table-message::before, .hub-empty::before {
  content: ""; display: block; width: 120px; height: 80px; margin: 0 auto var(--space-3);
  background:
    linear-gradient(var(--ink-strong) 0 0) 96px 56px / 16px 16px no-repeat,
    linear-gradient(var(--line) 0 0) 0 0 / 52px 80px no-repeat,
    linear-gradient(var(--line) 0 0) 60px 0 / 52px 48px no-repeat; }
.empty b { font: 500 20px/28px var(--font-sans); color: var(--ink-strong); margin: 0; }
.data-table .table-message { padding: var(--space-8) var(--space-4); height: auto; }
.table-scroll .data-table:has(.table-message) { min-width: 0; } /* 空表不撑宽，说明始终在可视区居中 */
.empty.brand-empty::before { display: none; }
.hub-empty { text-align: center; }

/* ---------- 侧栏：项高 40 · 圆角 8 · 14/20；当前项 bg-raised + 500 + 左侧 3px 指示条 ---------- */
.sidebar .nav a, .secondary-nav .nav a { min-height: 40px; height: 40px; border-radius: var(--radius-sm); font: 400 14px/20px var(--font-sans); color: var(--ink); }
.sidebar .nav a:hover, .secondary-nav .nav a:hover { background: var(--line); color: var(--ink-strong); }
.sidebar .nav a.active, .secondary-nav .nav a.active, .nav a[aria-current=page] { background: var(--bg-raised); color: var(--ink-strong); font-weight: 500; }
.secondary-nav .nav a:hover { background: var(--bg-sunken); }
.secondary-nav .nav a.active { background: var(--bg-sunken); }
.nav a .icon { width: 20px; height: 20px; }
.secondary-nav { border-right: 1px solid var(--line); }
.mobile-bar { font-size: 14px; }
.mobile-bar b { color: var(--ink-strong); }

/* 头像：圆形，bg-sunken 底 + ink-strong 首字，1px line 描边 */
.account-avatar { background: var(--bg-sunken); color: var(--ink-strong); border: 1px solid var(--line); font-weight: 500; }
.account-menu { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg-raised); box-shadow: var(--shadow-popover, 0 8px 24px rgba(0,0,0,.12)); }

/* ---------- 细节 ---------- */
details > summary { font: 500 14px/20px var(--font-sans); color: var(--ink-muted); }
details > summary:hover { color: var(--ink-strong); }
code { font: 13px/20px var(--font-mono); background: var(--bg-sunken); border: 1px solid var(--line); border-radius: var(--radius-xs); }
.kv { font-size: 14px; line-height: 22px; }
.kv > :nth-child(odd) { color: var(--ink-muted); }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-6) 0; }

/* ---------- 登录页顶栏（与官网 WebHeader 一致：64 高、图形标 28、栏目 14/20、底部 1px line） ---------- */
/* 三栏：标志靠左、栏目在页面正中（与官网顶栏一致）、右侧留空保持对称 */
.auth-top { position: sticky; top: 0; z-index: 10; display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: var(--space-8); height: var(--header-web, 64px);
  padding: 0 max(var(--space-8), calc((100vw - 1200px) / 2)); background: var(--bg); border-bottom: 1px solid var(--line); }
.auth-top-brand { display: flex; align-items: center; height: 44px; justify-self: start; }
.auth-top-brand .brand-mark { width: 38px; height: 28px; }
.auth-top-nav { grid-column: 2; display: flex; justify-content: center; gap: var(--space-8); min-width: 0; max-width: calc(100vw - 2 * var(--space-4) - 2 * 44px - 2 * var(--space-4)); overflow-x: auto; scrollbar-width: none; }
.auth-top-nav a { position: relative; padding: 22px 0; font: 400 14px/20px var(--font-sans); color: var(--ink); text-decoration: none; white-space: nowrap; }
.auth-top-nav a:hover { color: var(--ink-strong); }
.auth-top-nav a:hover::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--line-strong); }
.auth-top + .auth-wrap { min-height: calc(100dvh - 64px); }
@media (max-width: 767px) { .auth-top { gap: var(--space-4); padding: 0 var(--space-4); } .auth-top-nav { gap: var(--space-4); } }

/* ---------- 页面通用 ---------- */
/* 垂直节奏：同一区块内，工具栏 / 按钮行 / 说明 与 表格 / 卡片 / 空状态 之间统一留 16px；
   页面里很多区块用无类名的 div 包裹多个子块，这里统一补上间距，避免工具栏直接贴住表格 */
:is(.route-view, .modal-body) :is(div:not([class]), section:not(.stack), .panel-body:not(.stack):not(.form-grid)) > :is(.panel, .table-scroll, .admin-toolbar, .control-row, .form-actions, .row, .notice, .empty, p, h2, h3, table, .form-grid, div:not([class]):not(:empty))
  + :is(.panel, .table-scroll, .admin-toolbar, .control-row, .form-actions, .row, .notice, .empty, table, .form-grid, .provider-grid, .mats, div:not([class]):not(:empty)) { margin-top: var(--space-4); }
/* 区块标题与它的说明、内容之间更紧凑，区块与区块之间更松 */
.route-view section.stack { gap: var(--space-3); }
.route-view section.stack + section.stack, .route-view .admin-content > .stack > section + section { margin-top: var(--space-6); }
.route-view section.stack > h2 + p { margin-top: calc(var(--space-1) * -1); }
/* 分页行：数量在左，翻页按钮靠右 */
.route-view .row:has(> .btn.sm + .btn.sm):has(> span.small.muted:first-child) > span.small.muted:first-child { margin-right: auto; }
.link-arrow { font: 500 14px/20px var(--font-sans); color: var(--ink-strong); text-decoration: none; }
.link-arrow:hover { text-decoration: underline; }
.field-link { gap: var(--space-1); }
.field-link .hint { margin: 0; }
.field-link .link-arrow { display: inline-flex; align-items: center; min-height: 32px; align-self: flex-start; }
.page-stack { display: flex; flex-direction: column; gap: var(--space-6); }
.page-stack > .page-head { margin-bottom: var(--space-2); }
.back-link { display: inline-flex; align-items: center; gap: var(--space-1); margin-bottom: var(--space-2); font: 500 14px/20px var(--font-sans); color: var(--ink-muted); text-decoration: none; }
.back-link:hover { color: var(--ink-strong); }
.back-link .icon { width: 16px; height: 16px; }
.tbl .table-message { padding: var(--space-8) var(--space-4); text-align: center; color: var(--ink-muted); font-size: 14px; white-space: normal; }
.tbl .table-message::before { content: ""; display: block; width: 120px; height: 80px; margin: 0 auto var(--space-3);
  background: linear-gradient(var(--ink-strong) 0 0) 96px 56px / 16px 16px no-repeat, linear-gradient(var(--line) 0 0) 0 0 / 52px 80px no-repeat, linear-gradient(var(--line) 0 0) 60px 0 / 52px 48px no-repeat; }
.empty > p { margin: 0; max-width: 320px; }
/* 任何空表格：表头下方显示统一空状态（块面图形 + 说明），不留一条孤立表头 */
table.tbl:has(> tbody:empty)::after { content: "暂无记录"; display: table-caption; caption-side: bottom; padding: 120px var(--space-4) var(--space-8);
  text-align: center; font-size: 14px; line-height: 22px; color: var(--ink-muted);
  background: linear-gradient(var(--ink-strong) 0 0) calc(50% + 48px) 84px / 16px 16px no-repeat,
    linear-gradient(var(--line) 0 0) calc(50% - 34px) 32px / 52px 80px no-repeat, linear-gradient(var(--line) 0 0) calc(50% + 26px) 32px / 52px 48px no-repeat; }
.danger-zone { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-8); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); }
.danger-zone b { font-weight: 500; color: var(--ink-strong); }
.danger-zone p { margin-top: 2px; }

/* ---------- 历史任务卡片 ---------- */
.hist-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-4); }
.hist-card { padding: 0; gap: 0; overflow: hidden; display: flex; flex-direction: column; }
.hist-card:hover { border-color: var(--line-strong); }
.hist-cover { display: block; aspect-ratio: 16 / 9; background: var(--bg-sunken) center / cover no-repeat; border-bottom: 1px solid var(--line); }
.hist-cover:not([style*="background-image"]) { background-image: linear-gradient(var(--ink-strong) 0 0), linear-gradient(var(--line) 0 0), linear-gradient(var(--line) 0 0);
  background-size: 12px 12px, 40px 60px, 40px 36px; background-position: calc(50% + 30px) calc(50% + 24px), calc(50% - 22px) 50%, calc(50% + 22px) calc(50% - 12px); background-repeat: no-repeat; }
.hist-body { display: grid; gap: var(--space-2); padding: var(--space-4) var(--space-4) var(--space-3); }
.hist-title { font: 500 16px/24px var(--font-sans); color: var(--ink-strong); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hist-title:hover { text-decoration: underline; }
.hist-meta { display: flex; align-items: center; gap: var(--space-2); min-width: 0; font-size: 14px; line-height: 22px; color: var(--ink-muted); }
.hist-meta > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hist-stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); margin: var(--space-1) 0 0; padding: var(--space-3) 0; border-block: 1px solid var(--line); }
.hist-stats div + div { border-left: 1px solid var(--line); padding-left: var(--space-3); }
.hist-stats dt { font-size: 12px; line-height: 18px; color: var(--ink-muted); }
.hist-stats dd { margin: 0; font: 500 20px/28px var(--font-num); font-variant-numeric: tabular-nums; color: var(--ink-strong); }
.hist-foot { display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-4) var(--space-4); margin-top: auto; }
.hist-foot .btn.icon-only { width: 32px; height: 32px; min-height: 32px; color: var(--ink-muted); }
.hist-foot .btn.icon-only:hover { color: var(--danger); background: var(--danger-soft); }

/* ---------- 素材库 ---------- */
.lib-grid { gap: var(--space-4); }
.lib-card { display: flex; flex-direction: column; }
.lib-cover { aspect-ratio: 16 / 9; }
.lib-cover-empty { font-size: 12px; line-height: 18px; color: var(--ink-muted); }
.lib-card-title { display: flex; align-items: center; gap: var(--space-2); }
.lib-card-title b { font: 500 16px/24px var(--font-sans); color: var(--ink-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.lib-new { min-height: 0; gap: var(--space-2); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.lib-new .icon { width: 24px; height: 24px; }
.dropzone { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); padding: var(--space-8) var(--space-6); border: 1px dashed var(--line-strong);
  border-radius: var(--radius-md); background: var(--bg-sunken); color: var(--ink-muted); font-size: 14px; line-height: 22px; transition: border-color 120ms, background-color 120ms; }
.dropzone > .icon { width: 24px; height: 24px; color: var(--ink-strong); margin-bottom: var(--space-2); }
.dropzone b { font: 500 16px/24px var(--font-sans); color: var(--ink-strong); margin: 0; }
.dropzone .small { max-width: 48ch; font-size: 12px; line-height: 18px; }
.dropzone:hover, .dropzone.drag { border-color: var(--ink-strong); background: var(--bg); }
.dropzone[aria-disabled=true] { cursor: progress; opacity: .6; }
.upload-item { padding: var(--space-2) 0; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 22px; }
.mat { border-radius: var(--radius-md); }
.mat-thumb .badge { height: 22px; }
.mat-thumb .dur { border-radius: var(--radius-xs); font: 500 12px/18px var(--font-num); }
.mat-del { border-radius: var(--radius-sm); }
.mat-info .n { font-weight: 500; color: var(--ink-strong); }
.tag { height: 22px; padding: 0 6px; }

/* ---------- 脚本卡片 ---------- */
.card-head { gap: var(--space-3); align-items: center; }
.card-idx { width: 28px; height: 28px; border-radius: var(--radius-xs); background: var(--action); color: var(--on-action); font: 500 14px/1 var(--font-num); }
.card-title { font: 500 16px/24px var(--font-sans); color: var(--ink-strong); }
.card-sub { gap: var(--space-1); }
.card-body { gap: var(--space-3); }
.card-foot { gap: var(--space-3); }
.script-text { line-height: 26px; }
.dur-line { font-size: 12px; line-height: 18px; gap: var(--space-2); }
.dur-line b { font-weight: 500; color: var(--ink-strong); }
.dur-line b.off { color: var(--warning); }
.job-line { font-size: 14px; line-height: 22px; }
.result-video { border-radius: var(--radius-md); }

/* ---------- 剪辑台 ---------- */
.editor-top { align-items: flex-end; margin-bottom: var(--space-6); }
.editor-heading { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.editor-heading h1 { overflow-wrap: anywhere; }
.editor-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.notice-details { flex: 1; min-width: 0; }
.notice-details > summary { min-height: 0; font: 400 14px/22px var(--font-sans); color: var(--ink); }
.notice-details > summary:hover { color: var(--ink-strong); }
.notice-details ul { margin: var(--space-2) 0 0; padding-left: 18px; color: var(--ink-muted); }
.notice-details li + li { margin-top: 2px; }
.stage-wrap { gap: var(--space-4); }
.player-bar { padding-top: var(--space-3); border-top: 1px solid var(--line); }
.editor { gap: var(--space-6); }
.stage { border-radius: var(--radius-md); }
.timeline { padding: var(--space-4) var(--space-6) var(--space-6); }
.tl-label { font: 500 12px/18px var(--font-sans); color: var(--ink-muted); }
.tl-row { border-radius: var(--radius-xs); }
.tl-block { border-radius: var(--radius-xs); border-color: var(--line-strong); background: var(--bg-raised); font: 500 12px/18px var(--font-sans); }
.tl-block.sel { background: var(--action); border-color: var(--action); color: var(--on-action); }
.tl-row.sub .tl-block { background: var(--bg-raised); border: 1px solid var(--line); color: var(--ink); }
.tl-head { background: var(--focus); width: 2px; }
.tab-body { padding: var(--space-6); }
.cue { border-radius: var(--radius-sm); }
.cue.on { background: var(--bg-sunken); box-shadow: inset 3px 0 0 var(--ink-strong); }
.cue input { min-height: 36px; padding: 6px 8px; font-size: 14px; }
.shot-item { border-radius: var(--radius-md); border-color: var(--line); }
.shot-item.sel { border-color: var(--ink-strong); background: var(--bg-sunken); box-shadow: inset 0 0 0 1px var(--ink-strong); }
.cand { border: 1px solid var(--line); border-radius: var(--radius-md); }
.cand:hover { border-color: var(--line-strong); }
.cand.cur { border-color: var(--ink-strong); box-shadow: 0 0 0 1px var(--ink-strong); }
.cand.no { opacity: .4; }
.seg-tabs { gap: var(--space-2); }
.seg-editor { gap: var(--space-6); }
.editor-top { gap: var(--space-3); }

@media (max-width: 767px) {
  h1, .page-head h1 { font-size: 24px; line-height: 32px; }
  .panel-head { padding: var(--space-3) var(--space-4); }
  .panel-body { padding: var(--space-4); }
  input[type=text], input[type=search], input[type=email], input[type=password], input[type=number], select, textarea { min-height: 48px; font-size: 16px; }
  .stat-row { grid-template-columns: repeat(2, minmax(0,1fr)); row-gap: var(--space-6); }
  .stat-row > .stat:nth-child(odd) { padding-left: 0; border-left: 0; }
  .stat b { font-size: 24px; line-height: 32px; }
  .toasts { left: var(--space-4); right: var(--space-4); }
}

/* Text fields keep browser-native drag selection and mobile selection menus. */
input, textarea, [contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}
.voice-catalog-toolbar, .voice-bulk-bar, .voice-filter-bar, .voice-select-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-width: 0;
}
.voice-catalog-toolbar > select { flex: 1 1 100px; width: auto; min-width: 90px; }
.voice-catalog-toolbar > input { flex: 2 1 170px; width: auto; min-width: 150px; }
.voice-catalog-toolbar > button, .voice-bulk-bar > button, .voice-select-row > button { flex: 0 0 auto; }
.voice-bulk-bar > select, .voice-bulk-bar > input { flex: 1 1 150px; width: auto; max-width: 240px; min-width: 120px; }
.voice-filter-bar > select { flex: 1 1 85px; width: auto; min-width: 0; }
.voice-select-row > select { flex: 1 1 150px; width: auto; min-width: 0; }
@media (min-width: 1100px) { .voice-catalog-toolbar > select { flex-basis: 0; } }

.voice-catalog-toolbar > select { min-width: 110px; }
.voice-catalog-toolbar > select:first-child { flex-grow: 1.5; min-width: 140px; }
.voice-catalog-toolbar > input { flex: 2 1 150px; min-width: 140px; }
.voice-advanced > .voice-filter-bar { margin-top: var(--space-3); }
.voice-advanced > .voice-filter-bar > select { flex: 0 1 200px; min-width: 140px; }

/* Grid's automatic minimum must not let a wide catalog table expand the dialog. */
.mask { grid-template-columns: minmax(0, 1fr); }
.modal { min-width: 0; max-width: 100%; justify-self: center; }
.modal-body { min-width: 0; }
@media (max-width: 767px) {
  .mask { padding: var(--space-4); }
  .modal-head { padding-inline: var(--space-4); }
  .modal-body { padding-inline: var(--space-4); }
}

.history-module-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-6); }
.history-module { min-width:0; padding-block:var(--space-4); border-bottom:1px solid var(--line); }
.history-module.available { grid-column:1/-1; }
.history-module-heading { display:flex; align-items:center; gap:var(--space-4); margin-bottom:var(--space-4); }
.history-module-heading h2 { display:flex; align-items:center; gap:var(--space-2); font-size:20px; }
.history-module-heading p { margin:var(--space-1) 0 0; }
@media(max-width:767px) { .history-module-grid {grid-template-columns:minmax(0,1fr);} .history-module-heading {flex-wrap:wrap;} }

/* Path navigation keeps its ancestors clickable even when the sidebar is closed. */
.breadcrumbs { flex:1; min-width:0; overflow-x:auto; scrollbar-width:none; }
.breadcrumbs::-webkit-scrollbar { display:none; }
.breadcrumbs ol { display:flex; align-items:center; gap:var(--space-3); margin:0; padding:0; list-style:none; white-space:nowrap; }
.breadcrumbs li { display:flex; align-items:center; gap:var(--space-3); }
.breadcrumbs a { display:inline-flex; align-items:center; min-height:44px; color:var(--ink-muted); text-decoration:none; }
.breadcrumbs a:hover { color:var(--ink-strong); text-decoration:underline; }
.breadcrumbs [aria-current=page] { color:var(--ink-strong); font-weight:500; }
.breadcrumb-separator { color:var(--ink-muted); }
@media(max-width:767px) { .breadcrumbs { flex:1; } .breadcrumbs ol,.breadcrumbs li { gap:var(--space-2); } }

.homepage-editor { display:block; width:100%; min-height:720px; height:calc(100vh - 250px); border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--bg); }

main:has(.homepage-decoration) { padding:0; }
.homepage-decoration { gap:0; }
.homepage-decoration .homepage-editor { height:calc(100vh - 64px); min-height:600px; border:0; border-radius:0; }

/* 图文操作区沿用独立版比例，平台只提供外壳与品牌 tokens。 */
.image-remix{--bg-raised:var(--bg);--ink-muted:var(--muted);min-width:0;font:14px/1.6 var(--font-sans);container-type:inline-size}
.image-remix .workbench{display:grid;grid-template-columns:minmax(330px,420px) minmax(0,1fr);gap:24px;align-items:start}
.image-remix .workflow-editor{display:block;grid-template-columns:none;width:auto;min-width:0;padding:0;max-width:none}
.image-remix .workflow-step{display:block;min-width:0;width:auto}
.image-remix .step-body{display:block;width:auto;padding:0 24px 24px}
.image-remix .steps-action{display:block;width:auto;padding:20px 24px}
.image-remix .field{display:block}.image-remix .field>span{display:block}
.image-remix .page-head{display:flex;align-items:flex-start;gap:24px;margin-bottom:28px}
.image-remix .page-head h1{font-size:28px;line-height:36px}.image-remix .page-head p{font-size:14px;line-height:22px}
.image-remix .tabs{display:flex;flex-wrap:wrap;gap:4px;padding:4px}
.image-remix .tabs button{flex:1;min-width:64px;min-height:40px;padding:8px;font-size:14px;white-space:nowrap}
.image-remix dialog{border:1px solid var(--line);border-radius:24px;background:var(--bg);color:var(--ink);box-shadow:none;max-width:min(900px,calc(100vw - 32px))}
.image-remix .panel{box-shadow:none;border-radius:16px}
.image-remix table{width:100%;border-collapse:collapse}.image-remix table th{height:40px}.image-remix table td{min-height:48px}
.image-remix :is(input,textarea)::selection{background:var(--focus);color:var(--bg)}
@container(max-width:850px){.image-remix .workbench{grid-template-columns:1fr}.image-remix .workflow-results{min-height:400px}}
@media(max-width:640px){.image-remix .page-head{gap:12px}.image-remix .page-head h1{font-size:24px}.image-remix .step-body{padding:0 16px 16px}.image-remix .steps-action{padding:16px}.image-remix .tabs button{font-size:13px}.image-remix .workbench{gap:16px}}

.image-remix fieldset:disabled{opacity:1}.image-remix :is(input,select,textarea):disabled{opacity:1;color:var(--ink-muted);-webkit-text-fill-color:var(--ink-muted);background:var(--bg-sunken)}

/* Video settings use one document scroll and one expanded workflow section. */
/* 设置栏固定在首屏：高度为视口剩余空间（--steps-max 由 workbench.js 计算），步骤在栏内滚动，操作栏贴底常驻 */
.ai-workbench .steps{position:sticky;top:var(--steps-top,164px);align-self:start;height:var(--steps-max,calc(100dvh - 188px));max-height:none;overflow-y:auto;overscroll-behavior:contain}
.ai-workbench .steps-action{position:sticky;bottom:0;margin-top:auto;z-index:2}
.ai-workbench .step-summary{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.image-remix .tabs [aria-selected=true]{background:var(--ink-strong);color:var(--bg);font-weight:700}
.image-remix .workflow-step > .tabs{margin:0 24px 20px}

/* ---------- 品牌紫点睛（BOLUO 设计规范 v7：黑白为主，紫色只落在“一个点”上；主按钮仍为黑色） ---------- */
.nav a.active::before, .nav a[aria-current=page]::before, .image-remix .nav-link.active::before { background: var(--brand); }
.tabs button.on { box-shadow: inset 0 -2px 0 var(--brand); }
.page-tabs a[aria-current=page]::after { background: var(--brand); }
.progress > i { background: var(--brand); }
.spin::after, .dots i { background: var(--brand); }
button .spin::after, .btn .spin::after, button .dots i, .btn .dots i { background: currentColor; }
.back-link:hover, .breadcrumbs a:hover { color: var(--brand); }
.empty::before, .data-table .table-message::before, .hub-empty::before {
  background:
    linear-gradient(var(--brand-logo) 0 0) 96px 56px / 16px 16px no-repeat,
    linear-gradient(var(--line) 0 0) 0 0 / 52px 80px no-repeat,
    linear-gradient(var(--line) 0 0) 60px 0 / 52px 48px no-repeat; }

/* 图文二创空状态：只保留品牌块面图形；在任务网格内占满整行，不显示成灰色小卡片 */
.image-remix .empty { background: transparent; border: 0; border-radius: 0; }
.image-remix .empty h3 { margin: 0; font: 500 16px/24px var(--font-sans); color: var(--ink-strong); }
.image-remix .task-library > .empty, .image-remix .picture-grid > .empty, .image-remix .library-grid > .empty { grid-column: 1 / -1; padding-block: var(--space-12); }

/* 仅供读屏的文字 */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- 账号中心：设置页布局（左侧分区导航 + 右侧分组卡片，参考 Claude 设置页） ---------- */
.settings-page .settings-layout { margin-top: var(--space-2); }
.settings-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--space-12); align-items: start; }
.settings-nav { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 2px; }
.settings-nav a { display: flex; align-items: center; gap: var(--space-3); min-height: 40px; padding: 0 var(--space-3); border-radius: var(--radius-sm); font: 400 14px/20px var(--font-sans); color: var(--ink-muted); text-decoration: none; }
.settings-nav a:hover { background: var(--bg-sunken); color: var(--ink-strong); }
.settings-nav a[aria-current=page] { background: var(--bg-sunken); color: var(--ink-strong); font-weight: 500; }
.settings-nav-icon { display: inline-flex; width: 18px; height: 18px; flex: none; }
.settings-nav-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.settings-nav a[aria-current=page] .settings-nav-icon { color: var(--brand); }
.settings-page .account-details { max-width: 760px; width: 100%; gap: var(--space-6); }
.settings-page .account-details.account-ledger { max-width: none; }

.settings-hero { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-2) 0; }
.settings-avatar { display: grid; place-items: center; width: 56px; height: 56px; flex: none; border-radius: 50%; background: var(--ink-strong); color: var(--bg); font: 500 22px/1 var(--font-sans); }
.settings-hero-text { display: grid; gap: 2px; min-width: 0; }
.settings-hero-text b { font: 600 20px/28px var(--font-sans); color: var(--ink-strong); }
.settings-hero-text span { font-size: 14px; line-height: 20px; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; }

.settings-card { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-raised); overflow: hidden; }
.settings-card-title { margin: 0; padding: var(--space-4) var(--space-6); font: 600 14px/20px var(--font-sans); color: var(--ink-strong); border-bottom: 1px solid var(--line); background: var(--bg-sunken); }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); padding: var(--space-4) var(--space-6); min-height: 72px; }
.setting-row + .setting-row { border-top: 1px solid var(--line); }
.setting-label { min-width: 0; flex: 1 1 auto; }
.setting-title { font: 500 14px/20px var(--font-sans); color: var(--ink-strong); }
.setting-desc { margin: 2px 0 0 !important; font: 400 12px/18px var(--font-sans); color: var(--ink-muted); max-width: 360px; }
.setting-control { flex: none; display: flex; align-items: center; justify-content: flex-end; min-width: 0; max-width: 60%; }
.setting-inline { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.setting-inline input { width: 220px; min-width: 0; height: 36px; min-height: 36px; }
.setting-value { font-size: 14px; line-height: 20px; color: var(--ink); overflow-wrap: anywhere; text-align: right; }
code.setting-value { font: 400 13px/20px var(--font-num); padding: 2px 8px; border-radius: var(--radius-xs); background: var(--bg-sunken); }
.setting-number { font: 500 20px/28px var(--font-num); font-variant-numeric: tabular-nums; color: var(--ink-strong); }
.setting-number.muted { color: var(--ink-muted); }
.setting-row-stack { flex-direction: column; align-items: stretch; gap: var(--space-4); }

/* 主题选择：三张小预览卡 */
.theme-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); max-width: 480px; }
.theme-option { display: grid; gap: var(--space-2); justify-items: start; padding: var(--space-2); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg); color: var(--ink); font: 400 13px/18px var(--font-sans); cursor: pointer; text-align: left; min-height: 0; height: auto; }
.theme-option:hover { border-color: var(--line-strong); }
.theme-option[aria-checked=true] { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); color: var(--ink-strong); font-weight: 500; }
.theme-option > span:last-child { padding: 0 var(--space-1) var(--space-1); }
.theme-preview { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--line); }
.theme-preview i { position: absolute; display: block; border-radius: 2px; }
.theme-preview i:nth-child(1) { left: 0; top: 0; bottom: 0; width: 26%; }
.theme-preview i:nth-child(2) { left: 34%; top: 18%; width: 46%; height: 12%; }
.theme-preview i:nth-child(3) { left: 34%; top: 40%; width: 56%; height: 40%; }
.theme-preview.is-light { background: #ffffff; } .theme-preview.is-light i:nth-child(1) { background: #f5f5f5; } .theme-preview.is-light i:nth-child(2) { background: #171717; } .theme-preview.is-light i:nth-child(3) { background: #ebebeb; }
.theme-preview.is-dark { background: #000000; } .theme-preview.is-dark i:nth-child(1) { background: #1f1f1f; } .theme-preview.is-dark i:nth-child(2) { background: #ededed; } .theme-preview.is-dark i:nth-child(3) { background: #262626; }
.theme-preview.is-system { background: linear-gradient(135deg, #ffffff 50%, #000000 50%); } .theme-preview.is-system i:nth-child(1) { background: #f5f5f5; } .theme-preview.is-system i:nth-child(2) { background: #5d00ff; } .theme-preview.is-system i:nth-child(3) { background: #8a8a8a; }

@container workspace (max-width: 900px) {
  .settings-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .settings-nav { position: static; flex-direction: row; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); gap: var(--space-1); padding-bottom: var(--space-2); }
  .settings-nav a { flex: none; }
}
@container workspace (max-width: 600px) {
  .setting-row { flex-direction: column; align-items: stretch; gap: var(--space-3); padding: var(--space-4); }
  .settings-card-title { padding: var(--space-3) var(--space-4); }
  .setting-control { max-width: none; justify-content: flex-start; }
  .setting-inline { flex: 1; }
  .setting-inline input { flex: 1; width: auto; }
  .setting-value { text-align: left; }
  .theme-options { gap: var(--space-2); }
}

/* 头像图片：账号页与侧栏共用，圆形裁切 */
.settings-avatar.has-image, .account-avatar.has-image { background: var(--bg-sunken); overflow: hidden; padding: 0; }
.settings-avatar img, .account-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.settings-avatar[aria-busy=true] { opacity: .5; }
.btn.btn-text { background: transparent; border-color: transparent; color: var(--ink-muted); }
.btn.btn-text:hover { color: var(--ink-strong); background: var(--bg-sunken); }


/* ---------- 创作中心（0.20.1 完全重做）：以画面为主——工具产品示意 + 真实素材封面，少边框 ---------- */
.st-page { display: flex; flex-direction: column; gap: 48px; }
.st-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.st-head h2 { margin: 0; font: 600 16px/24px var(--font-sans); color: var(--ink-strong); }
.st-head h2 span { margin-left: var(--space-2); font: 400 13px/20px var(--font-sans); color: var(--ink-muted); }
.st-more { font: 500 13px/20px var(--font-sans); color: var(--ink-muted); text-decoration: none; white-space: nowrap; }
.st-more:hover { color: var(--brand); }
.st-note-text { margin: 0; font-size: 14px; color: var(--ink-muted); }

/* 新手引导 */
.st-guide { display: flex; align-items: center; gap: var(--space-6); padding: var(--space-4) var(--space-4) var(--space-4) var(--space-6); border-radius: var(--radius-lg); background: var(--bg-sunken); }
.st-guide-text { display: grid; gap: 2px; flex: none; }
.st-guide-text b { font: 600 14px/20px var(--font-sans); color: var(--ink-strong); }
.st-guide-text span { font-size: 12px; line-height: 18px; color: var(--ink-muted); }
.st-guide-bar { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; flex: 1; min-width: 120px; }
.st-guide-bar li { flex: 1; height: 4px; border-radius: 2px; background: var(--line); }
.st-guide-bar li.done { background: var(--ink-strong); }
.st-guide-bar li.current { background: var(--brand); }

/* 功能卡片：以输入 → 处理 → 输出的技术图示解释能力。 */
.st-card {
  --st-art-surface: var(--bg-sunken); --st-art-line: var(--line); --st-art-ink: var(--ink-strong); --st-art-muted: var(--ink-muted); --st-accent: var(--brand);
  --st-panel: var(--bg-raised); --st-grid: transparent; --st-edge: var(--line);
  position: absolute; left: 50%; top: 0; display: flex; flex-direction: column; width: clamp(300px, 50%, 760px); height: 388px;
  border: 1px solid var(--st-edge); border-radius: var(--radius-xl); overflow: hidden; isolation: isolate;
  background-color: var(--st-panel); background-image: linear-gradient(var(--st-grid) 1px, transparent 1px), linear-gradient(90deg, var(--st-grid) 1px, transparent 1px); background-size: 24px 24px;
  color: var(--st-art-ink); text-decoration: none; cursor: pointer; user-select: none; -webkit-user-select: none;
  transform-style: flat; backface-visibility: hidden;
  transition: transform 280ms cubic-bezier(.23,1,.32,1), opacity 280ms cubic-bezier(.23,1,.32,1);
}
.st-card::before { content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 1px; background: var(--st-accent); opacity: 0; transition: opacity 180ms; }
.st-card.is-active::before { opacity: .8; }
.st-card::after { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--st-panel); opacity: var(--st-dim, 0); pointer-events: none; transition: opacity 280ms cubic-bezier(.23,1,.32,1); }
.st-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 24px 0; }
.st-module-id { color: var(--st-art-muted); font: 11px/20px var(--font-mono); letter-spacing: .08em; }
.st-availability { color: var(--st-art-muted); font: 11px/18px var(--font-sans); border: 1px solid var(--st-art-line); padding: 2px 8px; border-radius: 4px; white-space: nowrap; }
.st-art { flex: 1; min-height: 0; padding: 8px 24px 0; pointer-events: none; }
.st-art svg { display: block; width: 100%; height: 100%; overflow: visible; }
.st-tool-text { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 12px 24px 24px; }
.st-tool-text > div { min-width: 0; }
.st-card h2 { margin: 0; font: 600 28px/36px var(--font-sans); letter-spacing: -.02em; color: var(--st-art-ink); }
.st-card p { margin: 8px 0 0; max-width: 440px; font: 400 14px/22px var(--font-sans); color: var(--st-art-muted); text-wrap: pretty; }
.st-go { display: inline-flex; align-items: center; justify-content: center; gap: 16px; flex: none; min-height: 44px; padding: 0 16px; border: 1px solid transparent; border-radius: 12px; background: var(--st-art-ink); color: var(--st-panel); font: 500 13px/20px var(--font-sans); text-decoration: none; }
.st-go span { font-size: 20px; font-weight: 400; }
.st-go:hover { background: #fff; outline: 3px solid rgba(172,147,255,.2); color: var(--st-panel); }
.st-go:focus-visible { outline: 2px solid var(--st-accent); outline-offset: 4px; }
.st-go:active { transform: scale(.97); }
.st-coming { flex: none; color: var(--st-art-muted); font: 12px/24px var(--font-sans); }
.st-card.is-soon { cursor: default; }
.st-card:not(.is-active) { cursor: pointer; }


/* 素材库与最近创作：封面卡片 */
.st-libs { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: var(--space-6) var(--space-4); }
.st-lib, .st-work { display: grid; gap: 2px; align-content: start; min-width: 0; color: inherit; text-decoration: none; }
.st-lib b, .st-work b { margin-top: var(--space-3); font: 500 14px/20px var(--font-sans); color: var(--ink-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-lib > span:last-child, .st-work > span:last-child { font-size: 12px; line-height: 18px; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-lib:hover b, .st-work:hover b { text-decoration: underline; text-underline-offset: 3px; }
.st-lib-cover, .st-work-cover { position: relative; display: grid; place-items: center; overflow: hidden; border-radius: 14px; background: var(--bg-sunken); color: var(--ink-muted); }
.st-lib-cover { aspect-ratio: 16 / 10; }
.st-work-cover { aspect-ratio: 3 / 4; }
.st-lib-cover img, .st-work-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.st-lib-cover svg, .st-work-cover > svg { width: 22px; height: 22px; }
.st-lib:hover .st-lib-cover, .st-work:hover .st-work-cover { box-shadow: 0 0 0 2px var(--ink-strong); }
.st-lib.is-new .st-lib-cover { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); }
.st-lib.is-new:hover .st-lib-cover { box-shadow: inset 0 0 0 2px var(--brand); color: var(--brand); }
.st-plus { font: 300 32px/1 var(--font-sans); }
.st-works { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: var(--space-6) var(--space-4); }
.st-works .hub-empty { grid-column: 1 / -1; border: 0; }
.st-tag { position: absolute; z-index: 1; left: 10px; top: 10px; padding: 2px 8px; border-radius: 6px; background: rgba(0,0,0,.62); color: #fff; font: 500 12px/18px var(--font-sans); }
.st-tag.is-brand { background: var(--brand-logo); }
.st-tag.is-danger { background: var(--danger); }

@container workspace (max-width: 640px) {
  .st-page { gap: 36px; }
  .st-guide { flex-wrap: wrap; padding: var(--space-4); gap: var(--space-3); }
  .st-guide-bar { flex-basis: 100%; order: 3; }
  .st-libs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-works { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.st-work-plan { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 14px; text-align: left; }
.st-work-plan strong { font: 500 44px/48px var(--font-num); letter-spacing: -.02em; color: var(--ink-strong); }
.st-work-plan small { font-size: 12px; line-height: 18px; color: var(--ink-muted); }
.st-work-plan .st-work-lib { position: absolute; right: 14px; bottom: 14px; inset: auto 14px 14px auto; width: 36px; height: 36px; border-radius: 8px; object-fit: cover; box-shadow: 0 0 0 2px var(--bg-sunken); }
.st-tag.is-quiet { background: var(--bg); color: var(--ink-muted); box-shadow: 0 0 0 1px var(--line); }

/* 功能切换：具名选择器与 3D / 平铺共用同一选中状态。 */
.st-carousel { display: grid; gap: 20px; min-width: 0; }
.st-wheel { position: relative; height: 388px; perspective: 1800px; perspective-origin: 50% 50%; outline: none; touch-action: pan-y; }
.st-wheel:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 24px; }
.st-wheel-track { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
.st-wheel-track > .st-card { pointer-events: auto; }
.st-carousel.is-dragging .st-card, .st-carousel.is-instant .st-card { transition: none; }
.st-carousel.is-dragging .st-wheel { cursor: grabbing; }
.st-card:not(.is-active) .st-go { pointer-events: none; }
.st-wheel-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
.st-wheel-arrows { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.st-wheel-counter { margin-right: 8px; white-space: nowrap; color: var(--ink-muted); font: 12px/20px var(--font-mono); font-variant-numeric: tabular-nums; }
.st-view-switch { justify-self: start; display: inline-flex; padding: 2px; border-radius: 12px; background: var(--bg-sunken); }
.st-view-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 44px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: var(--ink-muted); font: 500 12px/1 var(--font-sans); cursor: pointer; }
.st-view-btn span { display: inline-flex; }
.st-view-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.st-view-btn:hover { color: var(--ink-strong); }
.st-view-btn[aria-pressed=true] { background: var(--bg); color: var(--ink-strong); box-shadow: 0 0 0 1px var(--line); }
.st-tool-select { position: relative; display: flex; align-items: center; min-width: 0; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 14px; }
.st-tool-select button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: none; min-height: 44px; padding: 0 14px; border: 0; border-radius: 10px; background: transparent; color: var(--ink-muted); font: 500 13px/20px var(--font-sans); white-space: nowrap; cursor: pointer; }
.st-selector-number { font: 10px/16px var(--font-mono); color: var(--ink-muted); }
.st-tool-select button:hover { background: var(--bg-sunken); color: var(--ink-strong); }
.st-tool-select button[aria-pressed=true] { color: var(--ink-strong); background: var(--bg-sunken); }
.st-tool-select button[aria-pressed=true] .st-selector-number { color: var(--brand); }
.st-wheel-arrow { display: grid; place-items: center; width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--bg); color: var(--ink-strong); font: 400 18px/1 var(--font-sans); cursor: pointer; }
.st-wheel-arrow:hover { border-color: var(--ink-muted); background: var(--bg-sunken); }
.st-wheel-arrow:active, .st-tool-select button:active { transform: scale(.97); }
.st-wheel-arrow:disabled { opacity: .35; cursor: default; }
.st-wheel-arrow:disabled:hover { border-color: var(--line); background: var(--bg); }
.st-wheel-nav button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.st-carousel.is-flat .st-wheel { height: auto; perspective: none; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; touch-action: pan-x pan-y; }
.st-carousel.is-flat .st-wheel::-webkit-scrollbar { display: none; }
.st-carousel.is-flat .st-wheel-track { position: relative; inset: auto; display: flex; gap: 16px; width: max-content; padding-block: 2px; transform-style: flat; pointer-events: auto; }
.st-carousel.is-flat .st-card { position: relative; left: auto; top: auto; flex: none; width: clamp(320px, 34cqw, 540px); height: 404px; scroll-snap-align: start; transform: none; opacity: 1; }
.st-carousel.is-flat .st-card .st-go { pointer-events: auto; }
.st-carousel.is-flat .st-card:hover { border-color: var(--st-accent); }
.st-carousel.is-flat .st-tool-text { flex-wrap: wrap; gap: 16px; }
.st-carousel.is-flat .st-tool-text > div { flex-basis: 100%; }
@container workspace (max-width: 1120px) {
  .st-wheel-nav { grid-template-columns: 1fr auto; gap: 12px; }
  .st-tool-select { grid-column: 1 / -1; grid-row: 1; justify-content: center; }
  .st-card { width: min(680px, 76%); }
}
@container workspace (max-width: 640px) {
  .st-carousel { gap: 16px; }
  .st-wheel { height: 392px; }
  .st-card { width: 96%; height: 392px; border-radius: 20px; }
  .st-card-meta { padding: 20px 20px 0; }
  .st-module-id { font-size: 10px; letter-spacing: .04em; }
  .st-art { padding: 8px 12px 0; }
  .st-card h2 { font-size: 24px; line-height: 32px; }
  .st-card p { font-size: 13px; line-height: 21px; }
  .st-tool-text { padding: 8px 20px 20px; flex-wrap: wrap; gap: 16px; }
  .st-tool-text > div { flex-basis: 100%; }
  .st-tool-select { overflow-x: auto; justify-content: flex-start; scrollbar-width: thin; }
  .st-tool-select button { padding-inline: 12px; }
  .st-selector-number { display: none; }
  .st-carousel.is-flat .st-card { width: 88cqw; height: 392px; }
}
@media (prefers-reduced-motion: reduce) {
  .st-card, .st-card::before, .st-card::after { transition: none; }
  .st-go:active, .st-wheel-arrow:active, .st-tool-select button:active { transform: none; }
}


/* Six distinct feature demonstrations. Real photographs are compositional materials. */
.st-card { background-image: none; }
.st-art { position: relative; padding: 12px 24px 4px; }
.st-scene { position: relative; width: min(100%, 600px); height: 100%; margin-inline: auto; container-type: inline-size; font: 12px/1.35 var(--font-sans); color: var(--st-art-ink); isolation: isolate; }
.st-scene * { box-sizing: border-box; }
.st-scene strong, .st-scene b, .st-scene small, .st-scene span { line-height: 1.35; }
.st-scene small { font-size: clamp(7px,1.7cqw,10px); }
.st-photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.st-scene-label { display: block; font-size: clamp(8px,1.8cqw,11px); color: var(--st-art-muted); letter-spacing: .04em; }
/* C6: static idle scenes; explicit navigation retains the colleague transition. */
.st-scene, .st-scene .st-anim { animation: none; }


/* Film editing: source contact sheet → preview + actual image sequence. */
.st-remix-sources { position: absolute; inset: 5% auto 5% 2%; width: 27%; }
.st-remix-sources > .st-scene-label { position: absolute; top: 0; }
.st-source { position: absolute; width: 70%; height: 36%; padding: 3px; border-radius: 6px; background: #eff0f4; box-shadow: 0 8px 20px #0005; --scene-animation: st-clip-feed 7.2s ease-in-out infinite; }
.st-source img { border-radius: 3px; }
.st-source small { position: absolute; bottom: 5px; left: 6px; padding: 2px 4px; border-radius: 3px; background: #12141bc4; color: white; }
.st-source-a { top: 16%; left: 1%; transform: rotate(-8deg); --clip-angle: -8deg; }
.st-source-b { top: 37%; left: 28%; transform: rotate(5deg); --clip-angle: 5deg; animation-delay: -2.4s !important; }
.st-source-c { top: 59%; left: 5%; transform: rotate(-3deg); --clip-angle: -3deg; animation-delay: -4.8s !important; }
.st-edit-result { position: absolute; left: 35%; top: 0; width: 62%; height: 100%; padding: 7px; border-radius: 10px; background: var(--st-art-surface); border: 1px solid var(--st-art-line); }
.st-edit-screen { position: relative; height: 69%; overflow: hidden; border-radius: 5px; background: #191b21; }
.st-edit-screen .st-shot { position: absolute; inset: 0; object-position: center 44%; --scene-animation: st-shot-cut 7.2s steps(1,end) infinite; }
.st-edit-screen .st-shot-b { opacity: 0; animation-delay: -4.8s; }
.st-edit-screen .st-shot-c { opacity: 0; animation-delay: -2.4s; object-position: center 22%; }
.st-edit-badge { position: absolute; top: 7px; left: 8px; padding: 3px 6px; border-radius: 4px; background: #1011169c; font-size: clamp(7px,1.5cqw,9px); }
.st-edit-subtitle { position: absolute; bottom: 9px; left: 0; width: 100%; text-align: center; font-size: clamp(8px,1.8cqw,11px); font-weight: 600; text-shadow: 0 1px 4px #000; }
.st-cut-sequence { position: relative; display: grid; grid-template-columns: 1.3fr 1fr 1.3fr 1fr; gap: 3px; height: 19%; margin-top: 5px; }
.st-cut-sequence > span { overflow: hidden; border-radius: 3px; }
.st-playhead { position: absolute; left: 0; top: -3px; height: calc(100% + 16px); width: 2px; background: #c6b7ff; box-shadow: 0 0 4px #c6b7ff60; --scene-animation: st-playhead 7.2s linear infinite; }
.st-playhead::before { content: ''; position: absolute; width: 6px; height: 5px; left: -2px; top: -1px; background: #c6b7ff; border-radius: 1px; }
.st-audio-track { height: 7%; margin-top: 3px; display: flex; align-items: center; justify-content: space-around; background: #7d6aab36; border-radius: 2px; }
.st-audio-track i { width: 2%; height: var(--bar); background: #ad97dc; }

/* Spoken presentation: a single portrait, a script and synchronized voice rhythm. */
.st-script-sheet { position: absolute; left: 3%; top: 15%; width: 43%; height: 77%; padding: 4% 4%; border-radius: 6px; background: #fafafa; color: #21212a; transform: rotate(-3deg); box-shadow: 0 8px 24px #0004; --scene-animation: st-script-settle 8s ease-in-out infinite; }
.st-script-sheet strong { display: block; margin-top: 4%; font-size: clamp(14px,3.5cqw,21px); letter-spacing: -.04em; }
.st-script-copy { margin-top: 4%; font-size: clamp(8px,1.8cqw,11px); color: #747480; line-height: 1.8; }
.st-script-copy > span { padding: 2px 0; background: #ded5ff; color: #544177; --scene-animation: st-script-highlight 4s ease-in-out infinite; }
.st-person-stage { position: absolute; left: 49%; top: 0; width: 36%; height: 100%; overflow: hidden; border-radius: 12px 12px 5px 5px; box-shadow: 0 8px 24px #0004; }
.st-person-stage img { object-position: 50% 32%; }
.st-person-caption { position: absolute; bottom: 13%; inset-inline: 4%; text-align: center; font-size: clamp(7px,1.6cqw,10px); font-weight: 600; text-shadow: 0 1px 3px #000; }
.st-person-corner { position: absolute; top: 7px; right: 7px; font-size: clamp(7px,1.5cqw,9px); padding: 3px 6px; border-radius: 12px; background: #18182180; }
.st-voice-chip { position: absolute; right: 0; bottom: 0; width: 45%; height: 24%; display: flex; align-items: center; gap: 7%; padding: 0 4%; border: 1px solid var(--st-art-line); border-radius: 8px; background: var(--st-art-surface); box-shadow: 0 6px 14px #0004; }
.st-voice-chip > span:last-child { font-size: clamp(7px,1.5cqw,9px); white-space: nowrap; }
.st-voice-wave { display: flex; width: 45%; height: 60%; align-items: center; gap: 3px; }
.st-voice-wave i { flex: 1; height: var(--bar); border-radius: 3px; background: #c7b9f1; transform: scaleY(.7); --scene-animation: st-voice-wave .8s ease-in-out infinite alternate; animation-delay: var(--delay) !important; }

/* Editorial: a full bleed cover and a paper spread, with text assembled line by line. */
.st-editorial-cover { position: absolute; left: 3%; top: 8%; width: 29%; height: 88%; overflow: hidden; transform: rotate(-8deg); box-shadow: 0 7px 24px #0004; --scene-animation: st-cover-reveal 8s ease-in-out infinite; }
.st-editorial-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent,#0007); }
.st-editorial-cover > span, .st-editorial-cover > strong { position: absolute; left: 10%; z-index: 1; }
.st-editorial-cover > span { top: 8%; font-size: clamp(7px,1.5cqw,9px); color: #333; }
.st-editorial-cover > strong { bottom: 10%; font: 600 clamp(13px,3cqw,18px)/1.4 'Songti SC',serif; }
.st-editorial-paper { position: absolute; left: 30%; top: 4%; width: 66%; height: 92%; padding: 3%; background: #fff; color: #222; transform: rotate(2deg); box-shadow: 0 8px 26px #0005; --scene-animation: st-page-assemble 8s ease-in-out infinite; }
.st-editorial-kicker { display: flex; justify-content: space-between; padding-bottom: 3%; font: 500 clamp(7px,1.5cqw,9px)/1.3 var(--font-mono); border-bottom: 1px solid #ddd; }
.st-editorial-kicker span { color: #888; font-family: var(--font-sans); }
.st-editorial-grid { display: grid; grid-template-columns: 47% 1fr; gap: 7%; position: absolute; inset: 23% 5% 14%; margin: 0; }
.st-editorial-photo { position: relative; overflow: hidden; --scene-animation: st-photo-place 8s ease-in-out infinite; }
.st-editorial-photo img { height: 85%; object-position: 35% 50%; }
.st-editorial-photo small { display: block; margin-top: 4%; font-size: clamp(6px,1.4cqw,8px); color: #888; white-space: nowrap; }
.st-editorial-copy > span { display: block; color: #888; font-size: clamp(7px,1.4cqw,8px); }
.st-editorial-copy strong { display: block; margin: 5% 0 8%; font: 600 clamp(13px,3.1cqw,19px)/1.3 'Songti SC',serif; }
.st-copy-line { font-size: clamp(7px,1.45cqw,9px); line-height: 1.8; transform-origin: left; --scene-animation: st-copy-reveal 8s ease-in-out infinite; }
.st-copy-line:nth-of-type(2) { animation-delay: .18s !important; }
.st-copy-line:nth-of-type(3) { animation-delay: .36s !important; }
.st-editorial-footer { position: absolute; bottom: 4%; inset-inline: 5%; display: flex; justify-content: space-between; color: #777; font-size: clamp(6px,1.4cqw,8px); }

/* Product photography: sculptural hero, glass macro and botanical context. */
.st-product-campaign { position: absolute; inset: 0 1%; overflow: hidden; border-radius: 7px; background: #e9edec; color: #27332f; }
.st-product-heading { position: absolute; left: 6%; top: 13%; width: 34%; z-index: 2; }
.st-product-heading > span { font: 500 clamp(7px,1.5cqw,9px)/1.3 var(--font-mono); letter-spacing: .1em; }
.st-product-heading strong { display: block; margin-top: 8%; font: 500 clamp(20px,4.7cqw,28px)/1.2 'Songti SC',serif; }
.st-product-heading > small { display: block; margin-top: 8%; font-size: clamp(7px,1.7cqw,10px); color: #68756e; }
.st-product-hero { position: absolute; right: 0; top: 0; width: 55%; height: 100%; --scene-animation: st-product-light 9s ease-in-out infinite; }
.st-product-hero img { object-fit: contain; object-position: 75% 50%; }
.st-product-hero > span { position: absolute; right: 12px; top: 10px; color: #5f6c66; font-size: clamp(7px,1.5cqw,9px); }
.st-product-detail { position: absolute; overflow: hidden; border-radius: 50%; border: 3px solid #f7f8f7; box-shadow: 0 6px 15px #27332f26; z-index: 3; aspect-ratio: 1; }
.st-product-detail > span { position: absolute; bottom: 9%; left: 0; right: 0; text-align: center; color: #fff; text-shadow: 0 1px 3px #000; font-size: clamp(7px,1.4cqw,9px); }
.st-detail-glass { width: 20%; left: 32%; bottom: 9%; --scene-animation: st-detail-reveal 9s ease-in-out infinite; }
.st-detail-glass img { transform: scale(2.7); object-position: 50% 35%; }
.st-detail-botanical { width: 13%; left: 20%; bottom: 8%; --scene-animation: st-detail-reveal 9s .25s ease-in-out infinite; }
.st-detail-botanical img { transform: scale(3.2); transform-origin: 82% 77%; }
.st-product-spec { position: absolute; left: 6%; bottom: 9%; display: grid; gap: 3px; }
.st-product-spec b { font: 500 clamp(6px,1.4cqw,8px)/1.3 var(--font-mono); color: #6a7c72; }
.st-product-spec > span { font-size: clamp(6px,1.4cqw,8px); color: #6a7c72; }

/* Brand applications: landscape, square and vertical canvases with composed type. */
.st-design-board { position: absolute; overflow: hidden; box-shadow: 0 7px 20px #0005; }
.st-design-wide { top: 6%; left: 3%; width: 61%; height: 58%; background: #f7f7f7; color: #222; display: grid; grid-template-columns: 54% 46%; transform: rotate(-5deg); --scene-animation: st-design-wide 8s ease-in-out infinite; }
.st-design-photo { overflow: hidden; }
.st-design-photo img { object-position: 20% 40%; transform: scale(1.2); }
.st-design-type { align-self: center; padding: 12%; }
.st-design-type small { font: 500 clamp(6px,1.5cqw,9px)/1.3 var(--font-mono); letter-spacing: .02em; }
.st-design-type strong { display: block; margin-block: 12%; white-space: nowrap; font-size: clamp(13px,3.2cqw,19px); letter-spacing: -.03em; }
.st-design-type span { font-size: clamp(6px,1.4cqw,9px); color: #777; }
.st-design-square { left: 31%; top: 41%; width: auto; aspect-ratio: 1; height: 58%; transform: rotate(3deg); --scene-animation: st-design-square 8s ease-in-out infinite; }
.st-design-square::after { content: ''; position: absolute; inset: 0; background: #0002; }
.st-design-square > span { position: absolute; top: 10%; left: 10%; color: white; z-index: 1; font: 400 clamp(10px,2.8cqw,17px)/1.3 var(--font-mono); text-shadow: 0 1px 4px #0004; }
.st-design-square b { font: 500 clamp(10px,2.1cqw,13px)/1.4 var(--font-sans); }
.st-design-square > small { position: absolute; bottom: 9%; left: 10%; color: white; z-index: 1; }
.st-design-tall { right: 8%; top: 0; width: auto; aspect-ratio: 9 / 16; height: 97%; padding: 2%; background: #e9e5f4; color: #3b3450; transform: rotate(6deg); --scene-animation: st-design-tall 8s ease-in-out infinite; }
.st-design-tall > small { font-size: clamp(6px,1.25cqw,8px); letter-spacing: .06em; }
.st-design-tall strong { display: block; margin-top: 7%; font-size: clamp(14px,3.3cqw,20px); line-height: 1.15; }
.st-design-tall > div { position: absolute; inset: 44% 12% 15%; }
.st-design-tall img { object-position: 75% 30%; transform: scale(1.05); }
.st-design-tall > span { position: absolute; left: 12%; bottom: 5%; font-size: clamp(7px,1.4cqw,9px); }
.st-design-palette { position: absolute; left: 4%; bottom: 7%; width: 24%; display: flex; flex-wrap: wrap; gap: 4px; }
.st-design-palette i { width: 20%; aspect-ratio: 1; background: #f5f5f5; }
.st-design-palette i:nth-child(2) { background: #8e9192; }
.st-design-palette i:nth-child(3) { background: #b7a5dc; }
.st-design-palette span { width: 100%; margin-top: 3%; color: #999aa6; font-size: clamp(7px,1.4cqw,9px); }

/* Automation: time trigger → processing queue → a result for human confirmation. */

.st-motion-toggle span { display: flex; }
.st-motion-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.st-motion-toggle .st-motion-play, .is-motion-paused .st-motion-toggle .st-motion-pause { display: none; }
.is-motion-paused .st-motion-toggle .st-motion-play { display: flex; }
@keyframes st-scene-enter { from { opacity: .4; transform: translateY(9px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes st-clip-feed { 0%,20%,100% { transform: rotate(var(--clip-angle)); } 40%,60% { transform: translate(14%,-5%) rotate(0deg); } }
@keyframes st-shot-cut { 0%,33.32% { opacity: 1; } 33.33%,100% { opacity: 0; } }
@keyframes st-playhead { from { transform: translateX(0); } to { transform: translateX(calc(62cqw - 18px)); } }
@keyframes st-script-settle { 0%,100% { transform: rotate(-3deg); } 40%,70% { transform: rotate(-1deg) translateY(-3px); } }
@keyframes st-script-highlight { 0%,100% { opacity: .55; } 40%,70% { opacity: 1; } }
@keyframes st-voice-wave { from { transform: scaleY(.25); } to { transform: scaleY(1); } }
@keyframes st-cover-reveal { 0%,100% { transform: rotate(-8deg); } 40%,70% { transform: translateX(-3%) rotate(-11deg); } }
@keyframes st-page-assemble { 0%,100% { transform: rotate(2deg); } 35%,70% { transform: rotate(0deg) translateY(-3px); } }
@keyframes st-photo-place { 0%,10%,100% { opacity: .55; transform: translateY(5px); } 30%,80% { opacity: 1; transform: none; } }
@keyframes st-copy-reveal { 0%,10%,100% { opacity: .35; transform: translateY(3px); } 35%,80% { opacity: 1; transform: none; } }
@keyframes st-product-light { 0%,100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes st-detail-reveal { 0%,15%,100% { transform: translateY(5px) scale(.93); } 40%,75% { transform: none; } }
@keyframes st-design-wide { 0%,100% { transform: rotate(-5deg); } 40%,75% { transform: translateY(-3px) rotate(0deg); } }
@keyframes st-design-square { 0%,100% { transform: rotate(3deg); } 40%,75% { transform: translate(-8%,3%) rotate(0deg); } }
@keyframes st-design-tall { 0%,100% { transform: rotate(6deg); } 40%,75% { transform: translateX(8%) rotate(0deg); } }
@container workspace (max-width: 640px) { .st-wheel-counter { display: none; } .st-art { padding-inline: 12px; } .st-voice-wave { gap: 2px; } }
@media (prefers-reduced-motion: reduce) { .st-carousel .st-scene .st-anim, .st-carousel .st-scene { animation: none !important; } }

/* ---------- 分区卡片（全站统一，0.25.0）：页面只有一个大标题，分区标题 16px 放在卡片头部 ---------- */
.section-stack { display: grid; gap: var(--space-6); }
.section-card { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-raised); overflow: hidden; }
.section-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-6); min-height: 64px; }
.section-card-body { padding: var(--space-5, 20px) var(--space-6) var(--space-6); border-top: 1px solid var(--line); min-width: 0; }
.section-card-title { display: grid; gap: 2px; min-width: 0; }
.section-card-title h2 { display: flex; align-items: center; gap: var(--space-2); margin: 0; font: 600 16px/24px var(--font-sans); color: var(--ink-strong); }
.section-card-title h2 svg { width: 18px; height: 18px; color: var(--ink-muted); }
.section-card-title p { margin: 0; font-size: 12px; line-height: 18px; color: var(--ink-muted); }
.section-card-count { font-size: 12px; line-height: 18px; color: var(--ink-muted); }
.section-card-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; }
/* 卡片内的小节标题 */
.section-card-body h3 { margin: var(--space-6) 0 var(--space-3); font: 600 14px/20px var(--font-sans); color: var(--ink-strong); }
.section-card-body > h3:first-child { margin-top: 0; }
/* 历史任务：即将开放清单 */
.history-upcoming-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); }
.history-upcoming-list li { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 14px; color: var(--ink-muted); }
.history-upcoming-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-sm); border: 1px dashed var(--line-strong); }
.history-upcoming-icon svg { width: 14px; height: 14px; }
@container workspace (max-width: 640px) {
  .section-card-head { flex-wrap: wrap; padding: var(--space-4); }
  .section-card-body { padding: var(--space-4); }
}
.section-card-body.is-flush { padding: 0; }
.section-card-body.is-flush > .panel, .section-card-body.is-flush > .stack > .panel { border: 0; border-radius: 0; background: transparent; }
.section-card-body.is-flush > .stack { gap: 0; }
.section-card-body.is-flush > :is(p, .empty), .section-card-body.is-flush > .stack > :is(p, .empty) { margin: var(--space-4) var(--space-6); }
.section-card-actions select { width: auto; max-width: 280px; }
/* 后台同页嵌入其他功能配置时的分组标签 */
.admin-group-label { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-4) 0 var(--space-1); font: 600 12px/18px var(--font-sans); color: var(--ink-muted); letter-spacing: .02em; }
.admin-group-label::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ---------- 按钮的品牌紫（0.26.1 起不再在按钮上加紫色小方块）：主按钮悬停浅紫外圈，次按钮悬停紫色描边 ---------- */
.btn.primary:not(:disabled):hover, .image-remix button.primary:not(:disabled):hover { box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 28%, transparent); }
/* 次按钮：悬停描边与文字转为品牌紫 */
.btn:not(.primary):not(.danger):not(.danger-solid):not(.ghost):not(.btn-text):not(:disabled):hover { border-color: var(--brand); color: var(--brand); background: var(--bg); }
/* 选中的选项（如时长、比例）：黑底 + 紫色小点 */

/* 右下角像素粒子：固定在视口右下角、内容之下，不拦截操作 */
#pixelField { position: fixed; right: 0; bottom: 0; z-index: 0; pointer-events: none; }
.shell .content { position: relative; z-index: 1; }
@media print { #pixelField { display: none; } }

/* 两栏工作台首屏等高（0.26.2）：右侧结果区最小高度与左侧设置栏一致，内容多时向下延伸 */
@container workspace (min-width: 641px) {
  .ai-workbench .workbench-results { min-height: var(--steps-max, calc(100dvh - 188px)); display: flex; flex-direction: column; }
  .ai-workbench .workbench-results > .cards { flex: 1; align-content: start; }
  .ai-workbench .workbench-results > .cards:has(> .workbench-empty:only-child) { align-content: stretch; }
}
@container workspace (min-width: 641px) {
  .image-remix .workbench > .workflow-editor { position: sticky; top: var(--ir-top, 164px); align-self: start; height: var(--ir-max, calc(100dvh - 188px)); overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; }
  .image-remix .workbench > .workflow-editor > .steps-action { position: sticky; bottom: 0; margin-top: auto; z-index: 2; border-radius: 0; }
  .image-remix .workbench > .workflow-results { min-height: var(--ir-max, calc(100dvh - 188px)); display: flex; flex-direction: column; }
  .image-remix .workbench > .workflow-results > .result-body { flex: 1; }
}
@container workspace (min-width: 641px) {
  .image-remix .workbench > .workflow-editor { align-items: stretch; }
  .image-remix .workbench > .workflow-editor > * { width: 100%; max-width: none; flex-shrink: 0; box-sizing: border-box; }
}

/* 图文二创表格空状态：与全站空状态一致（块面图形 + 文案，居中） */
.image-remix td.table-empty { padding: var(--space-10) var(--space-4); text-align: center; color: var(--ink-muted); font-size: 14px; }
.image-remix td.table-empty::before { content: ""; display: block; width: 120px; height: 80px; margin: 0 auto var(--space-3);
  background: linear-gradient(var(--brand-logo) 0 0) 96px 56px / 16px 16px no-repeat, linear-gradient(var(--line) 0 0) 0 0 / 52px 80px no-repeat, linear-gradient(var(--line) 0 0) 60px 0 / 52px 48px no-repeat; }
/* 3D 视图：隐藏在两端的卡片不能把页面撑出横向滚动 */
.st-carousel:not(.is-flat) .st-wheel { overflow-x: clip; overflow-y: visible; }

/* Digital human uses shared BOLUO surfaces; only layout is module-specific. */
.dh-workspace { display:grid; grid-template-columns:minmax(300px,32%) minmax(0,1fr); gap:20px; align-items:start; }
.dh-workspace > * { min-width:0; }
.dh-player { display:block; width:100%; max-height:520px; }
.dh-media { min-width:0; }
.dh-media video { height:auto; object-fit:contain; background:transparent; }
.dh-media video.awaiting-frame { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.dh-media-loading,.dh-processing { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; min-height:180px; padding:24px; text-align:center; color:var(--ink-strong); background:var(--surface); border-radius:12px; }
.dh-media-loading[hidden] { display:none; }
.dh-media-loading i,.dh-processing i { display:block; width:88px; height:88px; background:currentColor; mask:url('/assets/brand/bi-loading.svg') center/contain no-repeat; -webkit-mask:url('/assets/brand/bi-loading.svg') center/contain no-repeat; }
.dh-processing i { width:112px; height:112px; }
.dh-upload-status { padding:12px 16px; border:1px solid var(--line); border-left:3px solid currentColor; border-radius:8px; overflow-wrap:anywhere; }
.dh-upload-status[data-state="success"] { color:var(--success,#167346); }
.dh-upload-status[data-state="error"] { color:var(--danger,#b42318); }
@media(prefers-reduced-motion:reduce) { .dh-processing i,.dh-media-loading i { mask-image:url('/assets/brand/boluo-app-icon.svg'); -webkit-mask-image:url('/assets/brand/boluo-app-icon.svg'); } }
.dh-workspace details > .stack { padding-top:16px; }
.dh-workspace summary { cursor:pointer; padding-block:12px; }
@media(max-width:900px) { .dh-workspace { grid-template-columns:minmax(300px,42%) minmax(0,1fr); } }
@media(max-width:640px) { .dh-workspace { grid-template-columns:minmax(0,1fr); } }
/* Digital-human subtitle editor: the overlay shares source-video coordinates. */
.dh-subtitle-fields { border: 0; padding: 0; margin: 0; min-width: 0; }
.dh-subtitle-fields:disabled { opacity: .5; }
.dh-subtitle-preview { position: relative; width: 100%; overflow: hidden; background: #000; border-radius: 12px; }
.dh-subtitle-preview video { display: block; width: 100%; height: 100%; object-fit: contain; }
.dh-subtitle-overlay { position: absolute; width: 80%; transform: translateX(-50%); pointer-events: none; color: #fff; text-align: center; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.2; font-weight: 400; paint-order: stroke fill; }

.dh-four-steps { display:grid; gap:24px; }
.dh-step { scroll-margin-top:80px; min-width:0; }
.dh-step.is-complete { border-color:var(--success); }
.dh-step.is-complete > .panel-head { background:var(--success-soft); }
.dh-step .panel-head h2 { font-size:20px; margin:0; }
.dh-step .panel-head p { margin:4px 0 0; }
.dh-step-number { display:grid; place-items:center; width:32px; height:32px; flex-shrink:0; border:1px solid var(--line-strong); border-radius:50%; }
.dh-step-nav { display:flex; flex-wrap:wrap; list-style:none; gap:12px; padding:0; margin:0 0 24px; }
.dh-step-nav a { display:flex; align-items:center; min-height:44px; padding:8px 16px; border:1px solid var(--line); border-radius:8px; }
.dh-step-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; align-items:start; }
.dh-step-layout > *, .dh-cue-editor { min-width:0; }
.dh-step details > .stack { padding-top:16px; }
.dh-step summary { min-height:44px; padding:12px 0; cursor:pointer; }
.dh-cue-editor .table-scroll { max-height:480px; overflow:auto; }
.dh-cue-editor table { min-width:600px; }
.dh-cue-editor td:nth-child(2), .dh-cue-editor td:nth-child(3) { width:110px; }
.dh-cue-editor input { width:90px; }
.dh-cue-editor textarea { min-width:200px; }
.hist-grid .dh-task-card { display:flex; flex-direction:column; }
.hist-grid:has(> .dh-task-card) { grid-auto-rows:1fr; }
.hist-grid .dh-task-card > .panel-body { flex:1; }
.hist-grid .dh-task-card .dh-media { margin-top:auto; }
.hist-grid .dh-task-card video { width:100%; height:360px; max-height:none; aspect-ratio:auto!important; object-fit:contain; background:var(--bg-sunken); }
.dh-task-card .panel-head { align-items:center; }
@media(max-width:820px) { .dh-step-layout { grid-template-columns:minmax(0,1fr); } }
@media(max-width:480px) { .hist-grid .dh-task-card video { height:300px; } }
@media(max-width:640px) {
  .dh-step > .panel-head { display:grid; grid-template-columns:32px minmax(0,1fr); gap:8px 12px; }
  .dh-step > .panel-head > .badge { grid-column:2; justify-self:start; }
  .dh-step > .panel-head .grow { min-width:0; }
  .dh-step-nav { gap:8px; }
}

/* Independent collapsible digital-human steps; preserve mounted players and fields. */
details.dh-step>summary{cursor:pointer;list-style:none}
details.dh-step>summary::-webkit-details-marker{display:none}
details.dh-step>summary:after{content:'⌄';margin-left:12px;font-size:20px}
details.dh-step:not([open])>summary:after{transform:rotate(-90deg)}
details.dh-step>summary:focus-visible{outline:2px solid var(--focus);outline-offset:-3px}
.dh-timeline-overlay{left:50%;top:82%;font-size:20px;-webkit-text-stroke:1px black}
#dh-step-3 .table-scroll table{min-width:450px}
#dh-step-3 .dh-subtitle-preview{max-width:360px;margin-inline:auto}

details.dh-step>summary.panel-head{padding:20px 24px}
@media(max-width:640px){
 details.dh-step>summary.panel-head{padding:16px;position:relative;padding-right:36px}
 details.dh-step>summary.panel-head:after{position:absolute;right:16px;top:20px;margin:0}
}

.dh-audio-choice{border:1px solid var(--line);border-radius:12px;padding:16px;display:grid;gap:12px}
.dh-audio-choice.is-selected{border-color:var(--success);background:var(--success-soft)}
.dh-audio-choice-head{display:flex;align-items:center;gap:10px;cursor:pointer}
.dh-audio-choice-head input[type=radio]{width:18px;height:18px;flex-shrink:0;accent-color:var(--ink)}
.dh-audio-choice audio{width:100%;max-width:100%}

.dh-generation-layout{align-items:stretch}
.dh-generation-preview{min-width:0;position:relative}
.dh-generation-preview-inner{min-height:440px;justify-content:center}
.dh-generation-preview-inner:has(.dh-processing){position:sticky;top:max(88px,calc(50vh - 240px))}
.dh-generation-preview .dh-processing{min-height:260px}
@media(max-width:820px){.dh-generation-preview-inner{position:static;min-height:280px}}

/* One editing column and one persistent preview, matching the main workbenches. */
.dh-studio-page{container-type:inline-size;font:14px/1.6 var(--font-sans)}
.dh-studio{display:grid;grid-template-columns:minmax(320px,34%) minmax(0,1fr);gap:24px;align-items:start}
.dh-studio>*{min-width:0}
.dh-settings.steps{max-height:none;overflow:visible;position:static}
.dh-settings .step-body{padding:20px 24px;min-width:0}
.dh-settings .step-title{min-height:68px}
.dh-settings .step-summary{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dh-settings .steps-action{position:static;padding:20px 24px;margin:0}
.dh-settings .steps-action .btn{width:100%}
.dh-settings .panel-body{padding:0}
.dh-settings textarea{min-height:140px;resize:vertical}
.dh-settings details:not(.step)>summary{cursor:pointer;min-height:44px;padding-block:12px}
.dh-settings .dh-audio-choice{padding:12px;border-radius:8px;gap:8px}
.dh-settings .dh-audio-choice-head{font-size:13px;flex-wrap:wrap}
.dh-settings .dh-audio-choice-head .badge{margin-left:auto}
.dh-settings .dh-audio-choice.is-selected{border-color:var(--line-strong);background:var(--bg-sunken)}
.dh-settings input[type=file]{max-width:100%}
.dh-results{position:sticky;top:88px;min-width:0;overflow:hidden}
.dh-results>.panel-head{min-height:64px;gap:12px;flex-wrap:wrap}
.dh-results h2{font-size:16px;line-height:24px;margin:0}
.dh-result-steps{display:flex;list-style:none;padding:20px 24px;margin:0;border-bottom:1px solid var(--line);gap:12px}
.dh-result-steps li{flex:1;min-width:0}
.dh-result-steps button{display:flex;align-items:center;gap:8px;min-height:44px;width:100%;padding:0;background:none;border:0;color:var(--muted);font:inherit;text-align:left}
.dh-result-steps button span{display:grid;place-items:center;width:24px;height:24px;border:1px solid var(--line-strong);border-radius:50%;flex:none}
.dh-result-steps button[aria-current]{color:var(--ink-strong);font-weight:600}
.dh-result-steps button[aria-current] span{background:var(--ink-strong);color:var(--bg)}
.dh-result-steps button:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
.dh-results-body{padding:24px;min-height:420px}
.dh-preview-pane[hidden]{display:none}
.dh-preview-pane>.stack:has(>.empty),.dh-preview-pane>.empty{min-height:350px;display:grid;place-items:center}
.dh-results .dh-task-card{border:0;border-radius:0}
.dh-results .dh-task-card>.panel-head{padding:0 0 16px;border:0}
.dh-results .dh-task-card>.panel-body{padding:0}
.dh-results .dh-player{max-height:420px;object-fit:contain;margin-inline:auto}
.dh-results .dh-subtitle-preview{max-width:360px;margin-inline:auto}
.dh-cues{list-style:none;padding:0;margin:0;display:grid;gap:20px}
.dh-cue-row{padding-top:16px;border-top:1px solid var(--line);display:grid;gap:12px}
.dh-cue-row .control-row{justify-content:space-between}
.dh-cue-times{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dh-settings .dh-cue-editor textarea{min-height:64px;min-width:0}
.dh-settings .dh-cue-editor input{width:100%}
@container(max-width:850px){.dh-studio{grid-template-columns:minmax(0,1fr)}.dh-results{position:static}.dh-result-steps{flex-wrap:wrap}.dh-result-steps li{flex:1 1 40%}}
@media(max-width:640px){.dh-studio{gap:16px}.dh-settings .step-body,.dh-settings .steps-action,.dh-results-body{padding:16px}.dh-result-steps{padding:12px 16px}.dh-results-body{min-height:300px}}

.dh-settings.steps{padding:0}
.dh-settings details.step{padding:0;border-bottom:1px solid var(--line)}
.dh-settings details.step>.step-title{list-style:none;cursor:pointer;display:grid;grid-template-columns:22px auto minmax(0,1fr) 16px;align-items:center;gap:8px;padding:16px 20px;margin:0;font-size:14px;line-height:22px}
.dh-settings details.step>.step-title::-webkit-details-marker{display:none}
.dh-settings .step-no{width:22px;height:22px;display:grid;place-items:center;flex:none;border-radius:50%;background:var(--ink);color:var(--bg);font-size:12px}
.dh-settings details.step>.step-title::after{content:'';width:8px;height:8px;border-right:1.5px solid var(--ink-muted);border-bottom:1.5px solid var(--ink-muted);transform:rotate(45deg);justify-self:center}
.dh-settings details.step[open]>.step-title::after{transform:rotate(225deg)}
.dh-settings details.step>.step-title:hover{background:var(--bg-sunken)}
.dh-settings details.step[open] .step-summary{visibility:hidden}
.dh-settings details.step.locked>.step-title{cursor:not-allowed;color:var(--ink-disabled)}
.dh-settings details.step.locked .step-no{background:var(--action-disabled);color:var(--ink-disabled)}
.dh-settings details.step>.step-title:focus-visible{outline:2px solid var(--focus);outline-offset:-3px}

.dh-studio-page>.notice{margin-bottom:24px}
.dh-settings .form-grid{grid-template-columns:minmax(0,1fr)}
.dh-settings details.step{scroll-margin-top:80px}

.dh-voice-control{display:flex;align-items:center;gap:10px;min-width:0}
.dh-voice-control>select{flex:1;min-width:0;width:0}
.dh-voice-control>.dh-audition{display:grid;place-items:center;width:44px;height:44px;min-width:44px;padding:0;border-radius:50%;flex:none}
.dh-audition svg{width:18px;height:18px}
.dh-audition-stop{width:12px;height:12px;border-radius:2px;background:currentColor}

.credential-feedback{padding:14px 16px;border:1px solid var(--line);border-radius:8px;background:var(--bg-sunken);overflow-wrap:anywhere}
.credential-feedback[hidden]{display:none}
.credential-feedback p{margin:0}
.credential-feedback[data-status=failed]{border-color:var(--error)}
.credential-feedback[data-status=passed]{border-color:var(--success)}
/* Compact administration: one configuration list, bounded fields, inline actions. */
.admin-inline-form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px;min-width:0}
.admin-inline-form>.field{flex:0 1 260px;width:260px;max-width:100%;min-width:0;margin:0}
.admin-inline-form>.config-actions{align-self:flex-end;padding-bottom:0}
.config-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.config-actions .btn{white-space:nowrap;margin:0}
.config-summary{max-width:280px;min-width:140px;overflow-wrap:anywhere}
.config-row{cursor:default}
.config-row:hover{background:var(--bg-sunken)}
.config-row:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.credential-status{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:110px;max-width:180px}
.credential-status[data-status=passed] .badge{color:var(--success)}
.credential-status[data-status=failed] .badge{color:var(--error)}
.admin-config-editor.form-grid,.admin-config-editor .form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.admin-config-editor .field{min-width:0;margin:0}
.admin-config-editor .field input,.admin-config-editor .field select{width:100%;min-width:0}
.image-remix .admin-config-editor>.caption{grid-column:1/-1}
.image-remix .admin-inline-form>h2{flex-basis:100%;margin:0}
@media(max-width:640px){
 .admin-inline-form>.field{flex-basis:100%;width:100%}
 .admin-inline-form>.config-actions{width:100%}
 .admin-config-editor.form-grid,.admin-config-editor .form-grid{grid-template-columns:minmax(0,1fr)}
 .config-actions{gap:6px}
}

.config-actions>button:not(.primary){border:1px solid var(--line);border-radius:8px;padding:8px 12px;min-height:44px;background:var(--bg)}

.tbl td .config-actions .btn.sm:not(.primary):not(.danger-solid){border-color:var(--line);background:var(--bg);padding:8px 12px}

/* Preserve the explicit site return and use BL artwork in the retained digital workbench. */
.site-return{margin-left:auto;flex:none;white-space:nowrap}
.mobile-bar .breadcrumbs{min-width:0;overflow:hidden}
.dh-media-loading i,.dh-processing i{background:url(/assets/brand/bl-loading.svg) center/contain no-repeat;mask:none;-webkit-mask:none}


/* Global theme switch stays reachable beside the site return, including on phones. */
.mobile-bar .theme-toggle{margin-left:auto;width:44px;height:44px;min-width:44px;padding:10px;flex:none}
.mobile-bar .theme-toggle svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.mobile-bar .site-return{margin-left:0}

.page-tabs button{position:relative;flex:none;padding:12px 0;min-height:44px;border:0;border-radius:0;background:transparent;color:var(--ink-muted);white-space:nowrap;font:400 14px/20px var(--font-sans)}
.page-tabs button[aria-current=page]{color:var(--ink-strong);font-weight:500}
.page-tabs button[aria-current=page]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--brand)}

/* Five-step oral-video editor: mutually exclusive sources and sentence review. */
.dh-source-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.dh-source-tabs .btn{width:100%;min-height:44px;background:transparent;color:var(--muted);border:1px solid var(--line);border-radius:12px}
.dh-source-tabs .btn[aria-pressed=true]{color:var(--ink-strong);border-color:var(--line-strong);background:var(--bg-sunken);font-weight:600}
.dh-settings .dh-audio-choice{padding:0;border:0;background:transparent}
.dh-settings .dh-audio-choice-head{display:none}
.dh-settings .dh-audio-choice[hidden],.dh-cue-row[hidden]{display:none}
.dh-settings .dh-audio-choice.is-selected{background:transparent}
.dh-copy-preview{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.9;max-width:70ch;min-height:240px}
.dh-cue-navigation{display:flex;align-items:center;justify-content:space-between;gap:12px}
.dh-results .dh-cue-editor textarea{width:100%;min-width:0;min-height:88px;resize:vertical}
.dh-results .dh-cue-times input{width:100%;min-width:0}
.dh-correction{padding-top:20px;border-top:1px solid var(--line)}
.dh-correction h3{margin:0}
.dh-result-steps{gap:8px;padding-inline:20px}
.dh-result-steps button{flex-wrap:wrap;font-size:12px;gap:6px}
@container(max-width:1050px){.dh-result-steps button{flex-direction:column;align-items:flex-start}}
@container(max-width:850px){.dh-result-steps li{flex:1 1 15%}.dh-result-steps button{align-items:center;text-align:center}}
.dh-settings .dh-step-navigation{display:flex;flex-direction:row;gap:12px;align-items:center;justify-content:flex-end}
.dh-settings .dh-step-navigation .btn{width:auto;flex:1;min-width:0}
.dh-settings .dh-step-navigation .btn[hidden]{display:none}
.dh-speed-row,.dh-upload-row{display:flex;align-items:center;gap:10px;min-width:0}
.dh-speed-row input{width:100%;min-width:0;flex:1}
.dh-speed-row .btn,.dh-upload-row>.btn{flex:none;width:auto;white-space:nowrap}
.dh-file-picker{position:relative;display:flex;align-items:center;gap:8px;min-width:0;min-height:44px;flex:1;padding:8px 10px;border:1px dashed var(--line-strong);border-radius:8px;cursor:pointer}
.dh-file-title{flex:none;font-size:13px}
.dh-file-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:var(--muted)}
.dh-file-picker .dh-file-input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;margin:0}
.dh-file-picker:focus-within,.dh-file-picker.is-dragging{outline:2px solid var(--brand);outline-offset:2px}
.dh-file-picker:has(input:disabled){opacity:.6;cursor:wait}
.dh-portrait-poster{display:block;max-width:100%;max-height:420px;width:auto;object-fit:contain;border-radius:12px;margin-inline:auto}
.dh-portrait-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-height:420px;overflow:auto;padding:3px}
.dh-portrait-card{display:flex;flex-direction:column;gap:8px;min-width:0;padding:7px;border:1px solid var(--line);border-radius:12px;color:var(--ink-strong);background:transparent;cursor:pointer;text-align:center;font:inherit}
.dh-portrait-card[aria-pressed=true]{border-color:var(--ink-strong);box-shadow:inset 0 0 0 1px var(--ink-strong)}
.dh-portrait-card:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.dh-portrait-card:disabled{opacity:.5;cursor:default}
.dh-portrait-card>img,.dh-portrait-placeholder{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:7px}
.dh-portrait-placeholder{display:grid;place-items:center;background:var(--bg-sunken);color:var(--muted);font-size:12px}
.dh-portrait-name{font-size:12px;line-height:18px;overflow-wrap:anywhere}
.dh-portrait-expiry{font-size:12px;line-height:18px;white-space:nowrap;color:var(--muted)}
.dh-portrait-head{display:flex;align-items:center;flex-wrap:wrap;gap:12px}
.dh-portrait-head h3{margin:0}
.dh-portrait-more{position:relative}
.dh-portrait-more>summary{list-style:none;cursor:pointer;min-width:36px;text-align:center}
.dh-portrait-more>summary::-webkit-details-marker{display:none}
.dh-portrait-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:10;display:flex;flex-direction:column;gap:4px;padding:6px;border:1px solid var(--line);border-radius:12px;background:var(--bg);box-shadow:0 6px 20px #0002;min-width:120px}
.dh-portrait-menu .btn{white-space:nowrap;justify-content:flex-start}


/* Shared packaging inspector: compact controls independent of generic form grids. */
.packaging-controls .cloud-media-layer-buttons{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.cloud-media-layer-buttons>.btn{flex:1 0 auto;padding-inline:12px}
.cloud-media-layer-buttons>[aria-pressed=true]{background:var(--ink-strong);color:var(--bg)}
.packaging-controls .cloud-media-property-group{border-top:1px solid var(--line);margin-top:12px;padding-top:4px}
.cloud-media-property-group>summary{display:flex;align-items:center;min-height:44px;font-size:14px;font-weight:600;cursor:pointer;list-style:none}
.cloud-media-property-group>summary::after{content:'⌄';margin-left:auto}
.cloud-media-property-group[open]>summary::after{transform:rotate(180deg)}
.cloud-media-property-body{display:grid;gap:10px;padding:4px 0 12px}
.cloud-media-field{display:grid;grid-template-columns:72px minmax(0,1fr);align-items:center;gap:8px;min-width:0;font-size:13px;line-height:20px}
.cloud-media-field>span{color:var(--ink-muted);overflow-wrap:anywhere}
.cloud-media-field>:is(input,select){width:100%;min-width:0;min-height:36px;margin:0;padding:6px 8px;font-size:13px}
.cloud-media-field>input[type=color]{height:36px;padding:4px;cursor:pointer}
.cloud-media-property-pair{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}

.cloud-media-slider-controls{display:grid;grid-template-columns:minmax(0,1fr) 78px;gap:10px;align-items:center;min-width:0}
.cloud-media-slider-controls>input[type=range]{appearance:auto;accent-color:var(--ink-strong);padding:0;min-height:36px;background:transparent;border:0;box-shadow:none}
.cloud-media-inline-options{display:flex;align-items:center;flex-wrap:wrap;gap:10px;min-height:40px}
.cloud-media-inline-options>.cloud-media-field{flex:1;min-width:104px;grid-template-columns:auto minmax(0,1fr)}
.cloud-media-check{display:inline-flex;align-items:center;gap:6px;min-height:36px;font-size:13px;white-space:nowrap;cursor:pointer}
.cloud-media-check>input[type=checkbox]{width:18px;height:18px;min-height:18px;margin:0;accent-color:var(--ink-strong)}
.packaging-controls .packaging-presets{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.packaging-controls .packaging-presets>.btn{flex:1;padding-inline:8px;font-size:12px}
.cloud-media-preview-content{min-width:0;padding:16px 20px;border-top:1px solid var(--line)}
.cloud-media-packaging-content{min-width:0}
.cloud-media-packaging-content>h3{font-size:14px;font-weight:600;margin:0 0 12px}
.cloud-media-content-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:12px;align-items:start}

.cloud-media-logo-content{grid-column:1/-1;display:grid;grid-template-columns:72px minmax(0,1fr);align-items:center;gap:8px;min-width:0;font-size:13px}
.cloud-media-logo-content>span{color:var(--ink-muted)}
.cloud-media-logo-picker{display:flex;gap:8px;align-items:center;min-width:0}
.cloud-media-logo-picker>select{flex:1;min-width:0;width:0}
.cloud-media-logo-upload{position:relative;overflow:hidden;flex:none;cursor:pointer}
.cloud-media-logo-upload>input[type=file]{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;max-width:none}
.cloud-media-logo-upload:focus-within{outline:2px solid var(--focus);outline-offset:2px}
.cloud-media-property-sections [hidden],.cloud-media-content-fields [hidden],.cloud-media-custom-panel>[hidden],.cloud-media-preview-content[hidden]{display:none!important}
@media(pointer:coarse){.cloud-media-field>:is(input,select),.cloud-media-check{min-height:44px}.cloud-media-check>input[type=checkbox]{min-height:18px}}

.packaging-controls .cloud-media-layer-buttons{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.cloud-media-layer-buttons>.btn{min-width:0;padding-inline:4px;font-size:13px}
.cloud-media-layer-pane{display:grid;gap:10px}


/* Desktop workbench: independent inputs/results and one active result view. */
@container (min-width:851px){
 .dh-studio{height:calc(100dvh - var(--dh-top,160px) - 16px);min-height:320px;align-items:stretch;overflow:hidden}
 .dh-studio>.dh-settings{height:100%;min-height:0;max-height:100%;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
 .dh-studio>.dh-results{position:relative;top:auto;height:100%;min-height:0;display:flex;flex-direction:column;overflow:hidden}
 .dh-results>.panel-head,.dh-results>.dh-result-steps{flex-shrink:0}
 .dh-results-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
 .dh-settings .dh-step-navigation{position:sticky;bottom:0;background:var(--bg);z-index:2;border-top:1px solid var(--line)}
}
.dh-results-body{container-type:inline-size;container-name:packaging-preview}
.cloud-media-result-tabs{display:flex;gap:8px;position:sticky;top:-1px;z-index:3;background:var(--bg);padding:4px 0 12px;border-bottom:1px solid var(--line)}
.cloud-media-result-tabs>.btn{flex:1}
.cloud-media-result-tabs>[aria-selected=true]{background:var(--ink-strong);color:var(--bg)}
.cloud-media-result-tabs[hidden],#dh-packaging-preview[hidden],#dh-packaging-final[hidden]{display:none!important}
.cloud-media-preview-layout{display:grid;gap:20px;align-items:start}
.cloud-media-preview-layout.is-portrait{grid-template-columns:minmax(0,1fr) minmax(180px,1fr)}
.cloud-media-preview-layout.is-portrait>.dh-subtitle-preview{position:sticky;top:54px;align-self:start}
.cloud-media-preview-layout.is-portrait>.cloud-media-preview-content{padding:0;border:0;margin:0}
.cloud-media-preview-layout.is-portrait .cloud-media-content-fields{grid-template-columns:minmax(0,1fr)}
@container packaging-preview (max-width:420px){
 .cloud-media-preview-layout.is-portrait{grid-template-columns:minmax(0,1fr)}
 .cloud-media-preview-layout.is-portrait>.dh-subtitle-preview{position:relative;top:auto}
 .cloud-media-preview-layout.is-portrait>.cloud-media-preview-content{padding-top:16px;border-top:1px solid var(--line)}
}
.packaging-hit{cursor:move;touch-action:none;user-select:none;-webkit-user-select:none}
.packaging-hit.is-selected,.packaging-hit:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.cloud-media-property-group{scroll-margin-block:12px}

@media(max-height:620px){
 .dh-studio{height:auto;min-height:0;overflow:visible}
 .dh-studio>.dh-settings,.dh-studio>.dh-results{height:auto;max-height:none;overflow:visible}
 .dh-results-body{overflow:visible}
}

.dh-studio>.dh-settings{scroll-padding-block:12px 88px}

/* Property rows share one label column; units remain inside their numeric control. */
.cloud-media-number{position:relative;display:flex;align-items:center;min-width:0;color:var(--ink)}
.cloud-media-number>input[type=number]{width:100%;min-width:0;height:36px;min-height:36px;padding:6px 24px 6px 8px;font-size:13px;appearance:textfield;-moz-appearance:textfield}
.cloud-media-number>input::-webkit-inner-spin-button,.cloud-media-number>input::-webkit-outer-spin-button{appearance:none;margin:0}
.cloud-media-unit{position:absolute;right:9px;pointer-events:none;font-size:12px;color:var(--ink-muted)}
.cloud-media-format-options{display:flex;gap:6px;align-items:center;flex-wrap:wrap;min-width:0}
.cloud-media-format-button.btn.sm{width:36px;height:36px;min-height:36px;padding:0;font-size:18px}
.cloud-media-format-button[aria-pressed=true]{background:var(--action);color:var(--on-action);border-color:var(--action)}
.cloud-media-format-button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
/* Shared input/action rows: one height for controls, buttons and file actions. */
:is(.row,.control-row,.admin-toolbar,.admin-inline-form,.dh-speed-row,.dh-upload-row,.cloud-media-logo-picker,.voice-select-row,.dh-voice-control,.list-toolbar):has(> :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,.field,.dh-file-picker)):has(> :is(.btn,button,.config-actions)){--inline-control-height:var(--control-md);align-items:flex-end}
:is(.row,.control-row,.admin-toolbar,.admin-inline-form,.dh-speed-row,.dh-upload-row,.cloud-media-logo-picker,.voice-select-row,.dh-voice-control,.list-toolbar):has(> :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,.field,.dh-file-picker)):has(> :is(.btn,button,.config-actions)) > :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,.btn,button,.dh-file-picker),
:is(.row,.control-row,.admin-toolbar,.admin-inline-form,.dh-speed-row,.dh-upload-row,.cloud-media-logo-picker,.voice-select-row,.dh-voice-control,.list-toolbar):has(> :is(input,select,.field)):has(> :is(.btn,button,.config-actions)) > :is(.field,.config-actions) > :is(input,select,.btn,button){height:var(--inline-control-height);min-height:var(--inline-control-height);box-sizing:border-box;margin-block:0}
.cloud-media-logo-picker>.btn{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}
@media(pointer:coarse){.cloud-media-number>input[type=number],.cloud-media-format-button.btn.sm{height:44px;min-height:44px}.cloud-media-format-button.btn.sm{width:44px}}

.cloud-media-preview-content :is(.cloud-media-field,.cloud-media-logo-content){grid-template-columns:56px minmax(0,1fr)}
.cloud-media-preview-layout.is-portrait{grid-template-columns:minmax(120px,.8fr) minmax(250px,1.2fr)}
@container packaging-preview (max-width:420px){.cloud-media-preview-layout.is-portrait{grid-template-columns:minmax(0,1fr)}}

.final-confirm-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,.8fr);gap:24px;align-items:start}
.final-plan-preview{position:sticky;top:0;min-width:0;display:grid;gap:12px}
.final-plan-frame.packaging-demo{width:min(100%,calc(max(220px,100dvh - 410px) * var(--frame-aspect)));height:auto;position:relative;overflow:hidden;margin:0;background:var(--bg-sunken)}
.final-plan-frame>.final-frame-source{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.final-confirmation .cloud-media-content-fields{grid-template-columns:minmax(0,1fr)}
@media(max-width:640px){.final-confirm-layout{grid-template-columns:minmax(0,1fr)}.final-plan-preview{position:relative;max-width:300px;width:100%;margin-inline:auto}}
/* 数字人工作台：顶部统一步骤条，下方左参数、右生成结果 */
.dh-studio{grid-template-rows:auto minmax(0,1fr)}
.dh-stepbar{grid-column:1/-1;position:sticky;top:0;z-index:5;background:var(--bg);border:1px solid var(--line);border-radius:16px}
.dh-stepbar ol{display:flex;list-style:none;margin:0;padding:8px;gap:4px}
.dh-stepbar li{flex:1;min-width:0;display:flex;align-items:center}
.dh-stepbar li+li::before{content:'';flex:0 0 16px;height:1px;background:var(--line-strong);margin-right:4px}
.dh-stepbar button{display:flex;align-items:center;gap:10px;flex:1;min-width:0;min-height:52px;padding:8px 12px;border:0;border-radius:10px;background:none;color:var(--muted);font:inherit;text-align:left;cursor:pointer}
.dh-stepbar button:hover:not(:disabled){background:var(--bg-sunken)}
.dh-stepbar button:disabled{cursor:not-allowed;color:var(--ink-disabled)}
.dh-stepbar button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.dh-stepbar-no{display:grid;place-items:center;flex:none;width:26px;height:26px;border:1px solid var(--line-strong);border-radius:50%;font-size:12px}
.dh-stepbar-text{display:flex;flex-direction:column;min-width:0}
.dh-stepbar-text b{font-weight:500;font-size:13px;line-height:20px;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.dh-stepbar-state{font-size:12px;line-height:18px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dh-stepbar button[data-complete] .dh-stepbar-no{border-color:var(--ink-strong);color:var(--ink-strong)}
.dh-stepbar button[aria-current]{background:var(--bg-sunken);color:var(--ink-strong)}
.dh-stepbar button[aria-current] b{font-weight:600}
.dh-stepbar button[aria-current] .dh-stepbar-no{background:var(--ink-strong);border-color:var(--ink-strong);color:var(--bg)}
.dh-settings-head{gap:10px;min-height:64px;align-items:center}
.dh-settings-head h2{font-size:16px;line-height:24px;margin:0}
.dh-settings-step{font-size:12px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:2px 10px;white-space:nowrap}
.dh-settings details.step{border-bottom:0}
.dh-settings details.step[hidden]{display:none}
.dh-settings details.step>summary.step-title{display:none}
@container (min-width:851px){
 .dh-studio>.dh-settings{display:flex;flex-direction:column}
 .dh-settings-head{position:sticky;top:0;z-index:2;background:var(--bg);flex-shrink:0}
 .dh-settings .dh-step-navigation{margin-top:auto}
}
@container (max-width:1050px){.dh-stepbar li+li::before{display:none}.dh-stepbar button{flex-direction:column;align-items:center;text-align:center;gap:4px;padding:8px 4px}.dh-stepbar-text{align-items:center}}
@container (max-width:640px){.dh-stepbar-state{display:none}.dh-stepbar-text b{font-size:12px}.dh-stepbar ol{padding:4px;gap:2px}}
@media(max-width:767px){.dh-stepbar{top:var(--size-appbar,56px)}}
/* 标题与步骤同一行，压缩顶部高度 */
main:has(.dh-studio-page){padding-top:16px}
.dh-studio{gap:16px 24px}
.dh-stepbar{display:flex;align-items:center;gap:8px;padding-left:16px}
.dh-stepbar-title{flex:none;margin:0;padding-right:16px;border-right:1px solid var(--line);font:600 18px/26px var(--font-sans);white-space:nowrap}
.dh-stepbar>nav{flex:1;min-width:0}
.dh-stepbar ol{padding:4px}
.dh-stepbar button{min-height:44px;padding:4px 10px}
.dh-stepbar-no{width:24px;height:24px}
.dh-settings-head,.dh-results>.panel-head{min-height:52px}
@container (max-width:1050px){.dh-stepbar button{flex-direction:row;text-align:left;gap:8px}.dh-stepbar-text{align-items:flex-start}.dh-stepbar-state{display:none}}
@container (max-width:850px){.dh-stepbar{flex-wrap:wrap;padding:8px 8px 0 12px}.dh-stepbar-title{border:0;font-size:16px}.dh-stepbar>nav{flex-basis:100%}.dh-stepbar button{flex-direction:column;align-items:center;text-align:center;gap:2px;padding:4px 2px}.dh-stepbar-text{align-items:center}.dh-stepbar-text b{font-size:12px}}
.dh-stepbar-title{display:flex;align-items:center;gap:8px}
.dh-stepbar-icon{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:8px;background:var(--bg-sunken);border:1px solid var(--line)}
.dh-stepbar-icon .icon{width:16px;height:16px}
@container (max-width:850px){.dh-stepbar-icon{width:26px;height:26px}}
.dh-stepbar-icon svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* 账号中心弹窗：左侧分区、右侧内容独立滚动 */
.modal.wide:has(.account-modal){width:min(1040px,100%);height:min(760px,calc(100dvh - 48px))}
.modal:has(.account-modal) .modal-body{flex:1;min-height:0;display:flex;padding-bottom:0}
.account-modal.settings-layout{flex:1;min-height:0;grid-template-columns:184px minmax(0,1fr);gap:var(--space-6);align-items:stretch}
.account-modal .settings-nav{position:static;padding-bottom:var(--space-6)}
.account-modal .account-details{min-height:0;overflow-y:auto;overscroll-behavior:contain;gap:var(--space-5,20px);padding:0 4px var(--space-6) 0;outline:none}
.account-modal .account-details.account-ledger{gap:var(--space-4)}
.account-modal .settings-card{background:var(--bg)}
@media(max-width:767px){
 .modal.wide:has(.account-modal){height:calc(100dvh - 32px)}
 .account-modal.settings-layout{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:var(--space-3)}
 .account-modal .settings-nav{flex-direction:row;overflow-x:auto;padding-bottom:0;gap:4px}
 .account-modal .settings-nav a{flex:none;min-height:36px;white-space:nowrap}
}
.account-modal .account-details>*{flex-shrink:0}

/* 数字人：每步主操作固定在左栏底部；原片选择旁为刷新图标 */
.dh-settings .dh-step-navigation>*{flex:1;min-width:0}
.dh-settings .dh-step-navigation>.stack>.btn,.dh-settings .dh-step-navigation>.btn{width:100%}
.dh-source-row{display:flex;align-items:center;gap:8px;min-width:0}
.dh-source-row select{flex:1;min-width:0}
.dh-source-refresh{flex:none;width:44px;height:44px;padding:0;display:grid;place-items:center}
.dh-source-refresh .icon{width:18px;height:18px}

/* 滚动条默认隐藏，滚动时显示（由 main.js 给正在滚动的元素加 is-scrolling） */
*{scrollbar-width:thin;scrollbar-color:transparent transparent}
.is-scrolling{scrollbar-color:var(--line-strong) transparent}
*::-webkit-scrollbar{width:8px;height:8px;background:transparent}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:transparent;border-radius:8px}
.is-scrolling::-webkit-scrollbar-thumb{background:var(--line-strong)}
.is-scrolling::-webkit-scrollbar-thumb:hover{background:var(--ink-muted)}
/* 数字人第 3 步：形象列表全部展开，随左栏整体滚动 */
.dh-settings .dh-portrait-grid{max-height:none;overflow:visible}
.dh-source-card{display:grid;gap:2px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--bg-sunken)}
.dh-source-name{font-size:14px;line-height:22px;color:var(--ink-strong);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 第 4 步：左栏完整分句列表 */
.dh-settings .dh-correction{padding-top:16px;border-top:1px solid var(--line)}
.dh-correction-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.dh-correction-head h3{font-size:14px;margin:0}
.dh-settings .dh-cues{gap:6px}
.dh-settings .dh-cue-row{display:grid;grid-template-columns:24px minmax(0,1fr) 32px;align-items:start;gap:8px;padding:8px;border:1px solid var(--line);border-radius:10px;border-top:1px solid var(--line)}
.dh-settings .dh-cue-row.is-active{border-color:var(--ink-strong);background:var(--bg-sunken)}
.dh-cue-index{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1px solid var(--line-strong);font-size:12px;color:var(--muted)}
.dh-cue-row.is-active .dh-cue-index{background:var(--ink-strong);border-color:var(--ink-strong);color:var(--bg)}
.dh-cue-main{display:grid;gap:6px;min-width:0}
.dh-settings .dh-cue-editor .dh-cue-main textarea{min-height:36px;width:100%;resize:vertical}
.dh-settings .dh-cue-times{display:flex;align-items:center;gap:6px}
.dh-settings .dh-cue-editor .dh-cue-times input{width:84px;min-height:32px;padding:4px 8px;font-size:13px}
.dh-cue-play{width:32px;height:32px;padding:0;font-size:11px}
/* 右栏：分句时间条 */
.dh-cue-timeline{position:relative;height:14px;margin:4px auto 0;max-width:560px;width:100%;border-radius:7px;background:var(--bg-sunken)}
.dh-cue-timeline.is-off,.dh-cue-timeline[hidden]{display:none}
.dh-cue-bar{position:absolute;top:2px;height:10px;padding:0;border:0;border-radius:5px;background:var(--line-strong);cursor:pointer}
.dh-cue-bar:hover{background:var(--ink-muted)}
.dh-cue-bar[aria-pressed=true]{background:var(--ink-strong)}
.dh-cue-bar:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
/* 预览只放画面，居中；第 5 步本条内容在左栏 */
.cloud-media-preview-layout.is-single{grid-template-columns:minmax(0,1fr);justify-items:center}
.dh-settings .cloud-media-preview-content{padding:16px 0 0;margin:0;border-top:1px solid var(--line)}
.dh-settings .cloud-media-preview-content .cloud-media-content-fields{grid-template-columns:minmax(0,1fr)}

/* 字幕分句行（重做）：平铺列表，当前句左侧竖线标记 */
.dh-settings .dh-cues{gap:0;border-top:1px solid var(--line)}
.dh-settings .dh-cue-row{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;padding:10px 12px 12px 14px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;position:relative;cursor:pointer}
.dh-settings .dh-cue-row:hover{background:var(--bg-sunken)}
.dh-settings .dh-cue-row.is-active{border-color:var(--line);background:var(--bg-sunken)}
.dh-settings .dh-cue-row.is-active::before{content:'';position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:2px;background:var(--brand,var(--ink-strong))}
.dh-cue-head{display:flex;align-items:center;gap:10px;min-height:28px}
.dh-settings .dh-cue-index{width:auto;height:auto;border:0;border-radius:0;background:none;font:500 12px/1 var(--font-mono,ui-monospace,monospace);color:var(--muted);letter-spacing:.02em}
.dh-settings .dh-cue-row.is-active .dh-cue-index{background:none;color:var(--ink-strong)}
.dh-settings .dh-cue-times{display:flex;align-items:center;gap:4px;margin-right:auto}
.dh-settings .dh-cue-editor .dh-cue-times input{width:64px;min-height:26px;height:26px;padding:0 6px;border:1px solid transparent;border-radius:6px;background:transparent;font:12px/1 var(--font-mono,ui-monospace,monospace);color:var(--muted);text-align:center;-moz-appearance:textfield}
.dh-settings .dh-cue-editor .dh-cue-times input::-webkit-outer-spin-button,.dh-settings .dh-cue-editor .dh-cue-times input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.dh-settings .dh-cue-row:hover .dh-cue-times input,.dh-settings .dh-cue-row.is-active .dh-cue-times input{border-color:var(--line);color:var(--ink)}
.dh-settings .dh-cue-editor .dh-cue-times input:focus{border-color:var(--line-strong);background:var(--bg);color:var(--ink-strong);outline:none}
.dh-cue-arrow,.dh-cue-unit{font-size:11px;color:var(--muted)}
.dh-settings .dh-cue-play{display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--muted);cursor:pointer;flex:none}
.dh-settings .dh-cue-play .icon{width:14px;height:14px;fill:currentColor}
.dh-settings .dh-cue-play:hover,.dh-settings .dh-cue-row.is-active .dh-cue-play{background:var(--ink-strong);color:var(--bg)}
.dh-settings .dh-cue-play:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.dh-settings .dh-cue-editor textarea.dh-cue-text{display:block;width:100%;min-height:0;min-width:0;padding:4px 8px;margin-left:-8px;width:calc(100% + 8px);border:1px solid transparent;border-radius:8px;background:transparent;font-size:14px;line-height:22px;color:var(--ink-strong);resize:none;overflow:hidden;field-sizing:content}
.dh-settings .dh-cue-row:hover textarea.dh-cue-text{border-color:var(--line)}
.dh-settings .dh-cue-editor textarea.dh-cue-text:focus{border-color:var(--line-strong);background:var(--bg);outline:none}

/* 字幕列表：一句一行（序号 · 文字 · 秒数），点击跳转并就地编辑 */
.dh-settings .dh-cues{gap:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--bg-sunken)}
.dh-settings .dh-cue-row{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:start;gap:10px;padding:0 14px;min-height:48px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;cursor:pointer;outline:none}
.dh-settings .dh-cue-row:last-child{border-bottom:0}
.dh-settings .dh-cue-row::before{display:none}
.dh-settings .dh-cue-row:hover{background:color-mix(in srgb,var(--ink-strong) 4%,transparent)}
.dh-settings .dh-cue-row:focus-visible{box-shadow:inset 0 0 0 2px var(--focus)}
.dh-settings .dh-cue-row.is-active{background:color-mix(in srgb,var(--ink-strong) 6%,transparent)}
.dh-settings .dh-cue-index{padding-top:14px;font:400 13px/20px var(--font-sans);color:var(--muted);text-align:left}
.dh-cue-body{min-width:0;padding:14px 0}
.dh-cue-label{display:block;font-size:14px;line-height:20px;color:var(--ink-muted,var(--muted));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dh-settings .dh-cue-row:hover .dh-cue-label{color:var(--ink)}
.dh-settings .dh-cue-row.is-active .dh-cue-label,.dh-settings .dh-cue-row.is-active .dh-cue-index{color:var(--brand,var(--ink-strong));font-weight:500}
.dh-cue-time{padding-top:14px;font:12px/20px var(--font-mono,ui-monospace,monospace);color:var(--muted);white-space:nowrap}
.dh-cue-edit{display:none;gap:8px}
.dh-settings .dh-cue-row.is-editing{cursor:default;background:var(--bg)}
.dh-settings .dh-cue-row.is-editing .dh-cue-label{display:none}
.dh-settings .dh-cue-row.is-editing .dh-cue-edit{display:grid}
.dh-settings .dh-cue-row.is-editing .dh-cue-body{padding:8px 0 10px}
.dh-settings .dh-cue-row.is-editing .dh-cue-index{padding-top:14px}
.dh-settings .dh-cue-row.is-editing .dh-cue-time{visibility:hidden}
.dh-settings .dh-cue-editor textarea.dh-cue-text{margin:0;width:100%;padding:5px 8px;border:1px solid var(--line-strong);border-radius:8px;background:var(--bg-raised,var(--bg));font-size:14px;line-height:22px;color:var(--ink-strong);resize:none;overflow:hidden;field-sizing:content}
.dh-settings .dh-cue-editor textarea.dh-cue-text:focus{border-color:var(--brand,var(--ink-strong));outline:none}
.dh-settings .dh-cue-row.is-editing .dh-cue-times input{border-color:var(--line);color:var(--ink)}
.dh-settings .dh-cue-editor textarea.dh-cue-text{field-sizing:fixed;width:100%;box-sizing:border-box}
.dh-settings .dh-cue-row.is-editing .dh-cue-time{display:none}
.dh-settings .dh-cue-row.is-editing .dh-cue-body{grid-column:2/4}
.dh-settings .dh-cue-editor textarea.dh-cue-text{min-width:0;max-width:100%}

/* 创作工作台统一版式（AI 智能剪辑 / 图文二创）：顶部步骤条，左参数、右结果 */
main:has(.studio-workbench){padding-top:16px}
.studio-workbench{row-gap:16px}
.studio-workbench>.studio-stepbar{grid-column:1/-1;position:sticky;top:0;z-index:6}
.studio-stepbar-link{flex:none;margin-right:8px;white-space:nowrap}
.studio-settings{padding:0}
.studio-settings>.studio-settings-head{position:sticky;top:0;z-index:3;background:var(--bg);border-bottom:1px solid var(--line)}
.studio-settings details.step{border:0;padding:0}
.studio-settings details.step[hidden]{display:none}
.studio-settings details.step>summary.step-title{display:none}
.studio-settings details.step>.step-body{padding:20px 24px}
.studio-flow-stage{flex:none;white-space:nowrap}
@container (max-width:850px){.studio-stepbar-link{display:none}}
.studio-workbench .workflow:has(>.workflow-hint[hidden]){display:none}
.studio-settings details.workflow-step{border:0}
.studio-settings details.workflow-step[hidden]{display:none}
.studio-settings details.workflow-step>summary{display:none}
.image-remix .studio-settings>.studio-settings-head{flex-shrink:0}
.dh-stepbar>.studio-stepbar-link{flex:none;display:inline-flex;align-items:center;gap:4px;min-height:32px;height:32px;padding:0 12px;margin-right:8px;border:1px solid var(--line-strong);border-radius:8px;background:transparent;color:var(--ink-strong);font-size:13px;text-decoration:none;cursor:pointer}
.dh-stepbar>.studio-stepbar-link:hover{background:var(--bg-sunken)}
.dh-stepbar>.studio-stepbar-link svg{width:14px;height:14px}

/* 数字人结果区：预览/成片切换收进标题栏，做成紧凑分段按钮 */
.dh-results>.panel-head .cloud-media-result-tabs{position:static;display:inline-flex;gap:2px;padding:3px;margin:0;border:1px solid var(--line);border-radius:10px;background:var(--bg-sunken)}
.dh-results>.panel-head .cloud-media-result-tabs[hidden]{display:none!important}
.dh-results>.panel-head .cloud-media-result-tabs .btn{flex:none;width:auto;min-height:28px;height:28px;padding:0 14px;border:0;border-radius:7px;background:transparent;color:var(--muted);font-size:13px;box-shadow:none}
.dh-results>.panel-head .cloud-media-result-tabs .btn[aria-selected=true]{background:var(--bg);color:var(--ink-strong);font-weight:500;box-shadow:0 0 0 1px var(--line-strong)}
/* 滚动条已改为隐藏式，不再预留固定宽度的空白槽 */
@container (min-width:851px){.dh-studio>.dh-settings,.dh-results-body{scrollbar-gutter:auto}}

/* 数字人第 5 步只看包装预览（不再显示预览/成片切换）；第 6 步成片界面 */
.dh-results .cloud-media-result-tabs{display:none!important}
.dh-studio.is-final{grid-template-columns:minmax(0,1fr)}
.dh-studio.is-final>.dh-settings{display:none}
.dh-studio.is-final .dh-results-body{padding:28px 32px}
.dh-studio.is-final #dh-packaging-final>.dh-task-card>.panel-head{padding:0 0 20px;border:0}
.dh-studio.is-final #dh-packaging-final>.dh-task-card>.panel-head b{font-size:18px;line-height:26px}
/* 左视频、右介绍 */
.dh-studio.is-final #dh-packaging-final>.dh-task-card>.panel-body{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(260px,1fr);column-gap:40px;row-gap:10px;align-content:start;grid-auto-flow:row dense}
.dh-studio.is-final #dh-packaging-final>.dh-task-card>.panel-body>*{grid-column:2;margin:0}
.dh-studio.is-final #dh-packaging-final>.dh-task-card>.panel-body>.dh-media,.dh-studio.is-final #dh-packaging-final>.dh-task-card>.panel-body>.dh-processing{grid-column:1;grid-row:1/span 12;align-self:start}
.dh-studio.is-final #dh-packaging-final .dh-media .dh-player{width:100%;max-height:calc(100dvh - var(--dh-top,160px) - 140px);object-fit:contain;border-radius:12px;background:#000}
.dh-studio.is-final #dh-packaging-final .form-actions{padding-top:8px}
.dh-studio.is-final #dh-packaging-final .form-actions .btn{min-height:40px}
@container (max-width:850px){.dh-studio.is-final #dh-packaging-final>.dh-task-card>.panel-body{grid-template-columns:minmax(0,1fr)}.dh-studio.is-final #dh-packaging-final>.dh-task-card>.panel-body>*{grid-column:1}.dh-studio.is-final #dh-packaging-final>.dh-task-card>.panel-body>.dh-media{grid-row:auto}}
.dh-studio.is-final #dh-packaging-final .dh-media .dh-player{max-height:calc(100dvh - 300px);min-height:240px}

/* 第 6 步成片界面（重做）：首屏内完整显示，不需要滚动 */
.dh-studio.is-final>.dh-results>.panel-head{display:none}
.dh-studio.is-final .dh-results-body{display:flex;flex-direction:column;padding:24px;overflow:hidden}
.dh-studio.is-final .dh-results-body>.dh-preview-pane:not([hidden]){flex:1;min-height:0;display:flex;flex-direction:column}
.dh-studio.is-final #dh-packaging-final{flex:1;min-height:0;display:flex}
.dh-studio.is-final #dh-packaging-final>*{flex:1;min-height:0}
.dh-final-card{display:grid;grid-template-columns:auto minmax(300px,1fr);gap:40px;height:100%;min-height:0;align-items:stretch}
.dh-final-media{height:100%;min-height:0;display:flex;align-items:center;justify-content:center;background:var(--bg-sunken);border-radius:16px;padding:12px;min-width:260px}
.dh-final-video{display:block;height:100%;max-height:100%;width:auto;max-width:min(56vw,100%);border-radius:10px;background:#000;object-fit:contain}
.dh-final-empty{color:var(--muted);font-size:14px;padding:24px;text-align:center}
.dh-final-info{display:flex;flex-direction:column;gap:20px;min-width:0;padding:8px 0;overflow-y:auto}
.dh-final-title{display:flex;align-items:flex-start;gap:12px}
.dh-final-title h2{margin:0;flex:1;min-width:0;font:600 24px/32px var(--font-sans);color:var(--ink-strong);overflow-wrap:anywhere}
.dh-final-title .badge{flex:none;margin-top:4px}
.dh-final-status{margin:0;font-size:16px;line-height:24px;font-weight:500}
.dh-final-status.is-ok{color:var(--success,#3fb950)}
.dh-final-status.is-pending{color:var(--ink-strong)}
.dh-final-status.is-error{color:var(--danger,#f85149)}
.dh-final-meta{margin:0;display:grid;gap:0;border-top:1px solid var(--line)}
.dh-final-row{display:grid;grid-template-columns:88px minmax(0,1fr);gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.dh-final-row dt{font-size:14px;line-height:22px;color:var(--muted)}
.dh-final-row dd{margin:0;font-size:15px;line-height:22px;color:var(--ink-strong);overflow-wrap:anywhere}
.dh-final-actions{display:flex;flex-wrap:wrap;gap:10px}
.dh-final-actions .btn{min-height:44px;padding:0 20px;font-size:15px}
.dh-final-note{margin:0;font-size:13px;line-height:20px;color:var(--muted)}
.dh-final-card .dh-processing{height:100%}
@container (max-width:850px){
 .dh-studio.is-final .dh-results-body{overflow:auto}
 .dh-final-card{grid-template-columns:minmax(0,1fr);height:auto;gap:20px}
 .dh-final-media{height:auto;max-height:60vh}
 .dh-final-video{height:auto;max-height:56vh;max-width:100%}
}
main:has(.dh-studio-page){padding-bottom:16px}
.dh-final-info{max-width:640px;justify-content:center}
.dh-final-title h2{font-size:clamp(22px,1.6vw,30px);line-height:1.35}
.dh-final-status{font-size:clamp(15px,1.05vw,18px)}
.dh-final-row{grid-template-columns:clamp(80px,6vw,104px) minmax(0,1fr);padding:clamp(10px,.8vw,14px) 0}
.dh-final-row dt{font-size:clamp(14px,.9vw,16px)}
.dh-final-row dd{font-size:clamp(15px,1vw,17px)}
.dh-final-actions .btn{font-size:clamp(14px,.95vw,16px);min-height:clamp(42px,2.8vw,48px)}
.dh-final-note{font-size:clamp(13px,.85vw,14px)}

/* 第 5 步视频包装（重做）：两块分区 + 大模板卡片 + 紧凑切换 */
#dh-step-5>.step-body{gap:0;padding-top:4px}
.dh-pack-section{display:grid;gap:14px;padding:18px 0;border-bottom:1px solid var(--line)}
.dh-pack-section:last-child{border-bottom:0}
.dh-pack-head{display:flex;align-items:center;gap:10px}
.dh-pack-head h3{margin:0;font:600 15px/22px var(--font-sans);color:var(--ink-strong)}
.dh-pack-head .caption{margin-left:auto}
.dh-pack-no{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--ink-strong);color:var(--bg);font-size:12px;font-weight:600;flex:none}
/* 标题栏右侧显示当前模板；隐藏重复的“视频包装”字样 */
#dh-step-5 .packaging-controls{gap:14px}
#dh-step-5 .cloud-media-packaging-heading{position:absolute;right:0;top:-38px;margin:0}
#dh-step-5 .dh-pack-section{position:relative}
#dh-step-5 .cloud-media-packaging-heading b{display:none}
#dh-step-5 .cloud-media-packaging-heading>:not(b){font-size:12px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:2px 10px}
/* 选择模板 / 自定义模板：紧凑分段切换 */
#dh-step-5 .cloud-media-packaging-modes{display:grid;grid-template-columns:1fr 1fr;gap:2px;padding:3px;border:1px solid var(--line);border-radius:10px;background:var(--bg-sunken)}
#dh-step-5 .cloud-media-packaging-modes .btn{min-height:32px;height:32px;border:0;border-radius:7px;background:transparent;color:var(--muted);font-size:13px;box-shadow:none;width:100%}
#dh-step-5 .cloud-media-packaging-modes .btn[aria-pressed=true]{background:var(--bg);color:var(--ink-strong);font-weight:500;box-shadow:0 0 0 1px var(--line-strong)}
/* 模板：两列大卡片，选中描边 + 勾 */
#dh-step-5 .cloud-media-template-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-height:none;overflow:visible;padding:2px}
#dh-step-5 .cloud-media-template-card{position:relative;display:grid;gap:8px;padding:6px 6px 10px;border:1px solid var(--line);border-radius:14px;background:var(--bg-sunken);color:var(--ink);font-size:13px;cursor:pointer;transition:border-color .15s,transform .15s}
#dh-step-5 .cloud-media-template-card:hover{border-color:var(--line-strong)}
#dh-step-5 .cloud-media-template-card[aria-pressed=true]{border-color:var(--brand,var(--ink-strong));box-shadow:0 0 0 1px var(--brand,var(--ink-strong));color:var(--ink-strong);font-weight:500}
#dh-step-5 .cloud-media-template-card[aria-pressed=true]::after{content:'✓';position:absolute;top:12px;right:12px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--brand,var(--ink-strong));color:#fff;font-size:12px;font-weight:700}
#dh-step-5 .cloud-media-template-card>:first-child{border-radius:9px;overflow:hidden;aspect-ratio:3/4;width:100%}
#dh-step-5 .cloud-media-template-card img{width:100%;height:100%;object-fit:cover}
#dh-step-5 .cloud-media-template-free{display:grid;place-content:center;gap:4px;aspect-ratio:3/4;border:1.5px dashed var(--line-strong);border-radius:9px;background:transparent;text-align:center}
#dh-step-5 .cloud-media-template-free span{font-size:28px;font-weight:600;color:var(--ink-strong)}
#dh-step-5 .cloud-media-template-free small{font-size:12px;color:var(--muted)}
/* 本条内容：标签在上，输入框撑满 */
#dh-step-5 .cloud-media-packaging-content>h3{display:none}
#dh-step-5 .cloud-media-preview-content{padding:0;border:0}
#dh-step-5 .cloud-media-content-fields{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
#dh-step-5 .cloud-media-content-fields :is(.cloud-media-field,.cloud-media-logo-content){display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
#dh-step-5 .cloud-media-content-fields :is(.cloud-media-field,.cloud-media-logo-content)>span:first-child{font-size:13px;line-height:20px;color:var(--ink)}
#dh-step-5 .cloud-media-content-fields input{width:100%;min-height:40px}
#dh-step-5 .cloud-media-logo-picker{display:flex;gap:8px}
#dh-step-5 .cloud-media-logo-picker select{flex:1;min-width:0;min-height:40px}
#dh-step-5 .cloud-media-logo-upload{min-height:40px;padding:0 16px}
/* 右侧预览说明 */
.dh-pack-hint{margin:12px auto 0;max-width:420px;text-align:center;font-size:13px;line-height:20px;color:var(--muted)}
#dh-step-5 .cloud-media-packaging-heading{top:17px}
#dh-step-5 .cloud-media-layer-buttons{display:grid;gap:2px;padding:3px;border:1px solid var(--line);border-radius:10px;background:var(--bg-sunken)}
#dh-step-5 .cloud-media-layer-buttons .btn{min-height:30px;height:30px;border:0;border-radius:7px;background:transparent;color:var(--muted);font-size:13px;box-shadow:none;width:100%;padding:0 4px}
#dh-step-5 .cloud-media-layer-buttons .btn[aria-pressed=true]{background:var(--bg);color:var(--ink-strong);font-weight:500;box-shadow:0 0 0 1px var(--line-strong)}

/* 第 5 步右侧：视频预览在左，本条内容在右 */
.dh-pack-stage.is-pack{display:grid;grid-template-columns:minmax(0,auto) minmax(280px,1fr);gap:32px;align-items:start}
.dh-pack-stage.is-pack .dh-pack-preview{min-width:0}
.dh-pack-stage.is-pack .cloud-media-preview-layout.is-single{justify-items:start}
.dh-pack-stage.is-pack .dh-pack-hint{text-align:left;margin-left:0}
.dh-pack-content{padding:4px 0 0;border:0;max-width:480px}
.dh-pack-content[hidden]{display:none}
.dh-pack-content .cloud-media-preview-content{padding:0;margin:0;border:0}
.dh-pack-content .cloud-media-packaging-content>h3{display:none}
.dh-pack-content .cloud-media-content-fields{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.dh-pack-content .cloud-media-content-fields :is(.cloud-media-field,.cloud-media-logo-content){display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.dh-pack-content .cloud-media-content-fields :is(.cloud-media-field,.cloud-media-logo-content)>span:first-child{font-size:13px;line-height:20px;color:var(--ink)}
.dh-pack-content .cloud-media-content-fields input{width:100%;min-height:40px}
.dh-pack-content .cloud-media-logo-picker{display:flex;gap:8px}
.dh-pack-content .cloud-media-logo-picker select{flex:1;min-width:0;min-height:40px}
.dh-pack-content .cloud-media-logo-upload{min-height:40px;padding:0 16px}
@container packaging-preview (max-width:600px){.dh-pack-stage.is-pack{grid-template-columns:minmax(0,1fr)}.dh-pack-stage.is-pack .cloud-media-preview-layout.is-single{justify-items:center}}

.dh-pack-stage.is-pack{grid-template-columns:auto minmax(240px,1fr);gap:28px}

/* 第 6 步生成中：整块 loading 页面 */
.dh-final-card.is-loading{display:flex;align-items:center;justify-content:center;height:100%;border-radius:16px;background:var(--bg-sunken)}
.dh-final-loading{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:32px;max-width:520px}
.dh-final-loading i{display:block;width:160px;height:160px;margin-bottom:12px;background:url(/assets/brand/bl-loading.svg) center/contain no-repeat}
.dh-final-loading b{font:600 clamp(20px,1.6vw,26px)/1.3 var(--font-sans);color:var(--ink-strong)}
.dh-final-loading-stage{font-size:clamp(15px,1vw,17px);color:var(--ink);padding:4px 14px;border:1px solid var(--line);border-radius:999px}
.dh-final-loading-name{font-size:14px;color:var(--muted)}
.dh-final-loading .caption{font-size:13px;margin-top:8px}
@media(prefers-reduced-motion:reduce){.dh-final-loading i{background-image:url(/assets/brand/boluo-app-icon.svg)}}
@container (max-width:850px){.dh-final-card.is-loading{min-height:60vh}}

/* 图标品牌紫点缀：主体跟随文字色，局部（.a 描边 / .af 填充）用提亮后的品牌紫 */
:root{--icon-accent:color-mix(in srgb,var(--brand,#5d00ff) 72%,#ffffff)}
svg .a{stroke:var(--icon-accent)}
svg .af{fill:var(--icon-accent);stroke:none}
.nav a .icon,.settings-nav-icon svg,.dh-stepbar-icon svg{stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.nav a.active .icon,.nav a[aria-current] .icon{color:var(--ink-strong)}
.dh-stepbar-icon{background:color-mix(in srgb,var(--brand,#5d00ff) 14%,var(--bg-sunken));border-color:color-mix(in srgb,var(--brand,#5d00ff) 35%,var(--line))}

/* 第 5 步模板：一排 4 个 */
#dh-step-5 .cloud-media-template-gallery{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
#dh-step-5 .cloud-media-template-card{padding:4px 4px 8px;gap:6px;font-size:12px;border-radius:10px}
#dh-step-5 .cloud-media-template-card>:first-child{border-radius:7px}
#dh-step-5 .cloud-media-template-card[aria-pressed=true]::after{top:8px;right:8px;width:18px;height:18px;font-size:10px}
#dh-step-5 .cloud-media-template-free span{font-size:20px}
#dh-step-5 .cloud-media-template-free small{font-size:10px;line-height:1.3;padding:0 4px}

/* 第 6 步成片信息卡片（品牌字标） */
.dh-final-info{max-width:none;justify-content:center;align-items:flex-start;padding:0;overflow:visible}
.dh-final-sheet{position:relative;width:100%;max-width:560px;display:grid;gap:22px;padding:28px;border:1px solid var(--line);border-radius:20px;background:var(--bg);overflow:hidden}
.dh-final-sheet::before{content:'';position:absolute;inset:0 0 auto;height:3px;background:var(--brand,#5d00ff)}
.dh-final-brand{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:18px;border-bottom:1px dashed var(--line)}
.dh-final-logo.brand-wordmark{width:96px;height:28px;color:var(--ink-strong)}
.dh-final-kind{font-size:12px;line-height:18px;padding:3px 10px;border-radius:999px;color:var(--icon-accent,#b794ff);background:color-mix(in srgb,var(--brand,#5d00ff) 16%,transparent);border:1px solid color-mix(in srgb,var(--brand,#5d00ff) 40%,transparent)}
.dh-final-headline{display:grid;gap:10px}
.dh-final-headline h2{margin:0;font:600 clamp(22px,1.6vw,28px)/1.3 var(--font-sans);color:var(--ink-strong);overflow-wrap:anywhere}
.dh-final-status{display:inline-flex;align-items:center;gap:8px;width:max-content;font-size:14px;line-height:20px;font-weight:500;padding:4px 12px 4px 10px;border-radius:999px;background:var(--bg-sunken)}
.dh-final-status i{width:8px;height:8px;border-radius:50%;background:currentColor}
.dh-final-status.is-ok{color:var(--success,#3fb950)}
.dh-final-status.is-pending{color:var(--ink-strong)}
.dh-final-status.is-error{color:var(--danger,#f85149)}
.dh-final-tiles{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.dh-final-tile{display:grid;gap:4px;padding:12px 14px;border-radius:12px;background:var(--bg-sunken);min-width:0}
.dh-final-tile.is-wide{grid-column:1/-1}
.dh-final-tile dt{font-size:12px;line-height:18px;color:var(--muted)}
.dh-final-tile dd{margin:0;font-size:clamp(15px,1vw,17px);line-height:24px;font-weight:500;color:var(--ink-strong);overflow-wrap:anywhere}
.dh-final-actions{display:grid;gap:10px}
.dh-final-actions .btn{min-height:44px;font-size:15px;justify-content:center}
.dh-final-main{width:100%;gap:8px}
.dh-final-main .icon{width:18px;height:18px}
.dh-final-secondary{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:10px}
.dh-final-secondary .btn{width:100%}
.dh-final-foot{display:grid;gap:6px;padding-top:16px;border-top:1px dashed var(--line)}
.dh-final-foot p{margin:0;font-size:13px;line-height:20px;color:var(--muted)}
.dh-final-sign{font-size:12px!important;letter-spacing:.04em}
.dh-final-info{justify-content:flex-start;overflow-y:auto;max-height:100%;overscroll-behavior:contain}
.dh-final-sheet{margin:auto 0}
@media (max-height:820px){
 .dh-final-sheet{gap:14px;padding:20px}
 .dh-final-brand{padding-bottom:12px}
 .dh-final-logo.brand-wordmark{width:80px;height:24px}
 .dh-final-headline{gap:6px}
 .dh-final-headline h2{font-size:22px}
 .dh-final-tiles{gap:8px}
 .dh-final-tile{padding:8px 12px;gap:2px}
 .dh-final-tile dd{font-size:15px;line-height:22px}
 .dh-final-actions{gap:8px}
 .dh-final-actions .btn{min-height:40px}
 .dh-final-foot{padding-top:10px}
 .dh-final-sign{display:none}
}
@media (max-height:760px){
 .dh-studio.is-final .dh-results-body{padding:16px 20px}
 .dh-final-sheet{gap:12px;padding:16px 18px}
 .dh-final-headline h2{font-size:20px}
 .dh-final-tile{padding:7px 12px}
 .dh-final-tile dd{font-size:14px;line-height:20px}
 .dh-final-actions .btn{min-height:38px;font-size:14px}
 .dh-final-foot{padding-top:8px}
 .dh-final-foot p{font-size:12px;line-height:18px}
}

/* 数字人历史记录：竖屏左右、横屏上下 */
.dh-hist-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,520px),1fr));gap:16px;align-items:start}
.dh-hcard{display:grid;gap:18px;padding:16px;border:1px solid var(--line);border-radius:18px;background:var(--bg-raised,var(--surface));position:relative;overflow:hidden}
.dh-hcard::before{content:'';position:absolute;inset:0 0 auto;height:2px;background:var(--brand,#5d00ff);opacity:.8}
.dh-hcard.is-portrait{grid-template-columns:minmax(150px,200px) minmax(0,1fr);align-items:start}
.dh-hcard.is-landscape{grid-template-columns:minmax(0,1fr)}
.dh-hcard-media{border-radius:12px;overflow:hidden;background:#000;display:flex;align-items:center;justify-content:center;min-height:120px}
.dh-hcard.is-portrait .dh-hcard-media{aspect-ratio:9/16}
.dh-hcard.is-landscape .dh-hcard-media{aspect-ratio:16/9}
.dh-hcard-video{display:block;width:100%;height:100%;object-fit:contain;background:#000}
.dh-hcard-media .dh-processing{min-height:0;height:100%;width:100%;background:var(--bg-sunken);padding:12px}
.dh-hcard-media .dh-processing i{width:72px;height:72px}
.dh-hcard-empty{color:var(--muted);font-size:13px;padding:16px;text-align:center}
.dh-hcard-info{display:grid;gap:12px;align-content:start;min-width:0}
.dh-hcard-head{display:flex;align-items:flex-start;gap:8px}
.dh-hcard-title{display:flex;flex-wrap:wrap;align-items:center;gap:8px;flex:1;min-width:0}
.dh-hcard-title h3{margin:0;font:600 17px/24px var(--font-sans);color:var(--ink-strong);overflow-wrap:anywhere}
.dh-hcard-remove{flex:none;width:32px;height:32px;min-height:32px;color:var(--muted)}
.dh-hcard-remove:hover{color:var(--danger,#f85149)}
.dh-hcard .dh-final-status{font-size:13px;padding:3px 10px 3px 8px}
.dh-hcard .dh-final-tiles{gap:8px}
.dh-hcard .dh-final-tile{padding:8px 12px;gap:2px}
.dh-hcard .dh-final-tile dd{font-size:14px;line-height:20px}
.dh-hcard-actions{display:flex;flex-wrap:wrap;gap:8px}
.dh-hcard-actions .btn{min-height:36px;padding:0 14px;font-size:13px;gap:6px}
.dh-hcard-actions .btn .icon{width:15px;height:15px}
.dh-hcard-note{margin:0;font-size:12px;line-height:18px;color:var(--muted)}
@media(max-width:560px){.dh-hcard.is-portrait{grid-template-columns:minmax(0,1fr)}.dh-hcard.is-portrait .dh-hcard-media{max-height:60vh}}
/* 历史卡片操作：一整条，左下载组、右编辑 */
.dh-hcard-actions{display:flex;flex-wrap:nowrap;align-items:center;gap:8px;padding:6px;border:1px solid var(--line);border-radius:12px;background:var(--bg-sunken)}
.dh-hcard-downloads{display:flex;align-items:center;gap:2px;min-width:0}
.dh-hcard-dl-label{display:inline-flex;align-items:center;gap:4px;padding:0 8px 0 6px;font-size:12px;color:var(--muted);white-space:nowrap}
.dh-hcard-dl-label .icon{width:14px;height:14px}
.dh-hcard-downloads .btn{min-height:32px;height:32px;padding:0 12px;font-size:13px;border-radius:8px;background:var(--bg);border:1px solid var(--line);white-space:nowrap}
.dh-hcard-downloads .btn:hover{border-color:var(--line-strong)}
.dh-hcard-edit{display:flex;gap:6px;margin-left:auto;flex:none}
.dh-hcard-edit .btn{min-height:32px;height:32px;padding:0 14px;font-size:13px;border-radius:8px;white-space:nowrap}
@container (max-width:380px){.dh-hcard-dl-label{display:none}}

/* 数字人历史记录顶部工具栏 */
main:has(.dh-hist-page){padding-top:16px}
.dh-hist-page{display:grid;gap:16px}
.dh-hbar{justify-content:space-between;gap:16px;padding:10px 12px 10px 14px;flex-wrap:wrap}
.dh-hbar-title{display:flex;align-items:center;gap:12px;min-width:0}
.dh-hbar-title .dh-stepbar-icon{width:36px;height:36px;border-radius:10px}
.dh-hbar-title .dh-stepbar-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.dh-hbar-title h1{display:flex;align-items:center;gap:10px;margin:0;font:600 18px/26px var(--font-sans);color:var(--ink-strong)}
.dh-hbar-title p{margin:0;font-size:12px;line-height:18px;color:var(--muted)}
.dh-hbar-count{font-size:12px;font-weight:500;line-height:18px;padding:1px 9px;border-radius:999px;color:var(--icon-accent,#b794ff);background:color-mix(in srgb,var(--brand,#5d00ff) 16%,transparent);border:1px solid color-mix(in srgb,var(--brand,#5d00ff) 40%,transparent)}
.dh-hbar-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-left:auto}
.dh-hbar-status{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:10px;background:var(--bg-sunken)}
.dh-hbar-status button{flex:none;min-height:30px;padding:0 14px;border:0;border-radius:7px;background:transparent;color:var(--muted);font:13px/1 var(--font-sans);cursor:pointer;white-space:nowrap}
.dh-hbar-status button:hover{color:var(--ink-strong)}
.dh-hbar-status button[aria-pressed=true]{background:var(--bg);color:var(--ink-strong);font-weight:500;box-shadow:0 0 0 1px var(--line-strong)}
.dh-hbar-search{display:flex;align-items:center;gap:8px;height:38px;width:240px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg-sunken);cursor:text}
.dh-hbar-search:focus-within{border-color:var(--line-strong)}
.dh-hbar-search svg{flex:none;width:16px;height:16px;fill:none;stroke:var(--muted);stroke-width:1.8;stroke-linecap:round}
.dh-hbar-search input{flex:1;min-width:0;height:100%;padding:0;border:0;background:transparent;color:var(--ink-strong);font-size:13px;outline:none;box-shadow:none}
.dh-hbar-refresh{width:38px;height:38px;min-height:38px;border-radius:10px}
.dh-hist-page>p.small[hidden]{display:none}
.dh-hist-pager[hidden]{display:none}
@media(max-width:900px){.dh-hbar-tools{margin-left:0;width:100%}.dh-hbar-search{flex:1;width:auto}}

/* 全站页面标题：统一为卡片式工具栏（图标 + 标题/说明 + 右侧操作），与数字人历史记录一致 */
main:has(.page-head){padding-top:16px}
.page-head{display:flex;align-items:center;flex-wrap:wrap;gap:12px 16px;margin:0 0 16px;padding:10px 14px;border:1px solid var(--line);border-radius:16px;background:var(--bg)}
.page-head>.grow,.page-head>div:not([class]){flex:1;min-width:0;display:grid;gap:2px}
.page-head h1{margin:0;font:600 18px/26px var(--font-sans);color:var(--ink-strong)}
.page-head p{margin:0;max-width:none;font-size:12px;line-height:18px;color:var(--muted)}
.page-head .back-link{font-size:12px;line-height:18px;color:var(--muted)}
.page-head>:not(.grow):not(.page-head-icon):not(div:not([class])){flex:none}
.page-head .btn{min-height:36px}
.page-head .form-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0}
.page-head input[type=search],.page-head .form-actions input{min-height:36px}
.page-head-icon{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:10px;color:var(--ink-strong);background:color-mix(in srgb,var(--brand,#5d00ff) 14%,var(--bg-sunken));border:1px solid color-mix(in srgb,var(--brand,#5d00ff) 35%,var(--line))}
.page-head-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* 图文二创模块自带页面结构 */
.image-remix .page-head{margin-bottom:16px}
.image-remix .page-head>div:not([class]) h1{font-size:18px}
@media(max-width:640px){.page-head{padding:10px 12px}.page-head>:not(.grow):not(.page-head-icon){width:100%}}

/* 筛选栏并入标题横条 */
.page-head>.page-head-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 0 auto;padding:0;border:0;background:none}
.page-head>.page-head-tools input:not([type=checkbox]),.page-head>.page-head-tools select{min-height:36px;height:36px}
.page-head>.page-head-tools input[type=search],.page-head>.page-head-tools input[type=text]{width:220px}
.page-head>.page-head-tools button,.page-head>.page-head-tools .btn{min-height:36px;height:36px}
@media(max-width:900px){.page-head>.page-head-tools{margin-left:0;width:100%}.page-head>.page-head-tools input[type=search],.page-head>.page-head-tools input[type=text]{flex:1;width:auto}}
/* 分页栏固定在页面最底部 */
:has(>.list-pager){display:flex;flex-direction:column;min-height:calc(100dvh - var(--size-appbar,56px) - 48px)}
.list-pager{margin-top:auto!important;padding-top:16px;border-top:1px solid var(--line)}

/* 窄设置栏保留缩略图与完整模板名，宽栏再增加列数。 */
#dh-step-5 .cloud-media-template-gallery{grid-template-columns:repeat(auto-fit,minmax(96px,1fr))}
#dh-step-5 .cloud-media-template-card>span:last-child{white-space:nowrap;font-size:12px}

.voice-select-row{flex-wrap:nowrap}
.voice-select-row>select{flex:1 1 0;width:0}
@media(max-width:767px){
 .dh-stepbar:not(.dh-hbar){display:grid;grid-template-columns:minmax(0,1fr) auto;padding:12px 8px 4px;gap:8px}
 .dh-stepbar:not(.dh-hbar)>.dh-stepbar-title{border:0;padding:0 4px;grid-column:1;grid-row:1;min-width:0}
 .dh-stepbar:not(.dh-hbar)>nav{grid-column:1/-1;grid-row:2;overflow-x:auto;overscroll-behavior-inline:contain}
 .dh-stepbar:not(.dh-hbar)>nav ol{width:max-content;min-width:100%;padding:4px;gap:4px}
 .dh-stepbar:not(.dh-hbar) li{flex:0 0 auto}
 .dh-stepbar:not(.dh-hbar) li+li::before{display:none}
 .dh-stepbar:not(.dh-hbar) li>button{min-width:108px;min-height:48px;flex-direction:row;justify-content:center;gap:6px;padding:8px;white-space:nowrap}
 .dh-stepbar:not(.dh-hbar) .dh-stepbar-state{display:none}
 .dh-stepbar:not(.dh-hbar)>.btn{grid-column:2;grid-row:1;min-height:36px;height:36px;margin:0;padding:0 10px;white-space:nowrap}
}

@media(max-width:767px){.dh-stepbar:not(.dh-hbar)>.btn{display:inline-flex;flex-direction:row;align-items:center;gap:4px}.dh-stepbar:not(.dh-hbar)>.btn svg{flex:none}}
.dh-pack-stage.is-pack.is-landscape{grid-template-columns:minmax(0,1fr)}
.dh-pack-stage.is-pack.is-landscape .dh-pack-content{max-width:none}
.dh-pack-stage.is-pack.is-landscape .cloud-media-content-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:767px){.dh-pack-stage.is-pack.is-landscape .cloud-media-content-fields{grid-template-columns:minmax(0,1fr)}}

.workbench-materials{padding:24px;min-width:0}
.workbench-material-head{display:flex;gap:12px;align-items:center;margin-bottom:20px}
.workbench-material-head p{margin:4px 0 0}
.workbench-materials .mats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:16px}
.workbench-materials .mat{min-width:0;overflow:hidden}
.workbench-materials .mat-thumb{position:relative;aspect-ratio:16/9;background:var(--bg-sunken)}
.workbench-materials .mat-thumb>img{width:100%;height:100%;object-fit:cover;display:block}
.workbench-materials .mat-info .n{overflow-wrap:anywhere}
.workbench-materials .form-actions{display:flex;justify-content:space-between;gap:8px;margin-top:12px}
.workbench-materials .empty{grid-column:1/-1}
.workbench-duration{display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px;align-items:start}
.workbench-duration>b{padding-top:10px;white-space:nowrap}
.duration-options{display:flex;flex-wrap:wrap;gap:8px}
.duration-options .chip{min-height:44px;white-space:nowrap}
@media(max-width:767px){.workbench-materials{padding:16px}.workbench-duration{grid-template-columns:64px minmax(0,1fr)}}

.material-library-intro{margin:8px 0 0;color:var(--ink-muted);font-size:13px;line-height:1.6;overflow-wrap:anywhere;white-space:pre-wrap}
.hist-card .hist-cover.hist-stage-cover{position:relative;isolation:isolate;overflow:hidden;background:var(--bg-sunken);background-image:none}
.hist-cover-image{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;display:block}
.hist-stage-content{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:24px;color:var(--ink-strong)}
.hist-stage-number{font-size:12px;font-weight:500;letter-spacing:.04em}
.hist-stage-label{font-size:clamp(20px,2vw,30px);line-height:1.3;font-weight:600;text-wrap:balance}
.hist-stage-detail{font-size:12px;line-height:1.5;color:var(--ink-muted)}
.hist-stage-cover.has-image:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.22),rgba(0,0,0,.78))}
.hist-stage-cover.has-image .hist-stage-content{justify-content:flex-end;color:#fff}
.hist-stage-cover.has-image .hist-stage-detail{color:#f1f1f1}
@media(prefers-reduced-motion:no-preference){.hist-cover-image{transition:transform 160ms ease-out}.hist-card:hover .hist-cover-image{transform:scale(1.02)}}

.script-rewrite-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:4px 0 16px}.script-rewrite-actions .btn{min-height:36px}

/* Compact creation quantity and continuous duration controls. */
.ai-page .workbench-count,.ai-page .workbench-duration{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;align-items:center}
.ai-page .workbench-duration>b,.ai-page .workbench-count>b{padding:0;white-space:nowrap}
.count-control{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-width:0}
.count-control>input{height:44px;flex:0 0 80px}
.count-control>span{flex:1 1 140px;line-height:1.5}
.duration-control{display:grid;grid-template-columns:minmax(0,1fr) 80px;gap:8px;align-items:center;min-width:0}
.duration-control>input[type=range]{width:100%;min-width:0;margin:0;height:44px;padding:0;accent-color:var(--ink-strong)}
.duration-value{display:flex;align-items:center;height:44px;border:1px solid var(--line);border-radius:10px;background:var(--bg-sunken);overflow:hidden}
.duration-value>input[type=number]{width:100%;min-width:0;height:100%;border:0!important;box-shadow:none!important;border-radius:0;background:transparent;padding:8px 0 8px 10px}
.duration-value>span{flex:none;padding-right:10px;font-size:12px;color:var(--ink-muted)}
.duration-value:focus-within{outline:2px solid var(--focus);outline-offset:2px}
@media(max-width:380px){.ai-page .workbench-count,.ai-page .workbench-duration{grid-template-columns:56px minmax(0,1fr);gap:8px}.duration-control{grid-template-columns:minmax(0,1fr) 84px;gap:8px}}

.ai-page .workbench-writing-settings{gap:16px}

.ai-workbench .workbench-step-actions{display:grid;gap:8px;min-width:0}.ai-workbench .workbench-step-actions[hidden]{display:none!important;pointer-events:none}

.ai-workbench .steps-main-actions{display:grid;grid-template-columns:1fr 1.25fr;gap:10px;align-items:stretch}
.ai-workbench .steps-main-actions>.btn{min-height:44px;height:auto;margin:0;width:100%;padding:10px 8px;white-space:normal;font-size:13px;line-height:1.4}
.ai-workbench .steps-main-actions:not(:has(>.btn:not([hidden])+ .btn:not([hidden]))){grid-template-columns:1fr}
.ai-workbench .card-foot:not(:has(video,a,.job-line,.notice,.btn)){display:none}

.ai-workbench .steps-main-actions>.btn[hidden]{display:none!important}

.library-selection-meta{display:flex;align-items:center;justify-content:space-between;gap:10px 12px;flex-wrap:wrap;margin:12px 0 0}
.library-selection-meta>.library-manage-btn{min-height:40px;height:auto;flex:none;padding:9px 14px;text-decoration:none;border:1px solid var(--line-strong);border-radius:10px;font-weight:500;background:var(--bg);color:var(--ink-strong)}
.library-selection-meta>.library-manage-btn:hover{background:var(--bg-sunken);border-color:var(--ink-strong)}
.library-selection-meta .library-analysis-needed{color:var(--warning)}


/* 0.36.3: approved numbered draft cards, stable geometry and two-line notices. */
.workbench-results .cards{grid-template-columns:minmax(0,1fr)}
.workbench-results .script-card{height:auto;min-height:0;max-height:none;display:flex;flex-direction:column;overflow:hidden}
.workbench-results .script-card .card-head{display:grid;grid-template-columns:56px minmax(0,1fr) 88px;gap:16px;height:104px;min-height:104px;padding:20px;box-sizing:border-box;flex:none}
.workbench-results .script-card .card-idx{width:56px;height:56px;border-radius:12px;font:600 28px/1 var(--font-num);display:grid;place-items:center}
.workbench-results .script-heading{min-width:0;height:44px;max-height:44px;display:grid;grid-template-rows:22px 20px;gap:2px;overflow:hidden}
.workbench-results .script-card .card-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;font-size:18px;line-height:26px}
.workbench-results .script-card .card-sub{display:flex;gap:6px;height:20px;min-width:0;overflow:hidden;white-space:nowrap;flex-wrap:nowrap;align-items:center}
.workbench-results .script-card .card-sub .badge{flex:0 1 auto;min-width:0;max-width:60%;height:20px;min-height:20px;line-height:18px;padding:0 6px;font-size:11px;box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.workbench-results .script-card-actions{display:flex;align-items:center;gap:4px;width:60px}
.workbench-results .script-card-actions .script-choice{display:grid;place-items:center;width:28px;height:28px;min-height:28px;margin:0;cursor:pointer}
.workbench-results .script-choice input{width:18px;height:18px;margin:0;accent-color:var(--action);cursor:pointer}
.workbench-results .script-card-actions>.btn{width:28px;height:28px;min-width:28px;min-height:28px;padding:0}
.workbench-results .script-card-content{flex:0 1 auto;min-height:0;overflow:visible}
.workbench-results .script-card .card-body{padding:16px 20px;gap:12px}
.workbench-results .script-card .script-text{height:182px;min-height:182px;max-height:182px;resize:none;overflow-y:auto;box-sizing:border-box}
.workbench-results .script-card .dur-line{height:24px;line-height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-wrap:nowrap;flex:none}
.workbench-results .script-rewrite-actions{height:44px;min-height:44px;display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;flex-wrap:nowrap;flex:none}
.workbench-results .script-rewrite-actions>.btn{white-space:nowrap;flex:none;min-height:40px}
.workbench-results .script-notice-slot{height:64px;min-height:64px;max-height:64px;flex:none}
.workbench-results .script-notice{width:100%;height:64px;min-height:64px;max-height:64px;margin:0;box-sizing:border-box;display:flex;align-items:center;gap:10px;text-align:left;cursor:pointer;padding:10px 12px}
.workbench-results .script-notice-copy{flex:1;min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:22px;max-height:44px;overflow-wrap:anywhere}
.workbench-results .script-notice-more{flex:none;font-size:12px;text-decoration:underline;text-underline-offset:3px}
.workbench-results .script-card .card-body>details>summary{min-height:44px;display:flex;align-items:center;cursor:pointer}
.script-warning-list{padding-left:20px;overflow-wrap:anywhere}.script-warning-list li+li{margin-top:12px}
@media(max-width:600px){
 .workbench-results .script-card .card-head{grid-template-columns:44px minmax(0,1fr) 88px;gap:10px;padding:16px;height:96px;min-height:96px}
 .workbench-results .script-card .card-idx{width:44px;height:44px;font-size:24px;border-radius:10px}
 .workbench-results .script-card .card-title{font-size:16px;line-height:22px}
 .workbench-results .script-card .card-body{padding:16px}
 .workbench-results .script-card .card-sub{gap:6px}
 .workbench-results .script-card .card-sub .badge{max-width:70%;font-size:11px;padding-inline:6px}
}

.workbench-results .script-card .card-sub{overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.workbench-results .script-card .card-sub::-webkit-scrollbar{display:none}
.workbench-results .script-card .card-sub .badge{max-width:none}

/* 0.36.4: two equal draft cards per row when the result pane has room. */
.workbench-results{container:script-results / inline-size}
.workbench-results .cards{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
.workbench-results .script-card{height:auto;min-height:0;max-height:none;align-self:start}
.workbench-results .script-card .card-head{grid-template-columns:44px minmax(0,1fr) 60px;gap:8px;height:72px;min-height:72px;padding:14px;align-items:center}
.workbench-results .script-card .card-idx{width:44px;height:44px;font-size:24px;border-radius:10px}
.workbench-results .script-card .card-title{font-size:16px;line-height:22px}
.workbench-results .script-card .card-body{padding:12px 14px;gap:10px}
.workbench-results .script-card .script-text{height:156px;min-height:156px;max-height:156px}
.workbench-results .script-rewrite-actions{gap:6px;margin:0}
.workbench-results .script-rewrite-actions>.btn{font-size:12px;padding-inline:8px}
@container script-results (max-width:580px){.workbench-results .cards{grid-template-columns:minmax(0,1fr)}}

/* 0.36.6: theme changes restyle the existing carousel; photo URLs and state remain intact. */
.st-edit-badge,.st-edit-subtitle,.st-person-caption,.st-person-corner{color:#fff}
.st-scene .st-script-sheet .st-scene-label{color:#666}
.st-playhead,.st-playhead::before,.st-voice-wave i{background:var(--st-accent)}
.st-audio-track{background:var(--brand-soft)}
.st-audio-track i{background:var(--st-accent)}

/* 图文采集、生图状态：复用品牌矢量加载标，不伪造百分比。 */
.image-remix .remix-processing{min-height:420px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;padding:32px}
.image-remix .remix-processing i,.image-remix .picture-placeholder i{display:block;width:112px;height:112px;background:url('/assets/brand/bl-loading.svg') center/contain no-repeat}
.image-remix .remix-processing progress,.image-remix .picture-placeholder progress{width:min(240px,80%);height:6px;accent-color:var(--brand)}
.image-remix .picture-placeholder{width:100%;height:100%;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:16px;text-align:center}
.image-remix .picture-placeholder i{width:72px;height:72px;flex:none}
.image-remix .remix-recovery{padding:16px 24px;border-bottom:1px solid var(--line);background:var(--bg-sunken);display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.image-remix .remix-recovery p{flex:1 1 320px;margin:0;overflow-wrap:anywhere}
.image-remix .text-card textarea.card-copy-editor{height:clamp(260px,36vh,440px);min-height:260px;line-height:1.65;resize:vertical;overflow:auto}
@media(max-width:640px){.image-remix .text-card textarea.card-copy-editor{height:300px}.image-remix .remix-processing{min-height:300px}}
@media(prefers-reduced-motion:reduce){.image-remix .remix-processing i,.image-remix .picture-placeholder i{background-image:url('/assets/brand/boluo-app-icon.svg')}}

.image-remix .picture-progress{padding:0 4px 8px}.image-remix .picture-progress progress{display:block;width:100%;height:6px;accent-color:var(--brand)}

.business-type-prompt{max-width:48ch;white-space:pre-wrap;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:13px;line-height:1.6}

.speech-timeline{max-height:220px;overflow:auto;line-height:1.8;padding:8px 0}.speech-timeline>div{padding:4px 0}

/* Writing inputs follow their actual column width, including wrapped placeholder copy. */
.ai-workbench .writing-prompt{display:block;width:100%;min-width:0;box-sizing:border-box;min-height:160px;line-height:1.65;resize:vertical;overflow-y:auto}
.workbench-results .script-extra-tabs{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;margin:0;min-width:0}
.workbench-results .script-extra-tabs>.btn{flex:1;min-width:0;padding:8px 10px;min-height:40px;white-space:nowrap;font-size:13px}
.workbench-results .script-extra-tabs>.btn.on{background:var(--ink-strong);color:var(--bg)}
.workbench-results .script-extra-panel{padding:8px 0 0;min-width:0}
.workbench-results .script-notice-slot:empty{display:none}
@media(max-width:600px){.ai-workbench .writing-prompt{min-height:176px}.workbench-results .script-extra-tabs{gap:6px}}

.workbench-results .script-card-actions>.btn .icon{width:18px;height:18px}.workbench-results .script-card .card-foot:not(:has(> :not(:empty))){display:none}.workbench-results .script-card .card-foot>div:empty{display:none}
/* 第 6 步：视频卡与信息卡居中、同高同宽（9:16） */
.dh-final-card:not(.is-loading){grid-template-columns:auto auto;justify-content:center;align-items:stretch;gap:24px}
.dh-final-card:not(.is-loading)>.dh-final-media{height:100%;aspect-ratio:9/16;min-width:0;padding:0;border-radius:20px;overflow:hidden;background:#000;border:1px solid var(--line)}
.dh-final-card .dh-final-video{width:100%;height:100%;max-width:none;max-height:none;border-radius:0;object-fit:contain}
.dh-final-card:not(.is-loading)>.dh-final-info{height:100%;max-height:100%;aspect-ratio:9/16;min-width:340px;max-width:none;padding:0;display:flex}
.dh-final-card:not(.is-loading) .dh-final-sheet{flex:1;height:100%;max-width:none;margin:0;align-content:space-between;overflow-y:auto}
@container (max-width:850px){
 .dh-final-card:not(.is-loading){grid-template-columns:minmax(0,1fr)}
 .dh-final-card:not(.is-loading)>.dh-final-media,.dh-final-card:not(.is-loading)>.dh-final-info{aspect-ratio:auto;height:auto;min-width:0}
 .dh-final-card:not(.is-loading)>.dh-final-media{aspect-ratio:9/16;max-height:70vh;justify-self:center}
}

/* AI 智能剪辑：卡片式 + 底部阴影；选中态用浅紫底色，不用实心紫 */
.studio-workbench{--card-drop:0 22px 30px -18px rgba(40,20,110,.28);--card-drop-hover:0 26px 32px -16px color-mix(in srgb,var(--brand) 40%,transparent);--pick-bg:color-mix(in srgb,var(--brand) 9%,var(--bg-raised,#fff));--pick-line:color-mix(in srgb,var(--brand) 45%,transparent)}
:root[data-theme="dark"] .studio-workbench{--card-drop:0 22px 30px -18px rgba(0,0,0,.9)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .studio-workbench{--card-drop:0 22px 30px -18px rgba(0,0,0,.9)}}
.studio-workbench>.dh-stepbar,.studio-workbench>.studio-settings,.studio-workbench>.workbench-results{border-radius:16px;box-shadow:var(--card-drop)}
.studio-workbench .dh-stepbar button[aria-current="step"]{background:var(--pick-bg);box-shadow:inset 0 0 0 1px var(--pick-line)}
.studio-workbench .lib-cards{display:grid;gap:10px;max-height:min(46vh,420px);overflow-y:auto;padding:2px 2px 14px;margin:0 -2px}
.studio-workbench .lib-cards .lib-card{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;height:auto;min-height:0;font:inherit;gap:10px;width:100%;padding:10px 12px;text-align:left;border-radius:12px;border:1px solid var(--line);background:var(--bg-raised);color:var(--ink);cursor:pointer;box-shadow:0 12px 18px -14px rgba(0,0,0,.55);transition:transform .18s,box-shadow .18s,border-color .18s,background .18s}
.studio-workbench .lib-card:not(:disabled):hover{transform:translateY(-2px);box-shadow:var(--card-drop-hover)}
.studio-workbench .lib-card:disabled{opacity:.5;cursor:not-allowed}
.studio-workbench .lib-card.is-on{background:var(--pick-bg);border-color:var(--pick-line);box-shadow:0 14px 20px -14px color-mix(in srgb,var(--brand) 45%,transparent)}
.studio-workbench .lib-card-icon{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--bg-sunken);color:var(--ink-muted)}
.studio-workbench .lib-card-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.studio-workbench .lib-card.is-on .lib-card-icon{background:color-mix(in srgb,var(--brand) 16%,transparent);color:var(--brand)}
.studio-workbench .lib-card-text{flex:1;min-width:0;display:grid;gap:2px;justify-items:start;text-align:left}
.studio-workbench .lib-card-text b{font-weight:600;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.studio-workbench .lib-card-text small{font-size:12px;color:var(--ink-muted)}
.studio-workbench .lib-card-check{flex:none;width:18px;height:18px;border-radius:50%;background:var(--brand);position:relative}
.studio-workbench .lib-card-check::after{content:"";position:absolute;left:6px;top:3px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.studio-workbench .workbench-materials .mats{gap:16px;padding-bottom:16px}
.studio-workbench .workbench-materials .mat{border-radius:14px;box-shadow:0 20px 24px -16px rgba(0,0,0,.6);transition:transform .22s,box-shadow .22s,border-color .22s}
.studio-workbench .workbench-materials .mat:hover{transform:translateY(-4px);border-color:var(--pick-line);box-shadow:var(--card-drop-hover)}
.studio-workbench .workbench-materials .mat-thumb .badge{background:color-mix(in srgb,var(--brand) 85%,#000);color:#fff;border-color:transparent}

/* AI 智能剪辑步骤条：品牌色像水一样从左漫到当前步骤，最后一步整条填满 */
@property --flow-p{syntax:'<percentage>';inherits:true;initial-value:0%}
.studio-workbench .studio-stepbar{--flow-c:#5d00ff;transition:--flow-p .9s cubic-bezier(.3,.7,.2,1)}
.studio-workbench .studio-stepbar>nav{position:relative;isolation:isolate}
.studio-workbench .studio-stepbar>nav::before{content:'';position:absolute;inset:2px 0;border-radius:12px;z-index:-1;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(var(--flow-p) - var(--flow-fade)),transparent var(--flow-p));mask-image:linear-gradient(90deg,#000 0,#000 calc(var(--flow-p) - var(--flow-fade)),transparent var(--flow-p))}
.studio-workbench .studio-stepbar>nav::before{background:var(--flow-c);box-shadow:0 18px 26px -14px rgba(93,0,255,.6)}
/* 当前步骤最右侧：一个缓慢呼吸的小光点，标出水位前沿 */
.studio-workbench .studio-stepbar button[aria-current]{position:relative;padding-right:28px}
.studio-workbench .studio-stepbar button[aria-current]::after{content:'';position:absolute;right:12px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:#fff;animation:flow-edge 2.6s ease-in-out infinite}
@keyframes flow-edge{0%,100%{opacity:.55;box-shadow:0 0 0 0 rgba(255,255,255,.45)}50%{opacity:1;box-shadow:0 0 0 6px rgba(255,255,255,0)}}
@media (prefers-reduced-motion:reduce){.studio-workbench .studio-stepbar{transition:none}.studio-workbench .studio-stepbar button[aria-current]::after{animation:none}}
.studio-workbench .studio-stepbar li+li::before{background:rgba(255,255,255,.18)}
.studio-workbench .studio-stepbar button[aria-current],.studio-workbench .studio-stepbar button[data-complete]{background:transparent;box-shadow:none;color:#fff}
.studio-workbench .studio-stepbar button[aria-current] .dh-stepbar-state,.studio-workbench .studio-stepbar button[data-complete] .dh-stepbar-state{color:rgba(255,255,255,.78)}
.studio-workbench .studio-stepbar button[data-complete] .dh-stepbar-no{border-color:rgba(255,255,255,.7);color:#fff}
.studio-workbench .studio-stepbar button[aria-current] .dh-stepbar-no{background:#fff;border-color:#fff;color:var(--flow-c)}
.studio-workbench .studio-stepbar button[aria-current]:hover,.studio-workbench .studio-stepbar button[data-complete]:hover{background:rgba(255,255,255,.08)}

/* AI 智能剪辑标题：立体（3D）图标块 + 标题 */
.studio-workbench .studio-stepbar .dh-stepbar-title{gap:12px;padding-right:20px;font:700 18px/24px var(--font-sans);letter-spacing:.02em;color:var(--ink-strong)}
.studio-workbench .studio-stepbar .dh-stepbar-title>span:last-child{background:linear-gradient(90deg,var(--ink-strong) 0 30%,color-mix(in srgb,var(--ink-strong) 78%,#9b6bff));-webkit-background-clip:text;background-clip:text;color:transparent}
.studio-workbench .studio-stepbar .dh-stepbar-icon{position:relative;width:36px;height:36px;border-radius:11px;border:0;color:#fff;
  background:linear-gradient(145deg,#a27bff 0%,#6a1bff 42%,#4100c4 100%);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.55),inset 0 -3px 0 rgba(30,0,90,.55),inset 0 0 0 1px rgba(255,255,255,.12),0 4px 0 #2c0088,0 10px 18px -4px rgba(93,0,255,.65);
  transform:perspective(120px) rotateX(8deg) rotateY(-10deg);transition:transform .35s cubic-bezier(.3,.7,.2,1)}
.studio-workbench .studio-stepbar .dh-stepbar-icon::before{content:'';position:absolute;left:4px;right:4px;top:3px;height:45%;border-radius:8px 8px 14px 14px;background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,0));pointer-events:none}
.studio-workbench .studio-stepbar .dh-stepbar-icon svg{position:relative;width:19px;height:19px;stroke:#fff;stroke-width:2;filter:drop-shadow(0 1.5px 0 rgba(30,0,90,.7))}
.studio-workbench .studio-stepbar .dh-stepbar-icon svg .a{stroke:#e6d9ff}
.studio-workbench .studio-stepbar .dh-stepbar-title:hover .dh-stepbar-icon{transform:perspective(120px) rotateX(0) rotateY(0) translateY(-1px)}
@media (prefers-reduced-motion:reduce){.studio-workbench .studio-stepbar .dh-stepbar-icon{transition:none}}

/* AI 智能剪辑标题 3D 动态：整组缓慢摆动、图标块浮动+扫光、剪刀开合、星光闪烁、文字立体厚度 */
.studio-workbench .studio-stepbar .dh-stepbar-title{perspective:520px;transform-style:preserve-3d}
.studio-workbench .studio-stepbar .dh-stepbar-title>span:last-child{background:none;color:var(--ink-strong);-webkit-background-clip:border-box;background-clip:border-box;display:inline-block;
  text-shadow:0 1px 0 #c7b0ff,0 2px 0 #9b6bff,0 3px 0 #7a3dff,0 4px 0 #5d00ff,0 9px 14px rgba(93,0,255,.45);
  transform-origin:left center;animation:title3d-text 7s ease-in-out infinite}
.studio-workbench .studio-stepbar .dh-stepbar-icon.is-3d{transform-style:preserve-3d;overflow:hidden;animation:title3d-tile 7s ease-in-out infinite}
.studio-workbench .studio-stepbar .dh-stepbar-icon.is-3d::after{content:'';position:absolute;inset:-40% auto -40% -60%;width:40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transform:rotate(20deg);animation:title3d-sheen 7s ease-in-out infinite;pointer-events:none}
.studio-workbench .studio-stepbar .dh-stepbar-title:hover .dh-stepbar-icon.is-3d{transform:none}
.studio-workbench .dh-stepbar-icon.is-3d svg .snip-a,.studio-workbench .dh-stepbar-icon.is-3d svg .snip-b{transform-box:view-box;transform-origin:12.2px 12px;animation:title3d-snip-a 3.5s ease-in-out infinite}
.studio-workbench .dh-stepbar-icon.is-3d svg .snip-b{animation-name:title3d-snip-b}
.studio-workbench .dh-stepbar-icon.is-3d svg .snip-star{fill:#fff;stroke:none;transform-box:fill-box;transform-origin:center;animation:title3d-star 3.5s ease-in-out infinite}
@keyframes title3d-tile{0%,100%{transform:perspective(160px) rotateX(10deg) rotateY(-16deg) translateY(0)}50%{transform:perspective(160px) rotateX(4deg) rotateY(14deg) translateY(-2px)}}
@keyframes title3d-text{0%,100%{transform:rotateY(-7deg)}50%{transform:rotateY(5deg) translateY(-1px)}}
@keyframes title3d-sheen{0%,62%{left:-60%}80%,100%{left:130%}}
@keyframes title3d-snip-a{0%,40%,100%{transform:rotate(-12deg)}50%,60%{transform:rotate(0)}70%{transform:rotate(-12deg)}80%{transform:rotate(0)}}
@keyframes title3d-snip-b{0%,40%,100%{transform:rotate(12deg)}50%,60%{transform:rotate(0)}70%{transform:rotate(12deg)}80%{transform:rotate(0)}}
@keyframes title3d-star{0%,45%,100%{opacity:.35;transform:scale(.6) rotate(0)}55%{opacity:1;transform:scale(1.25) rotate(45deg)}85%{opacity:.8;transform:scale(1) rotate(90deg)}}
@media (prefers-reduced-motion:reduce){.studio-workbench .studio-stepbar .dh-stepbar-title>span:last-child,.studio-workbench .studio-stepbar .dh-stepbar-icon.is-3d,.studio-workbench .studio-stepbar .dh-stepbar-icon.is-3d::after,.studio-workbench .dh-stepbar-icon.is-3d svg *{animation:none}}

/* 标题入场：图标与文字从上方飘落组合，落定后逐字打出文案；之后只保留图标的剪刀开合与轻微浮动 */
.studio-workbench .studio-stepbar .title3d-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.studio-workbench .studio-stepbar .title3d-name{display:inline-flex;font:700 18px/22px var(--font-sans);letter-spacing:.02em;color:var(--ink-strong);
  text-shadow:0 1px 0 #c7b0ff,0 2px 0 #9b6bff,0 3px 0 #7a3dff,0 4px 0 #5d00ff,0 9px 14px rgba(93,0,255,.45)}
.studio-workbench .studio-stepbar .title3d-char{display:inline-block;animation:title3d-drop .9s cubic-bezier(.22,1.4,.36,1) both;animation-delay:calc(.45s + var(--i) * .09s)}
.studio-workbench .studio-stepbar .title3d-tag{min-height:15px;font:400 11px/15px var(--font-sans);letter-spacing:.04em;color:var(--ink-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}
.studio-workbench .studio-stepbar .title3d-tag:not(.is-done):not(:empty)::after{content:'';display:inline-block;width:1px;height:11px;margin-left:2px;vertical-align:-1px;background:var(--brand);animation:title3d-caret .7s steps(1) infinite}
.studio-workbench .studio-stepbar .dh-stepbar-title.is-intro .dh-stepbar-icon.is-3d{animation:title3d-icon-drop 1s cubic-bezier(.22,1.3,.36,1) both,title3d-tile 7s ease-in-out 1s infinite}
@keyframes title3d-drop{0%{opacity:0;transform:translateY(-34px) rotateX(-80deg) rotate(calc((var(--i) - 3) * 6deg));filter:blur(3px)}60%{opacity:1;filter:blur(0)}100%{opacity:1;transform:none}}
@keyframes title3d-icon-drop{0%{opacity:0;transform:perspective(160px) translateY(-40px) rotateX(-70deg) rotateZ(-25deg)}100%{opacity:1;transform:perspective(160px) rotateX(10deg) rotateY(-16deg)}}
@keyframes title3d-caret{50%{opacity:0}}
@container (max-width:850px){.studio-workbench .studio-stepbar .title3d-tag{display:none}}
@media (prefers-reduced-motion:reduce){.studio-workbench .studio-stepbar .title3d-char,.studio-workbench .studio-stepbar .dh-stepbar-title.is-intro .dh-stepbar-icon.is-3d{animation:none}}
.studio-workbench .studio-stepbar .dh-stepbar-title>span.title3d-text{display:flex;flex-direction:column;gap:2px;background:none;-webkit-background-clip:border-box;background-clip:border-box;color:inherit;text-shadow:none;animation:none;transform:none}
.studio-workbench .studio-stepbar .title3d-tag{max-width:190px}
/* 标题文字：去掉厚重的立体描边，改为干净的白字，“AI”用品牌浅紫点缀 */
.studio-workbench .studio-stepbar .title3d-name{font:600 18px/24px var(--font-sans);letter-spacing:.01em;color:var(--ink-strong);text-shadow:none}
.studio-workbench .studio-stepbar .title3d-char:nth-child(-n+2){color:color-mix(in srgb,var(--brand) 85%,var(--ink-strong));margin-right:0}

/* 标题图标改为立体剪刀物件（无底板）：金属刀刃 + 紫色握柄 + 地面投影，落下后缓慢开合浮动 */
.studio-workbench .studio-stepbar .dh-stepbar-icon.is-3d{width:44px;height:44px;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible;transform:none;animation:none}
.studio-workbench .studio-stepbar .dh-stepbar-icon.is-3d::before,.studio-workbench .studio-stepbar .dh-stepbar-icon.is-3d::after{content:none}
.studio-workbench .studio-stepbar .dh-stepbar-icon.is-3d svg{width:44px;height:44px;stroke:none;filter:none;overflow:visible}
.studio-workbench .dh-stepbar-icon.is-3d .s3d-floor{fill:rgba(93,0,255,.35);transform-box:fill-box;transform-origin:center;animation:s3d-floor 4.5s ease-in-out infinite}
.studio-workbench .dh-stepbar-icon.is-3d .s3d-body{transform-box:fill-box;transform-origin:center;animation:s3d-float 4.5s ease-in-out infinite}
.studio-workbench .dh-stepbar-icon.is-3d .snip-a,.studio-workbench .dh-stepbar-icon.is-3d .snip-b{transform-box:view-box;transform-origin:0 0;animation:s3d-snip-a 4.5s ease-in-out infinite}
.studio-workbench .dh-stepbar-icon.is-3d .snip-b{animation-name:s3d-snip-b}
.studio-workbench .studio-stepbar .dh-stepbar-title.is-intro .dh-stepbar-icon.is-3d{animation:s3d-drop-in 1s cubic-bezier(.22,1.3,.36,1) both}
@keyframes s3d-float{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-2.5px) rotate(3deg)}}
@keyframes s3d-floor{0%,100%{transform:scaleX(1);opacity:.9}50%{transform:scaleX(.82);opacity:.55}}
@keyframes s3d-snip-a{0%,35%,100%{transform:rotate(-14deg)}48%,58%{transform:rotate(0)}70%{transform:rotate(-14deg)}}
@keyframes s3d-snip-b{0%,35%,100%{transform:rotate(14deg)}48%,58%{transform:rotate(0)}70%{transform:rotate(14deg)}}
@keyframes s3d-drop-in{0%{opacity:0;transform:translateY(-40px) rotate(-30deg)}100%{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.studio-workbench .dh-stepbar-icon.is-3d *,.studio-workbench .studio-stepbar .dh-stepbar-title.is-intro .dh-stepbar-icon.is-3d{animation:none}}
/* 剪刀 + 胶卷：胶卷慢速走片（一格 14 单位，循环无缝） */
.studio-workbench .dh-stepbar-icon.is-3d .s3d-reel{animation:s3d-reel 4.5s linear infinite}
@keyframes s3d-reel{to{transform:translateX(-14px)}}
@media (prefers-reduced-motion:reduce){.studio-workbench .dh-stepbar-icon.is-3d .s3d-reel{animation:none}}
/* 胶卷在后：略暗、略小，拉开与前景剪刀的景深 */
.studio-workbench .dh-stepbar-icon.is-3d .s3d-film-back{filter:url(#s3d-drop) brightness(.78) saturate(.9)}

/* ===== 全站标题 3D 图标（title3d.js）：无底板立体小物件 + 地面投影；入场图标与逐字从上方落下 ===== */
.dh-stepbar-icon.t3d-icon,.page-head-icon.t3d-icon,.studio-workbench .studio-stepbar .dh-stepbar-icon.t3d-icon{width:44px;height:44px;flex:none;display:grid;place-items:center;padding:0;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible;transform:none;color:inherit}
.page-head-icon.t3d-icon{width:40px;height:40px}
.t3d-icon::before,.t3d-icon::after{content:none!important}
.t3d-icon svg.t3d-svg,.studio-workbench .studio-stepbar .dh-stepbar-icon.t3d-icon svg{width:100%;height:100%;fill:none;stroke:none;filter:none;overflow:visible;position:static}
.t3d-floor{fill:rgba(93,0,255,.35);transform-box:fill-box;transform-origin:center;animation:t3d-floor 4.5s ease-in-out infinite}
.t3d-body{transform-box:fill-box;transform-origin:center;animation:t3d-float 4.5s ease-in-out infinite}
.t3d-snip-a,.t3d-snip-b{transform-box:view-box;transform-origin:0 0;animation:s3d-snip-a 4.5s ease-in-out infinite}
.t3d-snip-b{animation-name:s3d-snip-b}
.t3d-reel{animation:s3d-reel 4.5s linear infinite}
.t3d-back{filter:brightness(.8) saturate(.9)}
.t3d-eyes{transform-box:fill-box;transform-origin:center;animation:t3d-blink 4s ease-in-out infinite}
.t3d-waves path{animation:t3d-wave 2.2s ease-out infinite}
.t3d-waves path+path{animation-delay:.35s}
.t3d-card-back{transform-box:fill-box;transform-origin:50% 100%;animation:t3d-fan 4.5s ease-in-out infinite}
.t3d-star{transform-box:fill-box;transform-origin:center;animation:title3d-star 3.5s ease-in-out infinite}
.t3d-peek{animation:t3d-peek 4.5s ease-in-out infinite}
.t3d-hand-m{transform-box:view-box;transform-origin:22px 21px;animation:t3d-spin 6s linear infinite}
.t3d-hand-h{transform-box:view-box;transform-origin:22px 21px;animation:t3d-spin 36s linear infinite}
.t3d-tag{transform-box:view-box;transform-origin:28.5px 20.5px;animation:t3d-swing 3s ease-in-out infinite}
.t3d-bar{transform-box:fill-box;transform-origin:50% 100%;animation:t3d-bar 3s ease-in-out infinite}
.t3d-gear{transform-box:view-box;transform-origin:22px 21.5px;animation:t3d-spin 10s linear infinite}
@keyframes t3d-float{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-2.5px) rotate(3deg)}}
@keyframes t3d-floor{0%,100%{transform:scaleX(1);opacity:.9}50%{transform:scaleX(.82);opacity:.55}}
@keyframes t3d-blink{0%,44%,52%,100%{transform:scaleY(1)}48%{transform:scaleY(.1)}}
@keyframes t3d-wave{0%{opacity:0}30%{opacity:1}100%{opacity:0}}
@keyframes t3d-fan{0%,100%{transform:rotate(0)}50%{transform:rotate(-5deg)}}
@keyframes t3d-peek{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.5px)}}
@keyframes t3d-spin{to{transform:rotate(360deg)}}
@keyframes t3d-swing{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
@keyframes t3d-bar{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.82)}}
@keyframes s3d-snip-a{0%,35%,100%{transform:rotate(-14deg)}48%,58%{transform:rotate(0)}70%{transform:rotate(-14deg)}}
@keyframes s3d-snip-b{0%,35%,100%{transform:rotate(14deg)}48%,58%{transform:rotate(0)}70%{transform:rotate(14deg)}}
@keyframes s3d-reel{to{transform:translateX(-14px)}}
@keyframes title3d-star{0%,45%,100%{opacity:.35;transform:scale(.6) rotate(0)}55%{opacity:1;transform:scale(1.25) rotate(45deg)}85%{opacity:.8;transform:scale(1) rotate(90deg)}}
/* 标题文字：干净白字，逐字从上方落下；入场后静止 */
.t3d-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.t3d-name{display:inline-flex;align-items:baseline;flex-wrap:wrap;text-shadow:none;background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--ink-strong);animation:none;transform:none}
.dh-stepbar-title .t3d-name,.studio-workbench .studio-stepbar .dh-stepbar-title>span.t3d-name{display:inline-flex;font:600 18px/24px var(--font-sans);letter-spacing:.01em;color:var(--ink-strong);background:none;-webkit-background-clip:border-box;background-clip:border-box;text-shadow:none;animation:none;transform:none}
.t3d-char{display:inline-block}
.t3d-intro .t3d-char{animation:title3d-drop .9s cubic-bezier(.22,1.4,.36,1) both;animation-delay:calc(.45s + var(--i) * .07s)}
.t3d-intro .t3d-icon,.t3d-intro>.t3d-icon,.page-head.t3d-intro .t3d-icon{animation:s3d-drop-in 1s cubic-bezier(.22,1.3,.36,1) both}
.page-head:has(h1.t3d-intro) .page-head-icon.t3d-icon{animation:s3d-drop-in 1s cubic-bezier(.22,1.3,.36,1) both}
.dh-stepbar-title.t3d-intro{gap:10px}
@keyframes title3d-drop{0%{opacity:0;transform:translateY(-34px) rotateX(-80deg) rotate(calc((var(--i) - 3) * 6deg));filter:blur(3px)}60%{opacity:1;filter:blur(0)}100%{opacity:1;transform:none}}
@keyframes s3d-drop-in{0%{opacity:0;transform:translateY(-40px) rotate(-30deg)}100%{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.t3d-icon *,.t3d-intro .t3d-char,.t3d-intro .t3d-icon,.page-head:has(h1.t3d-intro) .page-head-icon.t3d-icon{animation:none!important}}

/* ===== 全站卡片：更圆的圆角 + 底部悬浮阴影（3D 浮起感） =====
   外层面板 24px，内层卡片 18px；阴影只压在卡片下方，顶部一条细高光。浅色为紫调淡影，深色为深黑沉影。 */
:root{--card-r:24px;--card-r-inner:18px;
  --card-lift:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(30,15,80,.06),0 20px 32px -20px rgba(45,20,130,.32);
  --card-lift-sm:inset 0 1px 0 rgba(255,255,255,.9),0 14px 22px -16px rgba(45,20,130,.30);
  --card-lift-hover:inset 0 1px 0 rgba(255,255,255,.9),0 26px 36px -18px color-mix(in srgb,var(--brand,#5d00ff) 40%,transparent)}
:root[data-theme="dark"]{--card-lift:inset 0 1px 0 rgba(255,255,255,.05),0 22px 32px -18px rgba(0,0,0,.95);--card-lift-sm:inset 0 1px 0 rgba(255,255,255,.05),0 16px 22px -14px rgba(0,0,0,.9);--card-lift-hover:inset 0 1px 0 rgba(255,255,255,.06),0 26px 34px -16px color-mix(in srgb,var(--brand,#9b6bff) 45%,transparent)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--card-lift:inset 0 1px 0 rgba(255,255,255,.05),0 22px 32px -18px rgba(0,0,0,.95);--card-lift-sm:inset 0 1px 0 rgba(255,255,255,.05),0 16px 22px -14px rgba(0,0,0,.9);--card-lift-hover:inset 0 1px 0 rgba(255,255,255,.06),0 26px 34px -16px color-mix(in srgb,var(--brand,#9b6bff) 45%,transparent)}}
:root :is(.panel,.page-head,.dh-stepbar,.settings-card,.section-card,.auth-card,.stat-row,.ec-card,.dh-final-card:not(.is-loading)>.dh-final-info,.dh-final-card:not(.is-loading)>.dh-final-media),
.studio-workbench>.dh-stepbar,.studio-workbench>.studio-settings,.studio-workbench>.workbench-results{border-radius:var(--card-r);box-shadow:var(--card-lift)}
:root :is(.mat,.lib-card,.hist-card,.dh-hcard,.dh-task-card,.st-card,.ec-tile,.ec-pick-item,.text-card,.task-asset,.picture,.cloud-media-template-card,.cards>.card,.stat),
.studio-workbench .workbench-materials .mat,.studio-workbench .lib-cards .lib-card{border-radius:var(--card-r-inner);box-shadow:var(--card-lift-sm)}
:root :is(.mat,.hist-card,.dh-hcard,.ec-tile,.cards>.card){transition:transform .22s ease,box-shadow .22s ease}
:root :is(.mat,.hist-card,.dh-hcard,.ec-tile,.cards>.card):hover,.studio-workbench .workbench-materials .mat:hover{transform:translateY(-3px);box-shadow:var(--card-lift-hover)}
/* 圆角卡片内的顶部媒体/表头跟随圆角，不露直角 */
:root :is(.mat,.hist-card,.dh-hcard,.lib-card,.ec-tile,.picture,.task-asset){overflow:hidden}
:root .panel>.panel-head:first-child{border-top-left-radius:var(--card-r);border-top-right-radius:var(--card-r)}
:root .panel>:last-child:is(.steps-action,.panel-foot){border-bottom-left-radius:var(--card-r);border-bottom-right-radius:var(--card-r)}
.studio-workbench .studio-stepbar>nav::before{border-radius:18px}
@media (prefers-reduced-motion:reduce){:root :is(.mat,.hist-card,.dh-hcard,.ec-tile,.cards>.card):hover{transform:none}}

/* ===== AI 智能剪辑按设计稿：步骤条图标 + 竖分隔，左栏简洁标题，右栏“库名 · N 段素材”，素材卡紧凑 ===== */
.studio-workbench .studio-stepbar.has-step-icons ol{gap:0;padding:4px}
.studio-workbench .studio-stepbar.has-step-icons li+li::before{display:none}
.studio-workbench .studio-stepbar.has-step-icons li+li{border-left:1px solid var(--line)}
.studio-workbench .studio-stepbar.has-step-icons button{gap:12px;min-height:52px;padding:6px 16px;border-radius:14px}
.studio-workbench .studio-stepbar .dh-stepbar-glyph{flex:none;display:grid;place-items:center;width:24px;height:24px;color:var(--ink-muted)}
.studio-workbench .studio-stepbar .dh-stepbar-glyph svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.studio-workbench .studio-stepbar button[aria-current] .dh-stepbar-glyph,.studio-workbench .studio-stepbar button[data-complete] .dh-stepbar-glyph{color:#fff}
.studio-workbench .studio-stepbar button:disabled .dh-stepbar-glyph{color:var(--ink-disabled)}
.studio-workbench .studio-stepbar .dh-stepbar-text b{font-size:14px;line-height:20px}
.studio-workbench .studio-stepbar .dh-stepbar-state{font-size:12px}
/* 左栏头部：去掉分隔条与“第 N 步”标签，只留粗体标题 */
.studio-workbench .studio-settings-head{border-bottom:0;background:none;padding:20px 20px 4px}
.studio-workbench .studio-settings-head .dh-settings-step{display:none}
.studio-workbench .studio-settings-head h2{font-size:16px;font-weight:600}
/* 右栏选择素材库时：隐藏“素材预览”表头，用库名 · 段数作标题 */
.studio-workbench .workbench-results:has(.workbench-materials:not([hidden])) .results-head{display:none}
.studio-workbench .workbench-materials{padding:20px}
.studio-workbench .workbench-material-head{margin-bottom:16px}
.studio-workbench .workbench-material-head h3{margin:0;font-size:16px;font-weight:600}
.studio-workbench .workbench-material-count{font-weight:400;color:var(--ink-muted)}
/* 素材卡：圆角 18、角标紫色、底部按钮一行（查看/修正 + 垃圾桶图标） */
.studio-workbench .workbench-materials .mats{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.studio-workbench .workbench-materials .mat-thumb .badge{border-radius:8px;font-weight:600}
.studio-workbench .workbench-materials .mat-info{padding:12px 14px 14px}
.studio-workbench .workbench-materials .mat-info .n{font-size:15px;font-weight:500}
.studio-workbench .workbench-materials .mat-info .s{font-size:13px;color:var(--ink-muted);margin-top:2px}
.studio-workbench .workbench-materials .mat-info .form-actions{display:flex;justify-content:space-between;align-items:center;margin-top:12px}
.studio-workbench .workbench-materials .mat-info .btn.sm{border-radius:10px}
.studio-workbench .workbench-materials .mat-remove{width:34px;padding:0;justify-content:center}
.studio-workbench .workbench-materials .mat-remove .icon{margin:0}
/* 左栏素材库卡片：内容加大，与设计稿一致 */
.studio-workbench .lib-cards .lib-card{padding:14px 16px;border-radius:16px}
.studio-workbench .lib-card-icon{background:none;width:24px;height:24px}
.studio-workbench .lib-card-icon svg{width:22px;height:22px}
.studio-workbench .lib-card:not(.is-on) .lib-card-icon{color:var(--brand)}
.studio-workbench .lib-card-text b{font-size:15px;font-weight:500}
.studio-workbench .lib-card-text small{font-size:13px}
.studio-workbench .workbench-materials .mats{grid-template-columns:repeat(auto-fill,minmax(max(190px,calc((100% - 32px) / 3)),1fr))}
/* 选中的素材库：实心品牌深紫 + 白字（按设计稿） */
.studio-workbench .lib-cards .lib-card.is-on{background:#5d00ff;border-color:#5d00ff;color:#fff;box-shadow:0 16px 24px -12px rgba(93,0,255,.6)}
.studio-workbench .lib-cards .lib-card.is-on .lib-card-icon{background:none;color:#fff}
.studio-workbench .lib-cards .lib-card.is-on .lib-card-text small{color:rgba(255,255,255,.78)}
.studio-workbench .lib-cards .lib-card.is-on .lib-card-check{background:none}
.studio-workbench .lib-cards .lib-card.is-on .lib-card-check::after{border-color:#fff}
.studio-workbench .lib-cards .lib-card.is-on:hover{transform:translateY(-2px);box-shadow:0 20px 28px -12px rgba(93,0,255,.7)}

/* 步骤条：取消水位渐变与呼吸光点，改为静态——当前步骤实心深紫胶囊，已完成步骤图标为紫色，其余保持默认 */
.studio-workbench .studio-stepbar>nav::before,.studio-workbench .studio-stepbar>nav::after{content:none;display:none}
.studio-workbench .studio-stepbar button[aria-current]::after{content:none;animation:none}
.studio-workbench .studio-stepbar button[aria-current]{padding-right:16px;background:#5d00ff;color:#fff;box-shadow:0 12px 20px -12px rgba(93,0,255,.6)}
.studio-workbench .studio-stepbar button[aria-current] .dh-stepbar-glyph{color:#fff}
.studio-workbench .studio-stepbar button[aria-current] .dh-stepbar-state{color:rgba(255,255,255,.78)}
.studio-workbench .studio-stepbar button[aria-current]:hover{background:#5d00ff}
.studio-workbench .studio-stepbar button[data-complete]:not([aria-current]){color:var(--ink-strong)}
.studio-workbench .studio-stepbar button[data-complete]:not([aria-current]) .dh-stepbar-state{color:var(--ink-muted)}
.studio-workbench .studio-stepbar button[data-complete]:not([aria-current]) .dh-stepbar-glyph{color:var(--brand)}
.studio-workbench .studio-stepbar button[data-complete]:not([aria-current]):hover{background:var(--bg-sunken)}
.studio-workbench .studio-stepbar.has-step-icons li+li{border-left-color:var(--line)}

/* ===== AI 智能剪辑第 1 步：素材库九宫格（首格新增）+ 底部大胶囊按钮 ===== */
.studio-workbench .lib-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;max-height:none;overflow:visible;padding:4px 2px 18px;margin:0}
.studio-workbench .lib-tile{position:relative;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;aspect-ratio:5/6;min-height:0;height:auto;padding:0;overflow:hidden;text-align:left;font:inherit;color:var(--ink);text-decoration:none;cursor:pointer;
  border:1px solid var(--line);border-radius:18px;background:var(--bg-raised);box-shadow:var(--card-lift-sm);transition:transform .2s ease,box-shadow .2s ease}
.studio-workbench .lib-tile:not(:disabled):hover{transform:translateY(-3px);box-shadow:var(--card-lift-hover)}
.studio-workbench .lib-tile:disabled{opacity:.45;cursor:not-allowed}
.studio-workbench .lib-tile-cover{flex:1;min-height:0;display:grid;place-items:center;background:var(--bg-sunken) center/cover no-repeat;color:var(--brand)}
.studio-workbench .lib-tile-cover svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.studio-workbench .lib-tile-text{display:grid;gap:2px;padding:9px 10px 11px;min-width:0}
.studio-workbench .lib-tile-text b{font-size:13px;font-weight:600;line-height:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.studio-workbench .lib-tile-text small{font-size:11px;line-height:15px;color:var(--ink-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.studio-workbench .lib-tile.is-on{border-color:#5d00ff;background:#5d00ff;color:#fff;box-shadow:0 16px 24px -12px rgba(93,0,255,.6)}
.studio-workbench .lib-tile.is-on .lib-tile-cover{margin:6px 6px 0;border-radius:13px}
.studio-workbench .lib-tile.is-on .lib-tile-text small{color:rgba(255,255,255,.8)}
.studio-workbench .lib-tile-check{position:absolute;top:10px;right:10px;width:22px;height:22px;border-radius:50%;background:#5d00ff;box-shadow:0 0 0 2px #fff}
.studio-workbench .lib-tile-check::after{content:'';position:absolute;left:8px;top:4.5px;width:4px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.studio-workbench .lib-tile-add{align-items:center;justify-content:center;gap:8px;border:1.5px dashed color-mix(in srgb,var(--brand) 55%,var(--line));background:color-mix(in srgb,var(--brand) 6%,var(--bg-raised));color:var(--ink-strong)}
.studio-workbench .lib-tile-add b{font-size:14px;font-weight:600}
.studio-workbench .lib-tile-plus{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#5d00ff;color:#fff;font:400 26px/1 var(--font-sans);box-shadow:0 10px 16px -8px rgba(93,0,255,.6)}
/* 第 1 步：隐藏“管理当前素材库”一行（入口在顶部“视频素材库”与新增格） */
.studio-workbench .lib-tiles~.library-selection-meta:has(.library-manage-btn){display:none}
/* 底部操作：大胶囊按钮 */
.studio-workbench .studio-settings .steps-action{padding:16px 20px 20px;border-top:0}
.studio-workbench .studio-settings .steps-action .btn.primary,.studio-workbench .studio-settings .steps-action .btn.block{min-height:56px;border-radius:999px;font-size:15px;font-weight:600}
.studio-workbench .lib-tiles{gap:12px}
.studio-workbench .lib-tile-text{padding:8px 9px 10px}

/* AI 智能剪辑：左右栏宽度约 2.2 : 8（左栏不窄于 280px） */
.ai-workbench.studio-workbench{grid-template-columns:minmax(220px,2.2fr) minmax(0,8fr)}
.studio-workbench .lib-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@container workspace (max-width:640px){.ai-workbench.studio-workbench{grid-template-columns:minmax(0,1fr)}}

/* ===== AI 智能剪辑：左栏加宽（约 2.8:8）；顶部步骤条吸附在顶栏下方不再被遮住；
   左右两栏等高固定在首屏，右栏内部独立滚动（自带滚动条），表头“生成结果/进度”吸顶 ===== */
.ai-workbench.studio-workbench{grid-template-columns:minmax(290px,2.8fr) minmax(0,8fr)}
.studio-workbench>.studio-stepbar{top:64px}
@media (max-width:767px){.studio-workbench>.studio-stepbar{top:var(--size-appbar,56px)}}
.ai-workbench.studio-workbench>.workbench-results{position:sticky;top:var(--steps-top,164px);align-self:start;height:var(--steps-max,calc(100dvh - 188px));min-height:0;max-height:none;overflow-y:auto;overscroll-behavior:contain}
.ai-workbench.studio-workbench>.workbench-results>.results-head{position:sticky;top:0;z-index:4;background:var(--bg);border-top-left-radius:var(--card-r);border-top-right-radius:var(--card-r)}
.ai-workbench.studio-workbench>.workbench-results::-webkit-scrollbar{width:8px}
.ai-workbench.studio-workbench>.workbench-results::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--ink-muted) 45%,transparent);border-radius:8px}
.ai-workbench.studio-workbench>.workbench-results{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--ink-muted) 45%,transparent) transparent}
/* 底部两个操作按钮上下排列，避免窄栏里文字挤成圆形 */
.studio-workbench.ai-workbench .studio-settings .steps-main-actions{grid-template-columns:minmax(0,1fr)}
.studio-workbench .studio-settings .steps-action .btn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.studio-workbench .studio-settings .steps-action .btn:not(.primary){min-height:44px;border-radius:999px}
@container workspace (max-width:640px){.ai-workbench.studio-workbench>.workbench-results{position:static;height:auto;overflow:visible}}
.ai-workbench.studio-workbench>.workbench-results>.results-head{min-height:56px;padding:12px 20px;margin:0;border-bottom:1px solid var(--line);box-shadow:0 10px 16px -14px rgba(0,0,0,.6)}

/* ===== 全部创作页统一（数字人口播 / 图文二创，与智能剪辑一致）：
   左右栏约 2.8:8；顶部步骤条贴在 64px 顶栏下方；右栏固定一屏高、内部独立滚动、表头吸顶；滚动条细而可见 ===== */
/* 数字人页面整页不滚动，步骤条保持原位置（top:0），不再下移 */
@container (min-width:851px){
  .dh-studio:not(.is-final){grid-template-columns:minmax(300px,2.8fr) minmax(0,8fr)}
  .image-remix .workbench.studio-workbench{grid-template-columns:minmax(300px,2.8fr) minmax(0,8fr)}
  .image-remix .workbench.studio-workbench>.workflow-results{position:sticky;top:var(--ir-top,164px);align-self:start;height:var(--ir-max,calc(100dvh - 188px));min-height:0;overflow-y:auto;overscroll-behavior:contain}
  .image-remix .workbench.studio-workbench>.workflow-results>.results-head{position:sticky;top:0;z-index:4;background:var(--bg);border-bottom:1px solid var(--line);border-top-left-radius:var(--card-r);border-top-right-radius:var(--card-r);box-shadow:0 10px 16px -14px rgba(0,0,0,.6)}
}
.dh-results>.panel-head{border-bottom:1px solid var(--line);box-shadow:0 10px 16px -14px rgba(0,0,0,.6);position:relative;z-index:2}
:is(.dh-results-body,.image-remix .workflow-results,.ai-workbench>.workbench-results){scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--ink-muted) 45%,transparent) transparent}
:is(.dh-results-body,.image-remix .workflow-results)::-webkit-scrollbar{width:8px}
:is(.dh-results-body,.image-remix .workflow-results)::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--ink-muted) 45%,transparent);border-radius:8px}
/* 底部操作按钮：大胶囊，多个按钮上下排列 */
:is(.dh-settings,.image-remix .studio-settings) .steps-action .btn{min-height:48px;border-radius:999px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ===== 列表/后台等页面：标题横条（状态栏）吸附在顶栏下方，滚动时不飘走 ===== */
.content .page-head{position:sticky;top:64px;z-index:6}
@media (max-width:767px){.content .page-head{top:var(--size-appbar,56px)}}
.content .page-head::before{content:'';position:absolute;left:-1px;right:-1px;bottom:100%;height:16px;background:var(--page-bg,var(--bg));pointer-events:none}

/* ===== 文案卡片精简版：小序号 + 标题 + 一行灰色属性；文案框更轻；时长一行末尾挂感叹号（悬停显示说明）；工具改为一排文字按钮 ===== */
.studio-workbench .workbench-results .script-card{padding:0}
.studio-workbench .workbench-results .script-card .card-head{display:flex;align-items:center;gap:12px;height:auto;min-height:0;padding:16px 18px 10px;border:0;background:none}
.studio-workbench .workbench-results .script-card .card-idx{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:#5d00ff;color:#fff;font:600 14px/1 var(--font-num,var(--font-sans))}
.studio-workbench .workbench-results .script-heading{flex:1;min-width:0;height:auto;max-height:none;display:grid;grid-template-rows:auto auto;gap:2px;overflow:hidden}
.studio-workbench .workbench-results .script-card .card-title{font-size:15px;font-weight:600;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.studio-workbench .workbench-results .script-card .card-sub{display:flex;gap:0;height:auto;font-size:12px;line-height:16px;color:var(--ink-muted);overflow:hidden;white-space:nowrap}
.studio-workbench .workbench-results .script-card .card-sub>span+span::before{content:'·';margin:0 6px;color:var(--ink-disabled)}
.studio-workbench .workbench-results .script-card .card-sub .script-type{color:var(--brand)}
.studio-workbench .workbench-results .script-card .script-card-actions{flex:none;display:flex;align-items:center;gap:4px}
.studio-workbench .workbench-results .script-card .card-body{display:flex;flex-direction:column;gap:10px;padding:0 18px 16px}
.studio-workbench .workbench-results .script-card .script-text{min-height:120px;padding:12px 14px;border-radius:14px;border:1px solid transparent;background:var(--bg-sunken);font-size:14px;line-height:1.75;resize:vertical}
.studio-workbench .workbench-results .script-card .script-text:focus{border-color:color-mix(in srgb,var(--brand) 55%,transparent);outline:none}
.studio-workbench .workbench-results .script-card .dur-line{display:flex;align-items:center;gap:6px;height:22px;line-height:22px;font-size:12px;color:var(--ink-muted);overflow:visible}
/* 感叹号提示标识 + 悬停气泡 */
.studio-workbench .script-warn-slot{display:inline-flex;margin-left:4px}
.studio-workbench .script-warn-slot:empty{display:none}
.studio-workbench .script-warn{position:relative;display:grid;place-items:center;width:22px;height:22px;padding:0;border:0;border-radius:50%;background:color-mix(in srgb,var(--warning,#f0b44c) 16%,transparent);color:var(--warning,#f0b44c);cursor:help}
.studio-workbench .script-warn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.studio-workbench .script-warn::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 8px);z-index:20;width:max-content;max-width:280px;padding:10px 12px;border-radius:12px;background:var(--bg-inverse,#f2f2f2);color:var(--ink-inverse,#000);font:400 12px/1.6 var(--font-sans);text-align:left;white-space:normal;box-shadow:0 12px 28px rgba(0,0,0,.35);opacity:0;visibility:hidden;transform:translate(-30%,4px);transition:opacity .15s,transform .15s;pointer-events:none}
.studio-workbench .script-warn:hover::after,.studio-workbench .script-warn:focus-visible::after{opacity:1;visibility:visible;transform:translate(-30%,0)}
/* 一排轻量文字工具 */
.studio-workbench .workbench-results .script-toolbar{display:flex;align-items:center;gap:4px;flex-wrap:wrap;min-width:0}
.studio-workbench .workbench-results .script-toolbar .script-rewrite-actions,.studio-workbench .workbench-results .script-toolbar .script-extra-tabs{display:flex;align-items:center;gap:2px;height:auto;min-height:0;margin:0;overflow:visible;flex-wrap:wrap}
.studio-workbench .script-tool{height:30px;padding:0 10px;border:0;border-radius:9px;background:none;color:var(--ink);font:500 13px/30px var(--font-sans);white-space:nowrap;cursor:pointer}
.studio-workbench .studio-settings>.panel-head>.script-tool{height:28px;min-height:28px;line-height:28px}
.studio-workbench .script-tool:hover:not(:disabled){background:var(--bg-sunken);color:var(--ink-strong)}
.studio-workbench .script-tool:disabled{color:var(--ink-disabled);cursor:not-allowed}
.studio-workbench .script-tool-toggle.on{background:color-mix(in srgb,var(--brand) 16%,transparent);color:var(--brand)}
.studio-workbench .script-toolbar-sep{width:1px;height:16px;margin:0 6px;background:var(--line)}
.studio-workbench .workbench-results .script-extra-panel{padding:12px 14px;border-radius:14px;background:var(--bg-sunken)}
/* 提示气泡不被卡片裁切，悬停卡片置于上层 */
.studio-workbench .workbench-results .script-card,.studio-workbench .workbench-results .script-card .script-card-content,.studio-workbench .workbench-results .script-card .card-body,.studio-workbench .workbench-results .script-card .dur-line{overflow:visible}
.studio-workbench .workbench-results .script-card{position:relative}
.studio-workbench .workbench-results .script-card:hover,.studio-workbench .workbench-results .script-card:focus-within{z-index:5}
.studio-workbench .script-warn::after{transform:translate(-50%,4px)}
.studio-workbench .script-warn:hover::after,.studio-workbench .script-warn:focus-visible::after{transform:translate(-50%,0)}

/* ===== 文案卡片：生成中整卡加载动画；成片后视频在左、收起的信息在右 ===== */
.studio-workbench .script-card.is-busy .card-body,.studio-workbench .script-card.has-final:not(.show-copy) .card-body{display:none}
.studio-workbench .script-card .card-foot:empty{display:none}
.studio-workbench .script-card .card-foot{padding:0 18px 18px;border:0;background:none}
.render-loader{display:grid;justify-items:center;gap:14px;padding:22px 12px 6px;text-align:center}
.render-stage{position:relative;display:grid;place-items:center;width:100%;height:150px}
.render-ring{--p:0;position:relative;z-index:1;display:grid;place-items:center;width:104px;height:104px;border-radius:50%;
  background:conic-gradient(#7b2dff calc(var(--p)*1%),color-mix(in srgb,var(--ink-muted) 18%,transparent) 0);transition:background .4s}
.render-ring::before{content:'';position:absolute;inset:8px;border-radius:50%;background:var(--bg-raised,#141414)}
.render-ring::after{content:'';position:absolute;inset:-10px;border-radius:50%;border:2px dashed color-mix(in srgb,#7b2dff 45%,transparent);animation:render-spin 9s linear infinite}
.render-ring b{position:relative;font:700 22px/1 var(--font-num,var(--font-sans));color:var(--ink-strong)}
.render-film{position:absolute;left:0;right:0;top:50%;height:34px;margin-top:-17px;display:flex;gap:6px;overflow:hidden;opacity:.55;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent)}
.render-film i{flex:none;width:46px;height:34px;border-radius:5px;background:linear-gradient(180deg,#2a2438,#15121d);border:2px solid #3a3150;box-shadow:inset 0 0 0 4px #1d1828;animation:render-reel 2.4s linear infinite}
.render-film i:nth-child(odd){background:linear-gradient(135deg,#6a1bff,#3200a8)}
.render-copy{display:grid;gap:4px}
.render-copy b{font-size:15px;font-weight:600;color:var(--ink-strong)}
.render-copy span{font-size:12px;color:var(--ink-muted)}
.render-bar{width:min(100%,260px);height:4px;border-radius:4px;background:color-mix(in srgb,var(--ink-muted) 18%,transparent);overflow:hidden}
.render-bar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#9b6bff,#5d00ff);transition:width .4s}
@keyframes render-spin{to{transform:rotate(360deg)}}
@keyframes render-reel{from{transform:translateX(0)}to{transform:translateX(-52px)}}
@media (prefers-reduced-motion:reduce){.render-ring::after,.render-film i{animation:none}}
/* 成片：左视频右信息 */
.studio-workbench .script-card .result-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:start}
.studio-workbench .script-card .result-video{width:100%;max-height:360px;border-radius:14px;background:#000;object-fit:contain}
.studio-workbench .script-card .result-side{display:flex;flex-direction:column;gap:8px;min-width:0}
.studio-workbench .script-card .result-badge{align-self:flex-start;padding:2px 8px;border-radius:999px;background:color-mix(in srgb,var(--success,#6dd58c) 16%,transparent);color:var(--success,#6dd58c);font-size:12px;font-weight:600}
.studio-workbench .script-card .result-meta{margin:0;font-size:12px;color:var(--ink-muted)}
.studio-workbench .script-card .result-text{margin:0;font-size:13px;line-height:1.6;color:var(--ink);display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.studio-workbench .script-card .result-actions{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.studio-workbench .script-card .result-actions .btn{min-height:40px;border-radius:999px}
.studio-workbench .script-card .result-actions .script-tool{align-self:flex-start}
.studio-workbench .script-card.has-final.show-copy .result-text{display:none}
.ai-workbench .workbench-results .script-card .card-foot:has(.render-loader){display:block}

/* ===== 成片卡重设计：左视频框 + 右品牌信息卡（等高），下载按钮贴底 ===== */
.studio-workbench .script-card .result-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:14px;align-items:stretch}
.studio-workbench .script-card .result-media{position:relative;display:grid;place-items:center;min-height:0;border-radius:16px;background:#000;overflow:hidden;border:1px solid var(--line)}
.studio-workbench .script-card .result-media .result-video{display:block;width:100%;height:100%;max-height:420px;border-radius:0;object-fit:contain}
.studio-workbench .script-card .result-sheet{position:relative;display:flex;flex-direction:column;gap:14px;min-width:0;padding:16px;border-radius:16px;overflow:hidden;
  background:radial-gradient(120% 70% at 100% 0%,color-mix(in srgb,#5d00ff 26%,transparent),transparent 60%),var(--bg-sunken);border:1px solid color-mix(in srgb,#5d00ff 22%,var(--line))}
.studio-workbench .script-card .result-brand{display:flex;align-items:center;justify-content:space-between;gap:8px}
.studio-workbench .script-card .result-logo{width:92px;height:27px;color:var(--ink-strong)}
.studio-workbench .script-card .result-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;background:color-mix(in srgb,var(--success,#6dd58c) 14%,transparent);color:var(--success,#6dd58c);font-size:11px;font-weight:600;white-space:nowrap}
.studio-workbench .script-card .result-badge::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.studio-workbench .script-card .result-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.studio-workbench .script-card .result-tile{display:grid;gap:2px;padding:8px 10px;border-radius:12px;background:color-mix(in srgb,var(--ink-strong) 5%,transparent)}
.studio-workbench .script-card .result-tile span{font-size:11px;color:var(--ink-muted)}
.studio-workbench .script-card .result-tile b{font:600 15px/20px var(--font-num,var(--font-sans));color:var(--ink-strong)}
.studio-workbench .script-card .result-copy{display:grid;gap:4px;min-height:0;flex:1}
.studio-workbench .script-card .result-copy>span{font-size:11px;color:var(--ink-muted)}
.studio-workbench .script-card .result-copy .result-text{margin:0;font-size:13px;line-height:1.65;color:var(--ink);display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.studio-workbench .script-card .result-actions{display:flex;flex-direction:row;align-items:center;gap:8px;margin-top:auto}
.studio-workbench .script-card .result-actions .btn.primary{flex:1;min-height:42px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.studio-workbench .script-card .result-actions .btn.primary .icon{width:16px;height:16px}
.studio-workbench .script-card .result-actions .script-tool{flex:none;align-self:center;height:42px;padding:0 12px;border-radius:999px;border:1px solid var(--line)}
.studio-workbench .script-card.has-final.show-copy .result-copy{display:none}
.studio-workbench .script-card.has-final.show-copy .result-actions{margin-top:auto}
/* 卡片较窄时：信息卡更紧凑，下载按钮整行贴底，“展开文案”变为其上方的文字链接 */
.studio-workbench .workbench-results .script-card.has-final{container-type:inline-size;container-name:scriptcard}
.studio-workbench .script-card .result-tile span{white-space:nowrap}
@container scriptcard (max-width:560px){
  .studio-workbench .script-card .result-sheet{padding:12px;gap:10px}
  .studio-workbench .script-card .result-logo{width:70px;height:21px}
  .studio-workbench .script-card .result-badge{padding:2px 7px;font-size:10px}
  .studio-workbench .script-card .result-tiles{gap:5px}
  .studio-workbench .script-card .result-tile{padding:6px 6px}
  .studio-workbench .script-card .result-tile b{font-size:13px}
  .studio-workbench .script-card .result-actions{flex-direction:column;align-items:stretch;gap:4px}
  .studio-workbench .script-card .result-actions .script-tool{order:-1;height:28px;border:0;padding:0;align-self:flex-start;color:var(--ink-muted);font-size:12px}
  .studio-workbench .script-card .result-actions .btn.primary{width:100%;min-height:38px;font-size:13px}
  .studio-workbench .script-card .result-copy .result-text{-webkit-line-clamp:6;font-size:12px}
}
.studio-workbench .script-card .result-copy{align-content:start}

/* ===== 生成成片后：左侧设置栏收起、结果铺满；“显示设置”可重新展开 ===== */
.ai-workbench.studio-workbench.is-settings-collapsed{grid-template-columns:minmax(0,1fr)}
.ai-workbench.studio-workbench.is-settings-collapsed>.studio-settings{display:none}
.studio-workbench .results-head .settings-toggle{flex:none;border-radius:999px}
/* 一键下载全部成片：放在选择工具条最右侧 */
.studio-workbench .workbench-scope .form-actions{align-items:center}
.studio-workbench .workbench-scope .download-all{margin-left:auto;display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:0 16px}
.studio-workbench .workbench-scope .download-all .icon{width:15px;height:15px}
/* 成片卡上的“重新生成” */
.studio-workbench .script-card .result-actions .result-regen{display:inline-flex;align-items:center;gap:5px}
.studio-workbench .script-card .result-actions .result-regen .icon{width:14px;height:14px}
.studio-workbench .script-card.is-busy .result-grid{display:none}
@container scriptcard (max-width:560px){
  .studio-workbench .script-card .result-actions .result-regen{order:-1;height:28px;border:0;padding:0;align-self:flex-start;color:var(--ink-muted);font-size:12px}
}

/* ===== 步骤条重设计：整条轨道 + 从第一步到当前步骤连成一整块品牌紫（满色块），步骤之间细线串联，字号统一 ===== */
.studio-workbench .studio-stepbar.has-step-icons{padding:6px 6px 6px 14px;gap:10px}
.studio-workbench .studio-stepbar.has-step-icons>nav{position:relative;isolation:isolate;border-radius:14px;background:var(--bg-sunken);overflow:hidden}
.studio-workbench .studio-stepbar.has-step-icons>nav::before{content:'';display:block;position:absolute;left:0;top:0;bottom:0;width:var(--fill,25%);z-index:-1;border-radius:14px;
  background:linear-gradient(180deg,#6a14ff,#5200e6);box-shadow:0 8px 18px -8px rgba(93,0,255,.7),inset 0 1px 0 rgba(255,255,255,.18);transition:width .35s ease;-webkit-mask-image:none;mask-image:none}
.studio-workbench .studio-stepbar.has-step-icons>nav::after{content:none}
.studio-workbench .studio-stepbar.has-step-icons ol{padding:0;gap:0}
.studio-workbench .studio-stepbar.has-step-icons li{position:relative}
.studio-workbench .studio-stepbar.has-step-icons li+li{border-left:0}
.studio-workbench .studio-stepbar.has-step-icons li+li::before{content:'';display:block;position:absolute;left:0;top:14px;bottom:14px;width:1px;flex:none;margin:0;background:var(--line)}
.studio-workbench .studio-stepbar.has-step-icons li:has(button[aria-current])::before,.studio-workbench .studio-stepbar.has-step-icons li:has(button[data-complete])::before{background:rgba(255,255,255,.28)}
.studio-workbench .studio-stepbar.has-step-icons button,.studio-workbench .studio-stepbar.has-step-icons button[aria-current],.studio-workbench .studio-stepbar.has-step-icons button[data-complete]{
  min-height:52px;gap:10px;padding:0 18px;border-radius:0;background:transparent;box-shadow:none}
.studio-workbench .studio-stepbar.has-step-icons button:hover:not(:disabled){background:rgba(255,255,255,.06)}
.studio-workbench .studio-stepbar.has-step-icons .dh-stepbar-glyph{width:20px;height:20px}
.studio-workbench .studio-stepbar.has-step-icons .dh-stepbar-glyph svg{width:18px;height:18px}
.studio-workbench .studio-stepbar.has-step-icons .dh-stepbar-text{gap:2px}
.studio-workbench .studio-stepbar.has-step-icons .dh-stepbar-text b{font-size:14px;line-height:20px;font-weight:600}
.studio-workbench .studio-stepbar.has-step-icons .dh-stepbar-state{font-size:12px;line-height:16px}
/* 色块内：白字白图标；色块外：灰色；未解锁更淡 */
.studio-workbench .studio-stepbar.has-step-icons button[aria-current],.studio-workbench .studio-stepbar.has-step-icons button[data-complete]{color:#fff}
.studio-workbench .studio-stepbar.has-step-icons button[aria-current] .dh-stepbar-glyph,.studio-workbench .studio-stepbar.has-step-icons button[data-complete] .dh-stepbar-glyph{color:#fff}
.studio-workbench .studio-stepbar.has-step-icons button[aria-current] .dh-stepbar-state,.studio-workbench .studio-stepbar.has-step-icons button[data-complete] .dh-stepbar-state{color:rgba(255,255,255,.72)}
.studio-workbench .studio-stepbar.has-step-icons button:not([aria-current]):not([data-complete]){color:var(--ink)}
.studio-workbench .studio-stepbar.has-step-icons button:not([aria-current]):not([data-complete]) .dh-stepbar-glyph{color:var(--ink-muted)}
.studio-workbench .studio-stepbar.has-step-icons button:disabled{color:var(--ink-disabled)}
.studio-workbench .studio-stepbar.has-step-icons button:disabled .dh-stepbar-glyph,.studio-workbench .studio-stepbar.has-step-icons button:disabled .dh-stepbar-state{color:var(--ink-disabled)}
/* 当前步骤：图标外加一个白色圆底，突出“正在这一步” */
.studio-workbench .studio-stepbar.has-step-icons button[aria-current] .dh-stepbar-glyph{width:28px;height:28px;border-radius:50%;background:#fff;color:#5d00ff}
.studio-workbench .studio-stepbar.has-step-icons button[aria-current] .dh-stepbar-glyph svg{width:16px;height:16px}
@media (prefers-reduced-motion:reduce){.studio-workbench .studio-stepbar.has-step-icons>nav::before{transition:none}}

/* ===== 文案生成（第 2 步）：业务类型横向色块、切换栏、条数步进器、时长档位 ===== */
.studio-workbench .workbench-writing-settings{gap:18px}
.studio-workbench .field-label{margin:0 0 8px;font-size:13px;font-weight:600;color:var(--ink-strong)}
.studio-workbench .copy-template-description,.studio-workbench .seg-hint{margin:8px 0 0;font-size:12px;line-height:1.5;color:var(--ink-muted)}
/* 业务类型：小块横排，可左右滑动；“全部”铺开 */
.studio-workbench .type-field{display:flex;align-items:center;gap:6px;min-width:0}
.studio-workbench .type-chips{flex:1;min-width:0;display:flex;gap:6px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;padding:2px;
  -webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
.studio-workbench .type-chips::-webkit-scrollbar{display:none}
.studio-workbench .type-field.is-expanded .type-chips{flex-wrap:wrap;overflow:visible;-webkit-mask-image:none;mask-image:none}
.studio-workbench .type-chip{flex:none;scroll-snap-align:start;height:32px;padding:0 12px;border-radius:10px;border:1px solid var(--line);background:var(--bg-sunken);color:var(--ink);font:500 13px/30px var(--font-sans);white-space:nowrap;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.studio-workbench .type-chip:hover{border-color:color-mix(in srgb,#5d00ff 50%,var(--line))}
.studio-workbench .type-chip.on{background:#5d00ff;border-color:#5d00ff;color:#fff;box-shadow:0 8px 14px -8px rgba(93,0,255,.7)}
.studio-workbench .type-chips-more{flex:none;align-self:flex-start;height:32px;padding:0 10px;border:0;border-radius:10px;background:none;color:var(--ink-muted);font-size:12px;cursor:pointer}
.studio-workbench .type-chips-more:hover{color:var(--ink-strong);background:var(--bg-sunken)}
/* 切换栏（分段控件） */
.studio-workbench .seg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px;padding:4px;border-radius:12px;background:var(--bg-sunken);border:1px solid var(--line)}
.studio-workbench .seg-btn{height:34px;border:0;border-radius:9px;background:none;color:var(--ink-muted);font:500 13px/34px var(--font-sans);white-space:nowrap;cursor:pointer;transition:background .15s,color .15s}
.studio-workbench .seg-btn:hover{color:var(--ink-strong)}
.studio-workbench .seg-btn.on{background:#5d00ff;color:#fff;box-shadow:0 6px 12px -6px rgba(93,0,255,.7)}
/* 条数：步进器 */
.studio-workbench .workbench-count,.studio-workbench .workbench-duration{display:block}
.studio-workbench .count-control{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.studio-workbench .count-stepper{display:inline-flex;align-items:center;height:40px;padding:3px;border-radius:12px;background:var(--bg-sunken);border:1px solid var(--line)}
.studio-workbench .count-stepper button{width:34px;height:34px;border:0;border-radius:9px;background:none;color:var(--ink-strong);font:500 18px/1 var(--font-sans);cursor:pointer}
.studio-workbench .count-stepper button:hover{background:color-mix(in srgb,#5d00ff 22%,transparent)}
.studio-workbench .count-stepper input{width:44px;height:34px;min-height:0;padding:0;border:0;background:none;text-align:center;font:600 16px/34px var(--font-num,var(--font-sans));color:var(--ink-strong);-moz-appearance:textfield;appearance:textfield}
.studio-workbench .count-stepper input::-webkit-outer-spin-button,.studio-workbench .count-stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.studio-workbench .count-stepper input:focus{outline:none}
.studio-workbench .count-control .small{font-size:12px}
/* 时长：档位 + 紫色进度滑条 */
.studio-workbench .duration-block{display:grid;gap:10px}
.studio-workbench .dur-presets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.studio-workbench .dur-preset{height:32px;border-radius:10px;border:1px solid var(--line);background:var(--bg-sunken);color:var(--ink);font:600 13px/30px var(--font-num,var(--font-sans));cursor:pointer}
.studio-workbench .dur-preset:hover{border-color:color-mix(in srgb,#5d00ff 50%,var(--line))}
.studio-workbench .dur-preset.on{background:#5d00ff;border-color:#5d00ff;color:#fff}
.studio-workbench .duration-control{display:grid;grid-template-columns:minmax(0,1fr) 76px;gap:10px;align-items:center}
.studio-workbench .duration-control input[type=range]{-webkit-appearance:none;appearance:none;height:6px;border-radius:6px;background:linear-gradient(90deg,#5d00ff 0 var(--pct,18%),color-mix(in srgb,var(--ink-muted) 25%,transparent) var(--pct,18%));cursor:pointer}
.studio-workbench .duration-control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;border:4px solid #5d00ff;box-shadow:0 2px 8px rgba(93,0,255,.5)}
.studio-workbench .duration-control input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fff;border:4px solid #5d00ff}
.studio-workbench .duration-value{display:flex;align-items:center;height:36px;padding:0 10px;border-radius:10px;background:var(--bg-sunken);border:1px solid var(--line)}
.studio-workbench .duration-value input{width:100%;min-height:0;height:34px;padding:0;border:0;background:none;font:600 15px/34px var(--font-num,var(--font-sans));color:var(--ink-strong)}
.studio-workbench .duration-value span{font-size:12px;color:var(--ink-muted)}
/* 滑条：细轨道（背景只画在中间 6px），左栏标题吸顶时不透明 */
.studio-workbench .duration-control input[type=range]{height:20px;min-height:0;background:transparent;padding:0;border:0}
.studio-workbench .duration-control input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:6px;background:linear-gradient(90deg,#5d00ff 0 var(--pct,18%),color-mix(in srgb,var(--ink-muted) 25%,transparent) var(--pct,18%))}
.studio-workbench .duration-control input[type=range]::-webkit-slider-thumb{margin-top:-6px}
.studio-workbench .duration-control input[type=range]::-moz-range-track{height:6px;border-radius:6px;background:color-mix(in srgb,var(--ink-muted) 25%,transparent)}
.studio-workbench .duration-control input[type=range]::-moz-range-progress{height:6px;border-radius:6px;background:#5d00ff}
.studio-workbench .studio-settings>.studio-settings-head{background:var(--bg-raised);z-index:3}
/* 素材库格子：每排 4 个（每格不小于 84px）；放不下时自动 3 个 */
.studio-workbench .lib-tiles{grid-template-columns:repeat(auto-fill,minmax(max(84px,calc((100% - 30px) / 4)),1fr));gap:10px}
@container (max-width:290px){.studio-workbench .lib-tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}}
.studio-workbench .lib-tile{aspect-ratio:4/5;border-radius:14px}
.studio-workbench .lib-tile-text{padding:6px 8px 8px}
.studio-workbench .lib-tile-text b{font-size:12px;line-height:16px}
.studio-workbench .lib-tile-text small{font-size:10.5px;line-height:14px}
.studio-workbench .lib-tile-plus{width:30px;height:30px;font-size:20px}
.studio-workbench .lib-tile-add b{font-size:12px}
.studio-workbench .lib-tile-check{top:6px;right:6px;width:18px;height:18px}
.studio-workbench .lib-tile-check::after{left:6.5px;top:3.5px;width:3.5px;height:7.5px}
.studio-workbench .lib-tile.is-on .lib-tile-cover{margin:4px 4px 0;border-radius:10px}
/* 左栏略加宽以容纳每排 3～4 个素材库（约 3.2:8，最窄 340px）；格子最小 80px */
.ai-workbench.studio-workbench{grid-template-columns:minmax(340px,3.2fr) minmax(0,8fr)}
.studio-workbench .lib-tiles{grid-template-columns:repeat(auto-fill,minmax(max(80px,calc((100% - 30px) / 4)),1fr))}
/* 业务类型色块：去掉“全部”后，全部放得下时不再渐隐 */
.studio-workbench .type-chips{-webkit-mask-image:none;mask-image:none}
/* 右侧素材预览：每排 5～6 个小卡片（每卡不小于 140px，最多 6 列） */
.studio-workbench .workbench-materials .mats{grid-template-columns:repeat(auto-fill,minmax(max(140px,calc((100% - 60px) / 6)),1fr));gap:12px}
.studio-workbench .workbench-materials .mat{border-radius:14px}
.studio-workbench .workbench-materials .mat-thumb .badge{font-size:10px;padding:1px 6px}
.studio-workbench .workbench-materials .mat-thumb .dur{font-size:10px}
.studio-workbench .workbench-materials .mat-open .icon{width:26px;height:26px}
.studio-workbench .workbench-materials .mat-info{padding:8px 10px 10px}
.studio-workbench .workbench-materials .mat-info .n{font-size:13px;line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.studio-workbench .workbench-materials .mat-info .s{font-size:11px;line-height:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.studio-workbench .workbench-materials .mat-info .form-actions{margin-top:8px;gap:6px}
.studio-workbench .workbench-materials .mat-info .btn.sm{height:28px;min-height:28px;padding:0 10px;font-size:12px;border-radius:8px}
.studio-workbench .workbench-materials .mat-remove{width:28px}
.studio-workbench .workbench-materials .mats{grid-template-columns:repeat(auto-fill,minmax(max(118px,calc((100% - 60px) / 6)),1fr))}
.studio-workbench .workbench-materials .mat-info{padding:8px}
.studio-workbench .workbench-materials .mat-info .btn.sm:not(.mat-remove){padding:0 8px;font-size:11.5px;min-width:0;flex:1}
/* 条数预设 */
.studio-workbench .count-control{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 10px;align-items:center}
.studio-workbench .count-presets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.studio-workbench .count-preset{height:40px;border-radius:12px;border:1px solid var(--line);background:var(--bg-sunken);color:var(--ink);font:600 13px/38px var(--font-sans);white-space:nowrap;cursor:pointer}
.studio-workbench .count-preset:hover{border-color:color-mix(in srgb,#5d00ff 50%,var(--line))}
.studio-workbench .count-preset.on{background:#5d00ff;border-color:#5d00ff;color:#fff;box-shadow:0 8px 14px -8px rgba(93,0,255,.7)}
.studio-workbench .count-control>.small{grid-column:1/-1}

/* ===== 配音（第 3 步）：音色类型切换 + 音色列表（点选/试听）+ 语速档位 ===== */
.studio-workbench .voice-list{display:grid;gap:8px;max-height:min(46vh,380px);overflow-y:auto;padding:2px;margin:-2px}
.studio-workbench .voice-row{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:8px 10px 8px 8px;border-radius:14px;border:1px solid var(--line);background:var(--bg-sunken);color:var(--ink);text-align:left;font:inherit;cursor:pointer;transition:border-color .15s,background .15s}
.studio-workbench .voice-row:hover{border-color:color-mix(in srgb,#5d00ff 50%,var(--line))}
.studio-workbench .voice-row:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.studio-workbench .voice-row.on{background:#5d00ff;border-color:#5d00ff;color:#fff;box-shadow:0 10px 18px -10px rgba(93,0,255,.7)}
.studio-workbench .voice-avatar{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:linear-gradient(145deg,#a27bff,#4100c4);color:#fff;font:600 15px/1 var(--font-sans)}
.studio-workbench .voice-row.on .voice-avatar{background:rgba(255,255,255,.2)}
.studio-workbench .voice-meta{flex:1;min-width:0;display:grid;gap:2px}
.studio-workbench .voice-meta b{font-size:14px;font-weight:600;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.studio-workbench .voice-meta small{font-size:12px;line-height:16px;color:var(--ink-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.studio-workbench .voice-row.on .voice-meta small{color:rgba(255,255,255,.75)}
.studio-workbench .voice-play{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:0;background:color-mix(in srgb,var(--ink-strong) 10%,transparent);color:inherit;cursor:pointer}
.studio-workbench .voice-play:hover{background:color-mix(in srgb,var(--ink-strong) 18%,transparent)}
.studio-workbench .voice-row.on .voice-play{background:#fff;color:#5d00ff}
.studio-workbench .voice-play .icon{width:14px;height:14px}
.studio-workbench .voice-add{border-style:dashed;border-color:color-mix(in srgb,#5d00ff 55%,var(--line));background:color-mix(in srgb,#5d00ff 6%,var(--bg-sunken))}
.studio-workbench .voice-add .voice-avatar{background:#5d00ff;font-size:22px;font-weight:400}
.studio-workbench .voice-speed{display:grid;gap:8px}
.studio-workbench .voice-speed .field-label{margin:0}
.studio-workbench .voice-speed .duration-control{grid-template-columns:minmax(0,1fr) 44px}
.studio-workbench .speed-value{font:600 14px/1 var(--font-num,var(--font-sans));color:var(--ink-strong);text-align:right}
.studio-workbench .studio-settings .steps-action .btn,.studio-workbench .step-body>.stack>.btn.block{border-radius:999px}
/* 未勾选的文案卡：整卡置灰（勾选框与删除按钮保持清晰可点） */
.studio-workbench .workbench-results .script-card{transition:opacity .2s,filter .2s,border-color .2s}
.studio-workbench .workbench-results .script-card.is-unselected{border-color:var(--line);box-shadow:none}
.studio-workbench .workbench-results .script-card.is-unselected>.script-card-content,.studio-workbench .workbench-results .script-card.is-unselected .card-idx,.studio-workbench .workbench-results .script-card.is-unselected .script-heading{opacity:.38;filter:grayscale(1)}
.studio-workbench .workbench-results .script-card.is-unselected .card-idx{background:var(--ink-muted)}

/* ===== 视频包装（第 4 步）：基础设置默认收起 + 自定义背景音乐下拉；核心是下方风格模板 ===== */
.studio-workbench .pack-basic{border:1px solid var(--line);border-radius:16px;background:var(--bg-sunken);overflow:visible}
.studio-workbench .pack-basic>summary{display:flex;align-items:center;gap:10px;min-height:52px;padding:0 14px;list-style:none;cursor:pointer;border-radius:16px}
.studio-workbench .pack-basic>summary::-webkit-details-marker{display:none}
.studio-workbench .pack-basic>summary:hover{background:color-mix(in srgb,var(--ink-strong) 4%,transparent)}
.studio-workbench .pack-basic-title{flex:none;font-size:14px;font-weight:600;color:var(--ink-strong)}
.studio-workbench .pack-basic-summary{flex:1;min-width:0;font-size:12px;color:var(--ink-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.studio-workbench .pack-basic-caret{flex:none;width:8px;height:8px;margin-right:4px;border:solid var(--ink-muted);border-width:0 1.6px 1.6px 0;transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.studio-workbench .pack-basic[open] .pack-basic-caret{transform:rotate(-135deg) translateY(-2px)}
.studio-workbench .pack-basic[open]>summary{border-bottom:1px solid var(--line);border-radius:16px 16px 0 0}
.studio-workbench .pack-basic-body{display:grid;gap:14px;padding:14px}
.studio-workbench .pack-basic-row .field-label,.studio-workbench .pack-gain .field-label{margin-bottom:6px}
.studio-workbench .pack-basic .chips{display:flex;flex-wrap:wrap;gap:6px}
.studio-workbench .pack-basic .chip{height:32px;padding:0 12px;border-radius:10px;font-size:13px}
.studio-workbench .pack-basic .chip.on{background:#5d00ff;border-color:#5d00ff;color:#fff}
.studio-workbench .pack-basic-gains{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.studio-workbench .gain-control{grid-template-columns:minmax(0,1fr) 38px}
.studio-workbench .gain-value{font:600 12px/1 var(--font-num,var(--font-sans));color:var(--ink-strong);text-align:right}
.studio-workbench .gain-control input[type=range]{height:20px;-webkit-appearance:none;appearance:none;background:transparent;padding:0;border:0;min-height:0}
.studio-workbench .gain-control input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:6px;background:linear-gradient(90deg,#5d00ff 0 var(--pct,50%),color-mix(in srgb,var(--ink-muted) 25%,transparent) var(--pct,50%))}
.studio-workbench .gain-control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;margin-top:-6px;width:18px;height:18px;border-radius:50%;background:#fff;border:4px solid #5d00ff}
/* 背景音乐下拉 */
.studio-workbench .bgm-picker{position:relative}
.studio-workbench .bgm-trigger{display:flex;align-items:center;gap:10px;width:100%;height:44px;padding:0 12px;border-radius:12px;border:1px solid var(--line);background:var(--bg-raised);color:var(--ink-strong);font:500 14px/1 var(--font-sans);text-align:left;cursor:pointer}
.studio-workbench .bgm-trigger:hover,.studio-workbench .bgm-trigger[aria-expanded=true]{border-color:color-mix(in srgb,#5d00ff 60%,var(--line))}
.studio-workbench .bgm-icon{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:color-mix(in srgb,#5d00ff 22%,transparent);color:#b48cff}
.studio-workbench .bgm-icon svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.studio-workbench .bgm-current{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.studio-workbench .bgm-caret{flex:none;width:7px;height:7px;border:solid var(--ink-muted);border-width:0 1.6px 1.6px 0;transform:rotate(45deg) translateY(-2px)}
.studio-workbench .bgm-trigger[aria-expanded=true] .bgm-caret{transform:rotate(-135deg)}
.studio-workbench .bgm-menu{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;max-height:280px;overflow-y:auto;padding:6px;border-radius:14px;border:1px solid var(--line);background:var(--bg-raised);box-shadow:0 18px 40px rgba(0,0,0,.45)}
.studio-workbench .bgm-group-label{padding:8px 10px 4px;font-size:11px;color:var(--ink-muted)}
.studio-workbench .bgm-option{display:flex;align-items:center;width:100%;height:36px;padding:0 10px 0 28px;border:0;border-radius:9px;background:none;color:var(--ink);font:400 13px/1 var(--font-sans);text-align:left;cursor:pointer;position:relative}
.studio-workbench .bgm-option:hover{background:var(--bg-sunken)}
.studio-workbench .bgm-option.on{background:color-mix(in srgb,#5d00ff 18%,transparent);color:var(--ink-strong);font-weight:600}
.studio-workbench .bgm-option.on::before{content:'';position:absolute;left:11px;top:12px;width:4px;height:8px;border:solid #9b6bff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.studio-workbench .pack-templates{margin-top:4px}
/* 配音区：标题行右侧“重新生成配音” */
.studio-workbench .speech-head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.studio-workbench .speech-regen,.regen-speech .speech-regen{display:inline-flex;align-items:center;gap:5px;color:var(--brand)}
.studio-workbench .speech-regen .icon{width:14px;height:14px}
.regen-speech .duration-control{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:10px;align-items:center}
.regen-speech .speed-value{text-align:right;font:600 14px/1 var(--font-num,var(--font-sans))}
/* 结果表头：标题 + 选择工具条（已选 N / 仅选本轮 / 全选 / 清空 / 下载全部）+ 进度；状态说明行收起 */
.studio-workbench .workbench-results>.results-head{flex-wrap:nowrap;gap:12px}
.studio-workbench .workbench-results>.results-head>h2{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.studio-workbench .results-head .workbench-scope{flex:1;min-width:0;margin:0;padding:0;border:0;background:none;gap:0}
.studio-workbench .results-head .workbench-scope .form-actions{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.studio-workbench .results-head .workbench-scope .form-actions::-webkit-scrollbar{display:none}
.studio-workbench .results-head .workbench-scope .caption{white-space:nowrap;cursor:help;text-decoration:underline dotted;text-underline-offset:3px}
.studio-workbench .results-head .workbench-scope .btn.sm{flex:none;height:30px;min-height:30px;padding:0 10px;border-radius:999px;font-size:12px}
.studio-workbench .results-head .workbench-scope .download-all{height:30px;margin-left:auto}
.studio-workbench .results-head .studio-flow-stage{flex:none;cursor:help}
.studio-workbench .workbench-results>.workflow:has(>.workflow-hint[hidden]){display:none}
/* 表头较窄时：“已选 N / 共 M”缩短、下载按钮只留图标和数量、隐藏“N 条脚本” */
/* Keep the earlier source card breakpoint as well as the later toolbar query. */
.studio-workbench .workbench-results{container-type:inline-size;container-name:results script-results}
@container results (max-width:980px){
  .studio-workbench .results-head .download-all .dl-label{display:none}
  .studio-workbench .results-head .download-all{padding:0 10px}
  .studio-workbench .workbench-results>.results-head>.small.muted:last-child{display:none}
}
@container results (max-width:760px){
  .studio-workbench .results-head .workbench-scope .caption{display:none}
}

/* ===== 数字人口播 / 图文二创：沿用智能剪辑的设计语言（满色块步骤条、简洁左栏标题、音色列表、档位 + 滑条、胶囊按钮） ===== */
.dh-studio.studio-workbench>.studio-stepbar{top:0}
.dh-studio.studio-workbench .studio-stepbar.has-step-icons button{padding:0 14px}
.dh-studio.studio-workbench .studio-stepbar.has-step-icons .dh-stepbar-text b{font-size:13px}
.dh-studio.studio-workbench .dh-settings>.panel-head{border-bottom:0}
.dh-studio .dh-speech-submit .btn{width:100%;min-height:44px;border-radius:999px}
.dh-studio .voice-speed{gap:8px}
.dh-studio .voice-speed .duration-control{grid-template-columns:minmax(0,1fr) 44px}
.dh-studio .voice-list{max-height:min(40vh,340px)}
/* 通用：所有创作页的 chip / 选中态使用品牌紫，按钮为胶囊 */
.studio-workbench .chip.on,.studio-workbench .chip[aria-pressed=true]{background:#5d00ff;border-color:#5d00ff;color:#fff}
.studio-workbench .steps-action .btn{border-radius:999px;min-height:48px}
.studio-workbench input[type=range]:not(.gain-control input){accent-color:#5d00ff}
.studio-workbench .duration-control input[type=range]{-webkit-appearance:none;appearance:none;height:20px;background:transparent;padding:0;border:0;min-height:0}
.studio-workbench .duration-control input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:6px;background:linear-gradient(90deg,#5d00ff 0 var(--pct,50%),color-mix(in srgb,var(--ink-muted) 25%,transparent) var(--pct,50%))}
.studio-workbench .duration-control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;margin-top:-6px;width:18px;height:18px;border-radius:50%;background:#fff;border:4px solid #5d00ff}
/* 所有创作页的二选一/多选一按钮组（aria-pressed 按钮组、图文二创 tabs）统一为紫色切换栏 */
.studio-workbench .studio-settings :is([role=group]:has(>.btn[aria-pressed]),.tabs){display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px;padding:4px;border-radius:12px;background:var(--bg-sunken);border:1px solid var(--line)}
.studio-workbench .studio-settings :is([role=group]:has(>.btn[aria-pressed]),.tabs)>button{height:34px;min-height:34px;padding:0 8px;border:0;border-radius:9px;background:none;color:var(--ink-muted);font:500 13px/34px var(--font-sans);white-space:nowrap;box-shadow:none}
.studio-workbench .studio-settings :is([role=group]:has(>.btn[aria-pressed]),.tabs)>button:hover{color:var(--ink-strong);background:none}
.studio-workbench .studio-settings :is([role=group]:has(>.btn[aria-pressed]),.tabs)>button:is([aria-pressed=true],[aria-selected=true],.on,.active){background:#5d00ff;color:#fff;box-shadow:0 6px 12px -6px rgba(93,0,255,.7)}
/* 数字人形象：与素材库格子一致的小卡片，选中为整块品牌紫；封面缺失时显示占位 */
.dh-studio.studio-workbench .dh-portrait-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(max(84px,calc((100% - 30px) / 4)),1fr));gap:10px}
.dh-studio.studio-workbench .dh-portrait-card{display:flex;flex-direction:column;gap:0;padding:0;overflow:hidden;border-radius:14px;border:1px solid var(--line);background:var(--bg-sunken);box-shadow:var(--card-lift-sm);text-align:left;cursor:pointer;transition:transform .2s,box-shadow .2s}
.dh-studio.studio-workbench .dh-portrait-card:hover{transform:translateY(-3px);box-shadow:var(--card-lift-hover)}
.dh-studio.studio-workbench .dh-portrait-card img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;color:transparent;font-size:0;
  background:linear-gradient(160deg,#2a1f45,#141018) center/cover}
.dh-studio.studio-workbench .dh-portrait-name{padding:6px 8px 0;font-size:12px;font-weight:600;line-height:16px;color:var(--ink-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dh-studio.studio-workbench .dh-portrait-expiry{padding:0 8px 8px;font-size:10.5px;line-height:14px;color:var(--ink-muted)}
.dh-studio.studio-workbench .dh-portrait-card[aria-pressed=true]{background:#5d00ff;border-color:#5d00ff;box-shadow:0 14px 22px -12px rgba(93,0,255,.65)}
.dh-studio.studio-workbench .dh-portrait-card[aria-pressed=true] img{margin:4px 4px 0;width:calc(100% - 8px);border-radius:10px}
.dh-studio.studio-workbench .dh-portrait-card[aria-pressed=true] :is(.dh-portrait-name,.dh-portrait-expiry){color:#fff}
/* 图文二创左右栏底色与智能剪辑一致；四选一切换栏字号略小 */
.image-remix .workbench.studio-workbench>:is(.studio-settings,.workflow-results){background:var(--bg-raised)}
.image-remix .studio-settings .tabs>button{font-size:12px;padding:0 4px}
/* 图文二创内部重定义了 --bg-raised，深色主题下左右栏直接使用与智能剪辑相同的面板色 */
:root[data-theme="dark"] .image-remix .workbench.studio-workbench>:is(.studio-settings,.workflow-results){background:#141414}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .image-remix .workbench.studio-workbench>:is(.studio-settings,.workflow-results){background:#141414}}

/* ===== 数字人第 2 步：左选音色；右上语速卡、右下配音成品（音波播放器） ===== */
.dh-studio :is(.dh-speed-card,.dh-speech-result){display:grid;gap:14px;padding:18px 20px;border-radius:18px;border:1px solid var(--line);background:var(--bg-sunken);box-shadow:var(--card-lift-sm)}
.dh-studio .dh-speech-result{margin-top:14px}
.dh-studio .dh-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.dh-studio .dh-card-title{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--ink-strong)}
.dh-studio .dh-card-title::before{content:'';width:6px;height:6px;border-radius:50%;background:#7b2dff}
.dh-studio .dh-speed-card .speed-value{font:700 26px/1 var(--font-num,var(--font-sans));color:var(--ink-strong)}
.dh-studio .dh-speed-card .duration-control{grid-template-columns:minmax(0,1fr)}
.dh-studio .dh-speed-card .dur-presets{grid-template-columns:repeat(4,minmax(0,1fr))}
.dh-studio .dh-speech-result .dh-task-card{border:0;background:none;box-shadow:none;padding:0}
.dh-studio .dh-speech-result .dh-task-card>.panel-head{padding:0 0 8px;border:0}
.dh-studio .dh-speech-result .empty{min-height:120px}
/* 音波播放器（全站声音成品通用） */
.dh-wave{--wave-rest:color-mix(in srgb,var(--ink-muted) 45%,transparent);display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;padding:6px 0}
.dh-wave audio{display:none}
.dh-wave-play{display:grid;place-items:center;width:52px;height:52px;padding:0;border:0;border-radius:50%;background:#5d00ff;color:#fff;cursor:pointer;box-shadow:0 10px 18px -8px rgba(93,0,255,.7)}
.dh-wave-play:hover{background:#6a14ff}
.dh-wave-play .icon{width:20px;height:20px;fill:currentColor}
.dh-wave-track{position:relative;height:56px;cursor:pointer;border-radius:10px}
.dh-wave-track:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.dh-wave-canvas{display:block;width:100%;height:100%}
.dh-wave-time{font:500 12px/1 var(--font-num,var(--font-sans));color:var(--ink-muted);white-space:nowrap}

/* 数字人第 1 步：左侧标题 + 输入框，右侧文案预览框 */
.dh-copy-hero{display:flex;flex-direction:column;gap:22px;padding-top:6px}
.dh-studio .dh-settings .dh-copy-ask{margin:0;display:flex;flex-direction:column;gap:6px;font-weight:800;letter-spacing:.01em;color:var(--text,#fff)}
.dh-studio .dh-settings .dh-copy-ask>span:first-child{font-size:28px;line-height:1.3}
.dh-studio .dh-settings .dh-copy-ask>span:last-child{font-size:18px;line-height:1.5;font-weight:700;color:color-mix(in srgb,var(--text,#fff) 78%,transparent)}
.dh-copy-box{display:flex;flex-direction:column;border-radius:var(--card-r-inner,18px);background:color-mix(in srgb,var(--text,#fff) 4%,transparent);border:1px solid color-mix(in srgb,var(--text,#fff) 12%,transparent);transition:border-color .2s,box-shadow .2s}
.dh-copy-box:focus-within{border-color:color-mix(in srgb,#5d00ff 75%,transparent);box-shadow:0 0 0 4px color-mix(in srgb,#5d00ff 18%,transparent)}
.dh-studio .dh-copy-box textarea{display:block;width:100%;min-height:260px;max-height:52dvh;resize:vertical;border:0;outline:0;background:transparent;box-shadow:none;padding:18px 18px 8px;font-size:15px;line-height:1.75;color:inherit}
.dh-studio .dh-copy-box textarea:focus{box-shadow:none;outline:0}
.dh-copy-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 14px 12px 18px;border-top:1px solid color-mix(in srgb,var(--text,#fff) 7%,transparent)}
.dh-studio .dh-copy-meta input{flex:1;min-width:0;height:30px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;font-size:13px}
.dh-studio .dh-copy-meta input:focus{outline:0;box-shadow:none}
.dh-copy-meta .caption{white-space:nowrap}
.dh-copy-pane:not([hidden]){display:flex;height:100%}
.dh-copy-side{flex:1;display:flex;min-height:calc(100dvh - var(--dh-top,160px) - 140px);border-radius:var(--card-r-inner,18px);border:1px dashed color-mix(in srgb,var(--text,#fff) 16%,transparent);background:color-mix(in srgb,var(--text,#fff) 2.5%,transparent);padding:28px 32px;overflow:auto}
.dh-copy-side:has(.dh-copy-preview:not([hidden])){border-style:solid}
.dh-copy-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;color:color-mix(in srgb,var(--text,#fff) 50%,transparent)}
.dh-copy-empty[hidden]{display:none}
.dh-copy-empty b{font-size:16px;color:color-mix(in srgb,var(--text,#fff) 78%,transparent)}
.dh-copy-empty span:last-child{font-size:13px}
.dh-copy-empty-icon{width:56px;height:56px;margin-bottom:6px;border-radius:16px;display:grid;place-items:center;background:color-mix(in srgb,#5d00ff 16%,transparent);color:var(--icon-accent,#b89bff)}
.dh-copy-empty-icon svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.dh-copy-side .dh-copy-preview{min-height:0;max-width:none;font-size:16px;line-height:1.9}
/* 第 3 步形象选择：左侧选择形象，右侧为独立播放窗口（形象 → 生成中 → 数字人原片） */
.dh-studio.studio-workbench.is-shape{grid-template-columns:minmax(0,1fr) minmax(340px,42%)}
.dh-studio.studio-workbench.is-shape .dh-portrait-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:14px;max-height:none;overflow:visible}
.dh-portrait-tools{display:flex;align-items:center;gap:12px}
.dh-portrait-tools input{flex:1;min-width:0;max-width:320px}
.dh-portrait-grid>button[hidden]{display:none}
.dh-stage-card{display:grid;gap:12px}
.dh-stage-frame{position:relative;aspect-ratio:var(--ratio,9 / 16);height:clamp(320px,calc(100dvh - var(--dh-top,160px) - 250px),760px);max-width:100%;margin-inline:auto;border-radius:16px;overflow:hidden;background:var(--bg-sunken)}
.dh-stage-frame>video,.dh-stage-frame>img{display:block;width:100%;height:100%;object-fit:cover;border:0;border-radius:0;background:transparent}
.dh-stage-frame>.dh-processing{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:16px;text-align:center}
.dh-stage-msg{position:absolute;inset:0;display:grid;place-items:center;margin:0;padding:16px;text-align:center;color:var(--ink-muted)}
.dh-stage-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;justify-content:center}
@container(max-width:850px){.dh-studio.studio-workbench.is-shape{grid-template-columns:minmax(0,1fr)}.dh-stage-frame{height:min(70vh,560px)}}

/* 数字人第 1 步右侧：行业爆款模板卡片 */
/* Incoming components use --text but the platform theme exposes --ink-strong.
   Bind the missing alias locally; keep the source geometry and color mixes. */
.dh-studio,.dh-tpl-full{--text:var(--ink-strong)}
.dh-tpl{flex:1;display:flex;flex-direction:column;gap:18px;min-width:0}
.dh-tpl-head{display:flex;flex-direction:column;gap:14px}
.dh-tpl-head h3{margin:0 0 4px;font-size:18px}
.dh-tpl-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.dh-tpl-chips::-webkit-scrollbar{display:none}
.dh-tpl-chips button{flex:none;height:34px;padding:0 16px;border-radius:999px;border:1px solid color-mix(in srgb,var(--text,#fff) 12%,transparent);background:transparent;color:color-mix(in srgb,var(--text,#fff) 75%,transparent);font-size:13px;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.dh-tpl-chips button:hover{border-color:color-mix(in srgb,var(--text,#fff) 28%,transparent);color:var(--text,#fff)}
.dh-tpl-chips button[aria-selected="true"]{background:#5d00ff;border-color:#5d00ff;color:#fff;font-weight:600}
.dh-tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.dh-tpl-card{display:flex;flex-direction:column;gap:10px;padding:18px;border-radius:var(--card-r-inner,18px);background:color-mix(in srgb,var(--text,#fff) 4%,transparent);border:1px solid color-mix(in srgb,var(--text,#fff) 8%,transparent);box-shadow:var(--card-lift-sm,0 14px 22px -14px rgba(0,0,0,.6));transition:transform .2s,box-shadow .2s,border-color .2s}
.dh-tpl-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,#5d00ff 45%,transparent);box-shadow:var(--card-lift-hover,0 22px 30px -16px rgba(93,0,255,.45))}
.dh-tpl-top{display:flex;align-items:center;justify-content:space-between}
.dh-tpl-rank{font-size:11px;font-weight:800;letter-spacing:.06em;padding:3px 8px;border-radius:6px;background:color-mix(in srgb,var(--text,#fff) 8%,transparent);color:color-mix(in srgb,var(--text,#fff) 70%,transparent)}
.dh-tpl-rank[data-rank="1"]{background:linear-gradient(135deg,#ff6a3d,#ff2d6f);color:#fff}
.dh-tpl-rank[data-rank="2"]{background:linear-gradient(135deg,#ffb020,#ff7a00);color:#fff}
.dh-tpl-rank[data-rank="3"]{background:linear-gradient(135deg,#8b5cff,#5d00ff);color:#fff}
.dh-tpl-plays{display:inline-flex;align-items:center;gap:4px;font-size:15px;font-weight:800;color:var(--text,#fff)}
.dh-tpl-card h3{margin:0;font-size:15px;line-height:1.4}
.dh-tpl-text{margin:0;font-size:13px;line-height:1.75;color:color-mix(in srgb,var(--text,#fff) 68%,transparent);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;min-height:calc(1.75em * 4)}
.dh-tpl-stats{display:flex;gap:14px;font-size:12px;color:color-mix(in srgb,var(--text,#fff) 52%,transparent)}
.dh-tpl-stats span{display:inline-flex;align-items:center;gap:4px}
.dh-tpl-ico{display:inline-grid;width:14px;height:14px}
.dh-tpl-ico svg{width:100%;height:100%;fill:currentColor}
.dh-tpl-plays .dh-tpl-ico{color:#ff4d6d}
.dh-tpl-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:auto;padding-top:4px}
.dh-tpl-actions .btn{height:36px;border-radius:999px;justify-content:center}
.dh-tpl-actions .btn.primary{background:#5d00ff;border-color:#5d00ff;color:#fff}
.dh-tpl-actions .btn.primary:hover{background:#6c1aff}
.dh-tpl-actions .btn.is-loading{opacity:.75;cursor:progress}
.dh-tpl-full p{margin:14px 0 0;font-size:15px;line-height:1.9;white-space:pre-wrap}
.dh-tpl-tag{padding:2px 8px;border-radius:6px;background:color-mix(in srgb,#5d00ff 20%,transparent);color:var(--icon-accent,#b89bff)}
.dh-copy-pane:not([hidden]){display:flex;height:auto}

/* 数字人第 2 步：配音成品拆成「文案框」+「音频框」 */
.dh-speech-split{display:flex;flex-direction:column;gap:14px}
.dh-speech-box{border-radius:var(--card-r-inner,18px);border:1px solid color-mix(in srgb,var(--text,#fff) 9%,transparent);background:color-mix(in srgb,var(--text,#fff) 3.5%,transparent);padding:16px 20px 18px}
.dh-speech-box-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;font-size:13px;font-weight:600;color:var(--ink-muted)}
.dh-speech-box-head>span:first-child{display:inline-flex;align-items:center;gap:8px}
.dh-speech-box-head>span:first-child::before{content:"";width:6px;height:6px;border-radius:50%;background:#5d00ff}
.dh-speech-copytext p{margin:0;font-size:15px;line-height:1.85;white-space:pre-wrap;overflow-wrap:anywhere;max-height:9.25em;overflow:auto;scrollbar-width:thin}
.dh-speech-audio .dh-processing{min-height:160px;margin:0;border:0;background:transparent;padding:16px 0 4px}
.dh-speech-audio .dh-wave{margin:4px 0 0}
.dh-speech-stage{margin:0;color:var(--danger,#ff6b6b);font-size:13px}
/* 第 2 步音色选择：左侧加宽为两列音色卡，语速收进左栏一行；右侧配音成品 + 口播文案 */
.dh-studio.studio-workbench.is-sound{grid-template-columns:minmax(0,1fr) minmax(340px,42%)}
.dh-source-tabs.is-three{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:4px;border:1px solid var(--line);border-radius:14px;background:var(--bg-sunken)}
.dh-source-tabs.is-three .btn{min-height:36px;border:0;border-radius:10px;font-size:13px}
.dh-source-tabs.is-three .btn[aria-pressed=true]{background:#5d00ff;color:#fff}
.dh-studio.is-sound .dh-settings .step-body{gap:12px}
.dh-studio.is-sound .voice-list{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px;max-height:none;overflow:visible}
.dh-studio.is-sound .voice-row{min-height:48px;padding:6px 8px 6px 6px;gap:10px;border-radius:12px}
.dh-studio.is-sound .voice-avatar{width:32px;height:32px;border-radius:10px;font-size:13px}
.dh-studio.is-sound .voice-meta b{font-size:13px;line-height:18px}
.dh-studio.is-sound .voice-meta small{font-size:11.5px;line-height:16px}
.dh-studio.is-sound .voice-play{width:28px;height:28px}
.dh-studio .dh-speed-card.is-compact{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;box-shadow:none}
.dh-studio .dh-speed-card.is-compact .dh-card-head{flex:none;gap:8px}
.dh-studio .dh-speed-card.is-compact .dh-card-title{font-size:13px}
.dh-studio .dh-speed-card.is-compact .speed-value{display:none}
.dh-studio .dh-speed-card.is-compact .voice-speed{flex:1;min-width:0}
.dh-studio .dh-speed-card.is-compact .duration-control{display:none}
.dh-studio .dh-speed-card.is-compact .dur-preset{height:30px}
.dh-studio.is-sound .dh-settings p[role=status]{margin:0;font-size:12px;color:var(--ink-muted)}
.dh-studio.is-sound .dh-upload-row{padding:12px;border:1px dashed var(--line-strong);border-radius:12px}
.dh-studio.is-sound .dh-speech-result{margin-top:0;padding:14px 16px;gap:10px}
.dh-studio.is-sound .dh-speech-result .empty{min-height:72px;padding:12px}
.dh-studio.is-sound .dh-speech-result .empty::before{display:none}
.dh-script-card{display:grid;gap:10px;margin-top:14px;padding:14px 16px;border-radius:18px;border:1px solid var(--line);background:var(--bg-sunken)}
.dh-script-text{margin:0;max-height:240px;overflow:auto;font-size:14px;line-height:1.8;color:var(--ink-strong);white-space:pre-wrap}
.dh-script-text.muted{color:var(--ink-muted)}
@container(max-width:850px){.dh-studio.studio-workbench.is-sound{grid-template-columns:minmax(0,1fr)}}
.dh-studio.studio-workbench .dh-settings.studio-settings .dh-source-tabs.is-three .btn[aria-pressed=true]:is(:hover,:focus,:focus-visible,:active){background:#5d00ff;color:#fff}
.dh-studio .dh-source-tabs.is-three .btn[aria-pressed=false]:hover{background:color-mix(in srgb,var(--ink-strong) 6%,transparent);color:var(--ink-strong)}
.dh-studio.is-sound .dh-results .dh-preview-pane>.stack>.empty{min-height:72px;padding:12px;border-radius:18px;border:1px solid var(--line);background:var(--bg-sunken)}
.dh-studio.is-sound .dh-results .dh-preview-pane>.stack>.empty::before{display:none}
/* 第 2 步右侧：口播文案卡片置顶，下面是配音成品（纯音频） */
.dh-studio .dh-preview-pane:has(>.dh-script-card):not([hidden]){display:flex;flex-direction:column;gap:16px}
.dh-studio .dh-preview-pane>.dh-script-card{order:-1;margin-top:0}
.dh-speech-result .dh-speech-split{gap:0}
.dh-speech-result .dh-speech-box{padding:14px 18px 16px}

/* 第 3 步精简：授权勾选贴在主按钮上方；名称与改名放到右栏标题栏 */
.dh-settings .steps-action:has(>.dh-rights){display:flex;flex-direction:column;align-items:stretch;gap:12px}
.dh-rights{display:flex;align-items:center;justify-content:center;gap:10px;font-size:14px;font-weight:500;padding:4px 0;color:color-mix(in srgb,var(--text,#fff) 58%,transparent);cursor:pointer;user-select:none}
.dh-rights input{width:20px;height:20px;margin:0;accent-color:#5d00ff;cursor:pointer}
.dh-rights:has(input:checked){color:color-mix(in srgb,var(--text,#fff) 78%,transparent)}
.dh-results>.panel-head>.form-actions{display:flex;gap:6px;margin:0;padding:0}
.dh-results>.panel-head>.form-actions[hidden]{display:none}
.dh-results>.panel-head>.form-actions .btn{height:30px;border-radius:999px;padding:0 12px;font-size:12px}
.dh-studio .dh-settings .dh-portrait-tools{display:block;width:100%}
.dh-studio .dh-settings .dh-portrait-tools input{width:100%;max-width:none;flex:none}
.dh-portrait-tools .caption{position:absolute;right:14px;top:50%;transform:translateY(-50%);pointer-events:none}
.dh-portrait-tools:has(.caption:not([hidden])){position:relative}
/* 第 4 步字幕校对：左侧竖向分句时间轴，右侧固定竖屏播放窗口 + 分句时间条 */
.dh-studio.studio-workbench.is-subs{grid-template-columns:minmax(0,1fr) minmax(340px,42%)}
.dh-studio.is-subs .dh-pack-preview{display:grid;justify-content:center;gap:12px}
.dh-studio.is-subs .dh-pack-preview .cloud-media-preview-layout.is-single{display:block}
.dh-studio.is-subs #dh-packaging-preview .dh-subtitle-preview{height:clamp(320px,calc(100dvh - var(--dh-top,160px) - 270px),740px);width:auto;max-width:100%!important;aspect-ratio:9/16;margin-inline:auto;border-radius:16px;background:var(--bg-sunken);position:relative}
.dh-studio.is-subs #dh-packaging-preview .dh-subtitle-preview video{width:100%;height:100%;object-fit:cover}
.dh-studio.is-subs #dh-packaging-preview>.dh-processing{height:clamp(320px,calc(100dvh - var(--dh-top,160px) - 270px),740px);aspect-ratio:9/16;max-width:100%;margin-inline:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:16px;text-align:center;border-radius:16px;background:var(--bg-sunken)}
.dh-studio.is-subs .dh-cue-timeline{max-width:none!important;width:100%;height:18px;margin:0;border-radius:9px}
.dh-studio.is-subs .dh-cue-bar{top:3px;height:12px;border-radius:6px}
.dh-studio.is-subs .dh-cue-bar[aria-pressed=true]{background:#5d00ff}
.dh-studio.is-subs .dh-settings .dh-cues{border:0;border-radius:0;background:none;overflow:visible;gap:2px}
.dh-studio.is-subs .dh-settings .dh-cue-row{grid-template-columns:86px 26px minmax(0,1fr);gap:10px;min-height:0;padding:0 8px;border:0;border-radius:12px;position:relative}
.dh-studio.is-subs .dh-settings .dh-cue-row::after{content:'';position:absolute;left:calc(8px + 86px + 10px + 12px);top:0;bottom:0;width:2px;background:var(--line)}
.dh-studio.is-subs .dh-settings .dh-cue-row:first-child::after{top:22px}
.dh-studio.is-subs .dh-settings .dh-cue-row:last-child::after{bottom:calc(100% - 22px)}
.dh-studio.is-subs .dh-settings .dh-cue-time{order:-1;padding-top:12px;font:11.5px/20px var(--font-mono,ui-monospace,monospace);color:var(--muted);text-align:right;white-space:nowrap}
.dh-studio.is-subs .dh-settings .dh-cue-index{position:relative;z-index:1;display:grid;place-items:center;width:26px;height:26px;margin-top:9px;padding:0;border:1px solid var(--line-strong);border-radius:50%;background:var(--bg);font:500 11px/1 var(--font-num,var(--font-sans));color:var(--muted);text-align:center}
.dh-studio.is-subs .dh-settings .dh-cue-body{padding:10px 0}
.dh-studio.is-subs .dh-settings .dh-cue-label{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;color:var(--ink)}
.dh-studio.is-subs .dh-settings .dh-cue-row.is-active{background:color-mix(in srgb,#5d00ff 12%,transparent)}
.dh-studio.is-subs .dh-settings .dh-cue-row.is-active .dh-cue-index{background:#5d00ff;border-color:#5d00ff;color:#fff}
.dh-studio.is-subs .dh-settings .dh-cue-row.is-active .dh-cue-time,.dh-studio.is-subs .dh-settings .dh-cue-row.is-active .dh-cue-label{color:var(--ink-strong)}
@container(max-width:850px){.dh-studio.studio-workbench.is-subs{grid-template-columns:minmax(0,1fr)}.dh-studio.is-subs #dh-packaging-preview .dh-subtitle-preview,.dh-studio.is-subs #dh-packaging-preview>.dh-processing{height:min(70vh,560px)}}

/* 第 3 步生成任务：标题栏「视频预览 [作品名色块] …… [状态]」 */
.dh-results>.panel-head:has(>.dh-task-head:not([hidden]))>h2{flex:0 0 auto}
.dh-task-head{flex:1;min-width:0;display:flex;align-items:center;gap:12px}
.dh-task-head[hidden]{display:none}
.dh-name-chip{flex:0 1 auto;min-width:0;max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:4px 12px;border-radius:8px;background:color-mix(in srgb,#5d00ff 22%,transparent);color:color-mix(in srgb,#b89bff 85%,#fff);font-size:13px;font-weight:600;line-height:20px}
.dh-state-pill{flex:none;white-space:nowrap;margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;font-size:12px;font-weight:600;line-height:20px;background:color-mix(in srgb,var(--text,#fff) 8%,transparent);color:color-mix(in srgb,var(--text,#fff) 80%,transparent)}
.dh-state-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.dh-state-pill[data-state="pending"]{color:#ffb020;background:color-mix(in srgb,#ffb020 14%,transparent)}
.dh-state-pill[data-state="pending"]::before{animation:dhPulse 1.2s ease-in-out infinite}
.dh-state-pill[data-state="done"]{color:#2fd27a;background:color-mix(in srgb,#2fd27a 14%,transparent)}
.dh-state-pill[data-state="error"]{color:#ff6b6b;background:color-mix(in srgb,#ff6b6b 14%,transparent)}
@keyframes dhPulse{50%{opacity:.3}}
@media (prefers-reduced-motion:reduce){.dh-state-pill::before{animation:none!important}}
/* 第 4 步：识别状态说明并入标题栏右侧 */
.dh-settings-head .dh-head-note{min-width:0;margin-left:auto;text-align:right}
.dh-settings-head .dh-head-note p{margin:0;font-size:12px;line-height:18px;color:var(--ink-muted)}

/* 第 5 步视频包装：左侧模板为主，右栏与第 3/4 步同宽；本条内容放在视频上方，视频完整显示 */
.dh-studio.studio-workbench.is-packstep{grid-template-columns:minmax(0,1fr) minmax(340px,42%)}
.dh-studio.is-packstep #dh-step-5 :has(>.cloud-media-template-card){display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px}
.dh-studio.is-packstep #dh-step-5 .cloud-media-template-card{padding:6px 6px 10px;gap:8px;font-size:13px;border-radius:14px}
.dh-studio.is-packstep #dh-step-5 .cloud-media-template-card>:first-child{border-radius:10px}
.dh-studio.is-packstep .dh-pack-stage.is-pack{display:flex;flex-direction:column;align-items:stretch;gap:16px}
.dh-studio.is-packstep .dh-pack-content .cloud-media-content-fields{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.dh-studio.is-packstep .dh-pack-stage.is-pack .dh-pack-preview{display:grid;justify-items:center;gap:10px}
.dh-studio.is-packstep .dh-pack-hint{display:none}
.dh-studio.is-packstep #dh-packaging-preview :is(.dh-subtitle-preview,.cloud-media-preview-stage){height:clamp(320px,calc(100dvh - var(--dh-top,160px) - 230px),760px);width:auto;max-width:100%!important;aspect-ratio:9/16;margin-inline:auto}
.dh-studio.is-packstep #dh-packaging-preview :is(.dh-subtitle-preview,.cloud-media-preview-stage) video{width:100%;height:100%;object-fit:contain}
@container(max-width:850px){.dh-studio.studio-workbench.is-packstep{grid-template-columns:minmax(0,1fr)}}
/* 第 5 步：本条内容挪到左栏模板下方 */
.dh-studio.is-packstep .dh-settings .dh-pack-content{margin-top:22px;padding-top:20px;border-top:1px solid color-mix(in srgb,var(--text,#fff) 8%,transparent);max-width:none;width:auto}
.dh-studio.is-packstep .dh-settings .dh-pack-content .dh-pack-head{margin-bottom:12px}
.dh-studio.is-packstep .dh-pack-stage.is-pack{justify-content:center}

/* 授权未勾选：主按钮置灰、不可点击 */
.dh-settings .steps-action .btn.is-rights-locked{opacity:.35;filter:grayscale(1);pointer-events:none;cursor:not-allowed;box-shadow:none}
.dh-settings .steps-action:has(.btn.is-rights-locked) .dh-rights{color:var(--text,#fff)}
.dh-settings .steps-action:has(.btn.is-rights-locked) .dh-rights input{outline:2px solid color-mix(in srgb,#5d00ff 55%,transparent);outline-offset:2px;border-radius:4px}

/* 手机 / 窄屏：AI 智能剪辑改为上下单列，左栏设置在上、结果在下，取消两栏各自滚动 */
@media (max-width:900px){
  .ai-workbench.studio-workbench{grid-template-columns:minmax(0,1fr)!important;gap:16px}
  .ai-workbench.studio-workbench>*{min-width:0;grid-column:1/-1}
  .ai-workbench .steps,.ai-workbench.studio-workbench>.studio-settings,.ai-workbench.studio-workbench>.workbench-results{position:static;height:auto;max-height:none;overflow:visible}
  .ai-workbench.studio-workbench>.workbench-results>.results-head{position:static}
}

/* 手机 / 窄屏步骤条：其余步骤只显示图标，当前步骤显示名称；
   满色块改为逐个步骤上色（已完成 + 当前），不再按百分比，避免和横向滚动错位 */
html{overflow-x:clip}
@media (max-width:900px){
  .studio-workbench .studio-stepbar.has-step-icons>nav{overflow:hidden;width:100%}
  .studio-workbench .studio-stepbar.has-step-icons>nav::before{display:none}
  .studio-workbench .studio-stepbar.has-step-icons ol{display:flex;width:100%;overflow:visible}
  .studio-workbench .studio-stepbar.has-step-icons li{flex:0 0 auto;min-width:0}
  .studio-workbench .studio-stepbar.has-step-icons li:has(button[aria-current]){flex:1 0 auto}
  .studio-workbench .studio-stepbar.has-step-icons li button{min-width:0!important}
  .studio-workbench .studio-stepbar.has-step-icons li:has(button[aria-current]),.studio-workbench .studio-stepbar.has-step-icons li:has(button[data-complete]){background:linear-gradient(180deg,#6a14ff,#5200e6)}
  .studio-workbench .studio-stepbar.has-step-icons li:has(button[aria-current]){border-radius:0 14px 14px 0;box-shadow:0 8px 18px -8px rgba(93,0,255,.7)}
  .studio-workbench .studio-stepbar.has-step-icons button,.studio-workbench .studio-stepbar.has-step-icons button[aria-current],.studio-workbench .studio-stepbar.has-step-icons button[data-complete]{min-height:48px;padding:0 10px;gap:6px;width:100%;justify-content:center}
  .studio-workbench .studio-stepbar.has-step-icons li:not(:has(button[aria-current])) .dh-stepbar-text{display:none}
  .studio-workbench .studio-stepbar.has-step-icons .dh-stepbar-text small{display:none}
  .studio-workbench .studio-stepbar.has-step-icons .dh-stepbar-text b{white-space:nowrap;font-size:13px}
  .studio-workbench .studio-settings-head h2{white-space:nowrap}
}

/* 0.39.3: one compact speech player at the end of each narration card. */
.speech-player{display:grid;grid-template-columns:36px auto minmax(32px,1fr) auto 36px;align-items:center;gap:8px;padding:6px 8px;background:var(--bg-sunken);border-radius:12px;min-width:0}
.speech-player-action{display:grid;place-items:center;width:36px;height:36px;min-height:36px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--ink-strong);cursor:pointer}
.speech-player-action:hover{background:var(--line)}
.speech-player-action:disabled{opacity:.4;cursor:default}
.speech-player-action .icon{width:20px;height:20px}
.speech-player-time{font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink)}
.speech-player input.speech-player-seek{appearance:none;-webkit-appearance:none;width:100%;min-width:0;height:28px;min-height:28px;margin:0;padding:0;border:0;border-radius:0;background:transparent;cursor:pointer}
.speech-player-seek::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(to right,var(--ink) var(--played,0%),var(--line-strong) var(--played,0%))}
.speech-player-seek::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--ink-strong);margin-top:-4px}
.speech-player-seek::-moz-range-track{height:4px;border-radius:4px;background:var(--line-strong)}
.speech-player-seek::-moz-range-progress{height:4px;border-radius:4px;background:var(--ink)}
.speech-player-seek::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:var(--ink-strong)}
@media(pointer:coarse){.speech-player{grid-template-columns:44px auto minmax(24px,1fr) auto 44px;gap:4px}.speech-player-action{width:44px;height:44px}}

.workbench-results .script-card .card-foot:not(:has(>:not([hidden]):not(:empty))){display:none}
.speech-player input.speech-player-seek:focus-visible{outline:2px solid var(--focus);outline-offset:2px;box-shadow:none}

/* 0.39.4: optional quality notices disclose from the title, without reserving card height. */
.workbench-results .script-title-row{display:flex;align-items:center;gap:4px;min-width:0;height:20px}
.workbench-results .script-title-row .card-title{flex:1}
.script-warning-toggle{flex:none;display:grid;place-items:center;width:24px;height:24px;min-height:24px;padding:2px;border:0;border-radius:6px;color:var(--warning);background:transparent;cursor:pointer}
.script-warning-toggle .icon{width:18px;height:18px}
.script-warning-toggle:hover,.script-warning-toggle.on{background:var(--bg-sunken)}
.script-warning-panel{padding:10px 12px;border-radius:8px;background:var(--bg-sunken);font-size:13px;line-height:1.6}
.script-warning-panel .script-warning-list{margin:0;padding-left:18px}
.script-warning-panel li+li{margin-top:10px}
.script-warning-panel p{margin:0}
.script-warning-targets{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.script-warning-target{min-height:32px;padding:4px 8px;border:1px solid var(--line-strong);border-radius:6px;background:var(--bg);color:var(--ink);cursor:pointer;font:inherit}
.script-warning-target mark{background:var(--warning-soft,var(--bg-sunken));color:inherit;font-weight:600}
.script-task-error{margin:0;color:var(--danger);font-size:13px;line-height:1.6;overflow-wrap:anywhere}

/* F1: optional filtering entry; original voice cards and spacing remain unchanged. */
.seg>.voice-filter-trigger{flex:0 0 40px;padding-inline:8px}.voice-filter-trigger .icon{width:18px;height:18px}

/* Explicit playback affordance without eager OSS traffic or changing the supplied card layout. */
.studio-workbench .script-card .result-play{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid #ffffff70;border-radius:50%;background:#000a;color:#fff;cursor:pointer}
.studio-workbench .script-card .result-play[hidden]{display:none}
.studio-workbench .script-card .result-play:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.studio-workbench .script-card .result-play svg{width:20px;height:20px}

/* Card actions share one baseline; hidden later-stage scripts occupy no grid slot. */
.studio-workbench .workbench-results .script-card-actions{width:auto}
.studio-workbench .workbench-results .script-card-actions>.script-warning-toggle{width:28px;height:28px;min-width:28px;min-height:28px;padding:0}
.studio-workbench .workbench-results .script-card[hidden]{display:none}

/* 智能剪辑第 4 步「包装与成片预览」：3～5 条时一排 3 个；卡片只留标题、选择/删除、预览和切换 */
.ai-workbench .workbench-results .cards:has(>.script-card[data-stage="4"]){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start}
.ai-workbench .script-card[data-stage="4"]{min-width:0;padding:12px;gap:10px}
.ai-workbench .script-card[data-stage="4"]>.card-head{gap:8px;align-items:center;min-height:0;padding:0}
.ai-workbench .script-card[data-stage="4"] .card-idx{width:24px;height:24px;font-size:12px;border-radius:8px;flex:none}
.ai-workbench .script-card[data-stage="4"] .script-heading{min-width:0;flex:1}
.ai-workbench .script-card[data-stage="4"] .card-title{font-size:13px;line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai-workbench .script-card[data-stage="4"] .card-sub,
.ai-workbench .script-card[data-stage="4"] .packaging-stage>h3,
.ai-workbench .script-card[data-stage="4"] .packaging-stage>p.caption,
.ai-workbench .script-card[data-stage="4"] .packaging-stage>details{display:none}
.ai-workbench .script-card[data-stage="4"] .script-card-actions{gap:2px;flex:none}
.ai-workbench .script-card[data-stage="4"] .script-card-actions :is(button,label){width:26px;height:26px;min-width:0;padding:0}
.ai-workbench .script-card[data-stage="4"] .card-body,.ai-workbench .script-card[data-stage="4"] .packaging-stage{padding:0;gap:8px}
.ai-workbench .script-card[data-stage="4"] :is(.packaging-demo,.final-plan-frame)>img{width:100%;height:100%;object-fit:cover}
.ai-workbench .script-card[data-stage="4"] [role=tablist],.ai-workbench .script-card[data-stage="4"] .seg{gap:6px}
.ai-workbench .script-card[data-stage="4"] [role=tablist] button{height:28px;padding:0 10px;font-size:12px}
@container script-results (max-width:620px){.ai-workbench .workbench-results .cards:has(>.script-card[data-stage="4"]){grid-template-columns:repeat(2,minmax(0,1fr))}}
@container script-results (max-width:380px){.ai-workbench .workbench-results .cards:has(>.script-card[data-stage="4"]){grid-template-columns:minmax(0,1fr)}}
/* 第 4 步成片完成后：卡片内改为上下结构——上面整幅视频，下面一行信息 + 操作；隐藏 LOGO、状态徽标、文案摘要 */
.ai-workbench .script-card[data-stage="4"] .result-grid{display:flex!important;flex-direction:column;gap:10px;grid-template-columns:none}
.ai-workbench .script-card[data-stage="4"] .result-media{width:100%!important;max-width:none;height:auto;border-radius:12px;overflow:hidden;position:relative;display:flex;justify-content:center;background:#000}
.ai-workbench .script-card[data-stage="4"] .result-media .result-video{width:100%;height:auto;max-height:var(--card-media-max);object-fit:contain}
.ai-workbench .script-card[data-stage="4"] .result-sheet{width:100%;padding:0;gap:8px;background:none;border:0;box-shadow:none;min-height:0}
.ai-workbench .script-card[data-stage="4"] .result-sheet :is(.result-brand,.result-copy){display:none!important}
.ai-workbench .script-card[data-stage="4"] .result-tiles{display:flex;gap:6px}
.ai-workbench .script-card[data-stage="4"] .result-tile{flex:1;min-width:0;padding:5px 6px;flex-direction:row;justify-content:space-between;align-items:baseline;gap:4px}
.ai-workbench .script-card[data-stage="4"] .result-tile span{font-size:11px;line-height:16px}
.ai-workbench .script-card[data-stage="4"] .result-tile b{font-size:12px;line-height:16px}
.ai-workbench .script-card[data-stage="4"] .result-actions{display:flex;flex-wrap:nowrap;align-items:center;gap:6px;margin-top:0}
.ai-workbench .script-card[data-stage="4"] .result-actions>button:first-child{display:none}
.ai-workbench .script-card[data-stage="4"] .result-actions .result-regen{order:0;height:34px;padding:0 10px;font-size:12px;white-space:nowrap}
.ai-workbench .script-card[data-stage="4"] .result-actions a.btn.primary{flex:1;min-width:0;height:34px;font-size:13px;white-space:nowrap}

/* 第 4 步：单条时卡片也保持 1/3 宽、不放大；预览/视频最高不超过结果区一屏，避免出现滚动 */
.ai-workbench .workbench-results{--card-media-max:calc(var(--steps-max,calc(100dvh - 188px)) - 216px)}
.ai-workbench .script-card[data-stage="4"] :is(.packaging-demo,.final-plan-frame){position:relative;width:min(100%,calc(var(--card-media-max) * var(--frame-aspect,.5625)));max-width:100%;height:auto;margin:0 auto;border-radius:12px;overflow:hidden}
.ai-workbench .script-card[data-stage="4"] .packaging-stage>:not(.packaging-demo):not(.final-plan-frame):is(h3,p.caption,details){display:none}
.plan-detail-chip{position:absolute;top:8px;right:8px;z-index:3;display:inline-flex;align-items:center;gap:4px;height:26px;padding:0 9px;border:0;border-radius:999px;background:rgba(0,0,0,.62);color:#fff;font-size:12px;font-weight:600;cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.plan-detail-chip:hover{background:#5d00ff}
.plan-chip-ico{display:inline-grid;width:14px;height:14px}
.plan-chip-ico svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.plan-detail .sentence-plan{max-height:60dvh;overflow:auto}
/* 表头批量选择菜单 */
.workbench-scope .scope-menu{position:relative}
.workbench-scope .scope-menu>summary{list-style:none;cursor:pointer}
.workbench-scope .scope-menu>summary::-webkit-details-marker{display:none}
.workbench-scope .scope-menu>summary::after{content:"";width:6px;height:6px;margin-left:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);display:inline-block}
.workbench-scope .scope-menu-list{position:absolute;top:calc(100% + 6px);left:0;z-index:20;display:grid;min-width:120px;padding:6px;border-radius:12px;background:var(--bg-raised,#1b1b1b);border:1px solid var(--line);box-shadow:0 16px 32px -12px rgba(0,0,0,.6)}
.workbench-scope .scope-menu-list button{height:32px;padding:0 10px;border:0;border-radius:8px;background:none;color:inherit;text-align:left;font-size:13px;cursor:pointer}
.workbench-scope .scope-menu-list button:hover{background:color-mix(in srgb,#5d00ff 18%,transparent)}

/* 步骤条标题旁「新建创作」：白底亮色胶囊 + 紫色加号，带柔光，在紫色步骤条旁最醒目 */
.studio-new-btn,.studio-workbench .studio-stepbar>button.studio-new-btn,.studio-stepbar>button.studio-new-btn{flex:none;align-self:center;display:inline-flex;align-items:center;gap:6px;height:38px!important;min-height:0!important;min-width:0!important;padding:0 16px 0 12px!important;border:0;border-radius:999px!important;background:#fff!important;color:#14002e!important;font-size:14px;font-weight:700;white-space:nowrap;cursor:pointer;
  box-shadow:0 0 0 3px color-mix(in srgb,#8b5cff 35%,transparent),0 10px 24px -8px rgba(139,92,255,.85);transition:transform .15s,box-shadow .2s}
.studio-new-btn .icon{width:18px;height:18px;padding:2px;border-radius:50%;background:#5d00ff;color:#fff;stroke-width:2.6}
.studio-workbench .studio-stepbar>button.studio-new-btn:hover{transform:translateY(-1px);box-shadow:0 0 0 4px color-mix(in srgb,#8b5cff 50%,transparent),0 14px 28px -8px rgba(139,92,255,1)}
.studio-stepbar .studio-new-btn:disabled{opacity:.6;cursor:progress}
@media (max-width:900px){.studio-workbench .studio-stepbar>button.studio-new-btn{height:34px!important;padding:0 12px 0 10px!important;font-size:13px}}

/* 结果区「显示设置」：品牌紫实心胶囊 + 面板图标 + 柔光，左栏收起后一眼能找到 */
.studio-workbench .results-head .btn.settings-toggle{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 16px 0 12px;border:0;border-radius:999px;
  background:linear-gradient(135deg,#7a2bff,#5d00ff);color:#fff;font-size:13px;font-weight:700;letter-spacing:.02em;
  box-shadow:0 0 0 3px color-mix(in srgb,#8b5cff 30%,transparent),0 10px 22px -8px rgba(93,0,255,.9);transition:transform .15s,box-shadow .2s,filter .2s}
.studio-workbench .results-head .btn.settings-toggle::before{content:"";width:16px;height:16px;flex:none;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='3'/%3E%3Cpath d='M9 4v16M5.5 9h1M5.5 12h1M5.5 15h1'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='3'/%3E%3Cpath d='M9 4v16M5.5 9h1M5.5 12h1M5.5 15h1'/%3E%3C/svg%3E") center/contain no-repeat}
.studio-workbench .results-head .btn.settings-toggle:hover{transform:translateY(-1px);filter:brightness(1.12);box-shadow:0 0 0 4px color-mix(in srgb,#8b5cff 45%,transparent),0 14px 26px -8px rgba(93,0,255,1)}
.studio-workbench .results-head .btn.settings-toggle[hidden]{display:none}

/* Keep the supplied menu geometry, but render outside the scrolling toolbar. */
.workbench-scope .scope-menu-list[popover]{position:fixed;inset:auto;margin:0;max-height:calc(100dvh - 16px);overflow:auto;background:var(--bg-raised,var(--bg));color:var(--ink);font-family:inherit}
.workbench-scope .scope-menu-list[popover]:not(:popover-open){display:none}
.workbench-scope .scope-menu-list[popover]:popover-open{display:grid}
/* A finished card must keep its preview/result switch reachable. */
.ai-workbench .script-card[data-stage="4"].has-final:not(.is-busy) .card-body{display:flex;padding-bottom:8px}

/* Unavailable steps remain readable in the light theme; availability is semantic. */
:root[data-theme="light"] .studio-workbench .studio-stepbar button:disabled{color:#595959;opacity:1}
:root[data-theme="light"] .studio-workbench .studio-stepbar button:disabled :is(.dh-stepbar-glyph,.dh-stepbar-state){color:#595959}
.ec-title-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
/* Keep the generated-image label inside the card's rounded lower edge. */
.image-remix .picture>.picture-caption{justify-content:center;min-height:44px;padding:10px 12px;gap:8px;text-align:center}

@media(max-width:767px){
 .dh-stepbar.studio-stepbar:not(.dh-hbar)>button.studio-new-btn{grid-column:2;grid-row:1;max-width:100%;height:34px!important;padding:0 10px!important;font-size:12px}
}

/* Step buttons stack on narrow screens; the title action stays a single row. */
.studio-workbench .studio-stepbar>button.studio-new-btn{flex-direction:row;flex-wrap:nowrap;justify-content:center;white-space:nowrap}

/* Returning to an earlier step moves the purple fill back. Later saved outputs
   remain available, but their labels must use the unfilled track foreground. */
.studio-workbench .studio-stepbar.has-step-icons li:has(>button[aria-current])~li>button[data-complete]{color:var(--ink)}
.studio-workbench .studio-stepbar.has-step-icons li:has(>button[aria-current])~li>button[data-complete] :is(.dh-stepbar-glyph,.dh-stepbar-state){color:var(--muted)}