/* ============================================================
   pages.css —— 页面级专用布局
   ============================================================ */

/* ── 通用：页面内的窄栏（表单类卡片限制最大宽度，避免超宽屏下输入框拉满） ── */
.narrow { max-width: 1120px; }

/* ═══════════════════════════════════════════════════════════
   套图生成：左栏表单 + 右栏结果（QSplitter 2:1）
   ═══════════════════════════════════════════════════════════ */
#page-suite .split { min-height: 0; }
#page-suite .sp-left { padding-top: 2px; }

.result-panel {
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
  border-radius: var(--r-lg);
  background: var(--c-card-strong);
  border: 1px solid var(--c-border);
  box-shadow: var(--sh-card), inset 0 1px 0 var(--glass-hi);
  padding: var(--sp-md);
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.result-panel .rp-head {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  flex: 0 0 auto;
}

.result-panel .rp-head .rp-title { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.result-panel .rp-head .rp-count { margin-left: auto; font-size: var(--fs-xs); color: var(--c-text-3); }

.result-panel .rp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xs);
  flex: 0 0 auto;
}

.result-panel .rp-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 2px;
}

/* 结果卡固定尺寸（原 196×260） */
#page-suite .result-card,
#page-suite .skeleton-card { width: 100%; }
#page-suite .result-wrap { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }

/* ── 类型图复选框（5 个） ── */
.type-checks { display: flex; flex-wrap: wrap; gap: var(--sp-sm) var(--sp-md); }

/* ── 标题行（CN / EN 只读） ── */
.title-row { display: flex; align-items: center; gap: var(--sp-sm); }
.title-row .tr-k {
  flex: 0 0 34px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--c-text-2);
}

/* ── 压缩对比区 ── */
.compress-cmp {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-lg);
  margin-top: var(--sp-sm);
}

.compress-cmp .cc-item { display: flex; flex-direction: column; gap: 6px; }
.compress-cmp .cc-item .cc-t { font-size: var(--fs-xs); color: var(--c-text-2); }
.compress-cmp .cc-item .cc-frame {
  border-radius: var(--r-card);
  border: 1px solid var(--c-border);
  background: var(--c-input);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.compress-cmp .cc-item img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* ═══════════════════════════════════════════════════════════
   单图 / 主图：素材行 + 结果流
   ═══════════════════════════════════════════════════════════ */
.material-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-md);
  flex-wrap: wrap;
}

.material-row .mr-info {
  flex: 1 1 240px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.material-row .mr-info .mr-k { font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.material-row .mr-info .mr-h { font-size: var(--fs-xs); color: var(--c-text-3); line-height: 1.55; }
.material-row .mr-btns { display: flex; flex-direction: column; gap: var(--sp-xs); flex: 0 0 auto; }

/* ═══════════════════════════════════════════════════════════
   多PCS：预览 + 物品框 + 布局画布
   ═══════════════════════════════════════════════════════════ */
.pcs-stage {
  position: relative;
  height: 180px;
  border-radius: var(--r-card);
  border: 1px solid var(--c-border);
  background:
    conic-gradient(from 45deg, var(--c-hover) 0 25%, transparent 0 50%, var(--c-hover) 0 75%, transparent 0) 0 0 / 18px 18px,
    var(--c-input);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.pcs-stage img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pcs-stage.drawing { cursor: crosshair; }

/* 物品框（可点击切换选中） */
.pcs-box {
  position: absolute;
  border: 1.5px solid color-mix(in srgb, var(--c-accent) 60%, transparent);
  border-radius: 3px;
  background: color-mix(in srgb, var(--c-accent) 8%, transparent);
  transition: border-color var(--d-hover) var(--ease-apple),
              background var(--d-hover) var(--ease-apple);
}

.pcs-box:hover { border-color: var(--c-accent); background: color-mix(in srgb, var(--c-accent) 16%, transparent); }
.pcs-box.sel { border-color: var(--c-red); border-width: 2px; background: color-mix(in srgb, var(--c-red) 12%, transparent); }
.pcs-box .pb-tag {
  position: absolute;
  top: -16px;
  left: -1px;
  font-size: 9px;
  padding: 0 4px;
  border-radius: 3px;
  background: var(--c-accent);
  color: #fff;
  white-space: nowrap;
}
.pcs-box.sel .pb-tag { background: var(--c-red); }

/* 手动框选橡皮筋 */
.pcs-rubber {
  position: absolute;
  border: 1.5px dashed var(--c-red);
  background: color-mix(in srgb, var(--c-red) 14%, transparent);
  pointer-events: none;
}

.pcs-canvas {
  height: 80px;
  border-radius: var(--r-control);
  border: 1px solid var(--c-border);
  background: var(--c-content);
  overflow: hidden;
}

.pcs-canvas canvas { width: 100%; height: 100%; display: block; }

.pcs-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 10px;
  border-radius: var(--r-control);
  background: var(--c-input);
  border: 1px solid var(--c-border);
  min-height: 42px;
}

/* ═══════════════════════════════════════════════════════════
   多参考图：缩略图排序区
   ═══════════════════════════════════════════════════════════ */
.mref-strip { min-height: 148px; }

/* ═══════════════════════════════════════════════════════════
   多语言：文案表格
   ═══════════════════════════════════════════════════════════ */
.i18n-langs { display: flex; flex-wrap: wrap; gap: var(--sp-sm) var(--sp-lg); }

table.i18n-table { table-layout: fixed; }
table.i18n-table td.cell-text { padding: 6px 8px; }
table.i18n-table td.cell-text textarea {
  width: 100%;
  min-height: 58px;
  border-radius: var(--r-sm);
  background: var(--c-input);
  border: 1px solid var(--c-border);
  padding: 6px 8px;
  font-size: var(--fs-xs);
  line-height: 1.5;
  resize: vertical;
  font-family: var(--font-sans);
}
table.i18n-table td.cell-text textarea:focus {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-subtle);
}

.lang-src-row {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════════
   AI 聊天
   ═══════════════════════════════════════════════════════════ */
#page-chat { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 0; }
#page-chat .chat-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  background: var(--c-card);
  border: 1px solid var(--c-border);
  box-shadow: var(--sh-subtle);
  overflow: hidden;
  margin-bottom: var(--sp-md);
}

#page-chat .chat-top {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  flex-wrap: wrap;
  padding: var(--sp-sm) var(--sp-md);
  border-bottom: 1px solid var(--c-separator);
}

#page-chat .chat-opts {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  flex-wrap: wrap;
  padding: var(--sp-xs) var(--sp-md);
  border-bottom: 1px solid var(--c-separator);
  background: color-mix(in srgb, var(--c-hover) 40%, transparent);
}

/* ═══════════════════════════════════════════════════════════
   H3 视频 / 分镜导演
   ═══════════════════════════════════════════════════════════ */
.media-row {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  padding: 5px 8px;
  border-radius: var(--r-control);
  background: var(--c-input);
  border: 1px solid var(--c-border);
  margin-bottom: 6px;
}

.media-row .mr-thumb {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: var(--r-sm);
  background: var(--c-card-strong);
  border: 1px solid var(--c-border);
  display: grid;
  place-items: center;
  overflow: hidden;
  font-size: var(--fs-2xs);
  color: var(--c-text-4);
}

.media-row .mr-thumb img { width: 100%; height: 100%; object-fit: cover; }
.media-row input { flex: 1 1 auto; min-width: 0; }
.media-row .mr-del { color: var(--c-text-4); }
.media-row .mr-del:hover { color: var(--c-red); }

.shot-segs { display: flex; flex-wrap: wrap; gap: var(--sp-sm) var(--sp-lg); }

.param-row { display: flex; align-items: center; gap: var(--sp-sm); flex-wrap: wrap; }
.param-row .pr-num {
  min-width: 58px;
  text-align: right;
  font-size: var(--fs-xs);
  color: var(--c-text-2);
  font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════
   视频超分 / 视频剪辑：参数网格
   ═══════════════════════════════════════════════════════════ */
.cfg-grid {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--sp-sm) var(--sp-md);
  align-items: center;
}

.cfg-grid .cg-k { font-size: var(--fs-sm); color: var(--c-text-2); white-space: nowrap; }
.cfg-grid .cg-k.span2 { grid-column: span 3; }

@media (max-width: 900px) {
  .cfg-grid { grid-template-columns: auto minmax(0, 1fr); }
  .cfg-grid .cg-k.span2 { grid-column: span 1; }
}

.hw-summary {
  font-size: var(--fs-xs);
  color: var(--c-text-2);
  line-height: 1.7;
  white-space: pre-wrap;
  user-select: text;
}

.hw-summary .hw-dim { color: var(--c-text-4); }

/* 素材列表（超分页 _DropList） */
.drop-list {
  border-radius: var(--r-card);
  border: 1.5px dashed var(--c-border-strong);
  background: var(--c-input);
  min-height: 110px;
  max-height: 240px;
  overflow-y: auto;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  transition: border-color var(--d-hover) var(--ease-apple),
              background var(--d-hover) var(--ease-apple);
}

.drop-list.dragover {
  border-color: var(--c-accent);
  background: var(--c-accent-subtle);
}

.drop-list .dl-item {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  padding: 5px 8px;
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  color: var(--c-text-2);
  transition: background var(--d-hover) var(--ease-apple);
}

.drop-list .dl-item:hover { background: var(--c-hover); }
.drop-list .dl-item.selected { background: var(--c-selection); color: var(--c-text); }
.drop-list .dl-item .dl-name { flex: 0 0 auto; }
.drop-list .dl-item .dl-dir { flex: 1 1 auto; min-width: 0; color: var(--c-text-4); font-size: var(--fs-2xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.drop-list .dl-empty {
  display: grid;
  place-items: center;
  min-height: 96px;
  color: var(--c-text-4);
  font-size: var(--fs-xs);
  text-align: center;
  padding: var(--sp-md);
  line-height: 1.6;
}

/* 视频剪辑时间线行 */
.tl-row {
  border-radius: var(--r-card);
  border: 1px solid var(--c-border);
  background: var(--c-card-strong);
  padding: 9px 12px 11px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
  margin-bottom: var(--sp-sm);
  transition: border-color var(--d-hover) var(--ease-apple),
              box-shadow var(--d-state) var(--ease-apple);
}

.tl-row:hover { border-color: var(--c-border-strong); box-shadow: var(--sh-subtle); }
.tl-row.dragging { opacity: 0.5; }
.tl-row.drop-before { border-top: 2px solid var(--c-accent); }
.tl-row.drop-after { border-bottom: 2px solid var(--c-accent); }

.tl-row .tl-head { display: flex; align-items: center; gap: var(--sp-xs); }
.tl-row .tl-name { font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.tl-row .tl-desc { font-size: var(--fs-2xs); color: var(--c-text-3); margin-left: 4px; }
.tl-row .tl-btns { margin-left: auto; display: flex; gap: 2px; }

.tl-row .tl-nums { display: flex; align-items: center; gap: var(--sp-sm); flex-wrap: wrap; font-size: var(--fs-xs); color: var(--c-text-2); }

.tl-empty {
  min-height: 120px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--sp-lg);
  border-radius: var(--r-card);
  border: 1.5px dashed var(--c-border-strong);
  background: var(--c-input);
  color: var(--c-text-3);
  font-size: var(--fs-sm);
  line-height: 1.7;
  white-space: pre-line;
}

.tl-empty.dragover { border-color: var(--c-accent); background: var(--c-accent-subtle); color: var(--c-accent); }

/* ═══════════════════════════════════════════════════════════
   历史记录
   ═══════════════════════════════════════════════════════════ */
#page-history .hist-list { padding-bottom: var(--sp-xl); }

/* ═══════════════════════════════════════════════════════════
   设置
   ═══════════════════════════════════════════════════════════ */
.setting-row {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  padding: 7px 0;
  flex-wrap: wrap;
}

.setting-row .sr-k {
  flex: 0 0 132px;
  font-size: var(--fs-sm);
  color: var(--c-text-2);
}

.setting-row .sr-v { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--sp-sm); flex-wrap: wrap; }

.setting-row .sr-note {
  flex: 1 1 100%;
  font-size: var(--fs-2xs);
  color: var(--c-text-4);
  line-height: 1.6;
  padding-left: 132px;
}

@media (max-width: 720px) {
  .setting-row .sr-k { flex-basis: 100%; }
  .setting-row .sr-note { padding-left: 0; }
}

/* 主题预设色板选择器 */
.preset-picker { display: flex; align-items: center; gap: var(--sp-xs); flex-wrap: wrap; }

.preset-dot {
  width: 26px;
  height: 26px;
  border-radius: var(--r-control);
  position: relative;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 3px rgba(0, 0, 0, 0.16);
  transition: transform var(--d-state) var(--ease-spring);
}

.preset-dot:hover { transform: scale(1.12); }

.preset-dot.on::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: calc(var(--r-control) + 3px);
  border: 2px solid var(--c-accent);
  animation: preset-in var(--d-state) var(--ease-spring);
}

@keyframes preset-in { from { opacity: 0; transform: scale(0.86); } to { opacity: 1; transform: none; } }

/* 提示词编辑器条目 */
.prompt-item {
  border-radius: var(--r-card);
  border: 1px solid var(--c-border);
  background: var(--c-card-strong);
  margin-bottom: var(--sp-sm);
  overflow: hidden;
}

.prompt-item.modified { border-color: color-mix(in srgb, var(--c-accent) 42%, transparent); }
.prompt-item .pi-head {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: 10px 14px;
}
.prompt-item .pi-name { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.prompt-item .pi-purpose { font-size: var(--fs-2xs); color: var(--c-text-3); line-height: 1.55; padding: 0 14px 10px; }
.prompt-item .pi-body { padding: 0 14px 14px; }
.prompt-item .pi-head .pi-tail { margin-left: auto; display: flex; gap: var(--sp-xs); align-items: center; }

/* ═══════════════════════════════════════════════════════════
   响应式：窄屏收窄内边距
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  .sidebar { flex-basis: 68px; width: 68px; }
  .sidebar .sb-item { margin-left: 0; justify-content: center; padding: 0; }
  .sidebar .sb-item .label,
  .sidebar .sb-group-btn .label,
  .sidebar .sb-group-btn .arrow { opacity: 0; pointer-events: none; }
  .sidebar .sb-group-btn { justify-content: center; padding: 0; }
  .page { padding: var(--sp-sm) var(--sp-md) var(--sp-xl); }
  .global-sku-bar { padding: 6px var(--sp-md); }
  .chat-compose .cmp-inner { max-width: 100%; }
}

/* 打印：仅保留内容（导出用） */
@media print {
  .sidebar, .titlebar, .global-sku-bar, .toast-layer, #particles { display: none !important; }
  body, .app { background: #fff; overflow: visible; height: auto; }
  .page { position: static; visibility: visible; opacity: 1; }
}