/* 新工具共用的工作室外壳补充件。
 *
 * 基础组件（.paipai-studio / .studio-toolbar / .studio-panel / .slot-grid / .upload-slot /
 * .studio-btn）都在门户既有的 paipai-studio.css 里——新工具直接用那一套，和「场景复刻」
 * 完全同源。这里只补门户那套没有、而这几个工具需要的部分。
 */

/* ============================================================
   工作室外壳的补充件。基础组件在 paipai-studio.css，这里只补新工具需要的部分。
   ============================================================ */

/* 既有工作室是「左边素材 36% / 右边成品 64%」；新工具是「左边主体 / 右边参数」，
   所以右侧那一栏要窄一些。 */
.studio-body.params-right { grid-template-columns: minmax(0, 1fr) 340px; }

@media (max-width: 1180px) {
  .studio-body.params-right { grid-template-columns: minmax(0, 1fr); }
}

/* 面板内容区：既有工作室把内容直接塞进 .studio-panel，新工具的块需要统一内边距。 */
.studio-panel-body { padding: 0 20px 18px; }
.studio-panel-body > * + * { margin-top: 10px; }
.studio-panel-body > .slot-grid { margin: 0 -20px -18px; }

/* 面板里的辅助文字 */
.studio-note { margin: 0; color: #777f88; font-size: 11px; line-height: 1.7; }

/* 进度条 */
.studio-progress { height: 6px; border-radius: 999px; background: #e9edf1; overflow: hidden; }
.studio-progress i { display: block; height: 100%; width: 0; background: var(--blue, #087be6); transition: width .3s; }

/* 主操作按钮占满整栏（既有工作室用的是 .recognition-actions 里的 flex:1，这里直接给宽度） */
.studio-btn.submit-wide { width: 100%; height: 42px; font-size: 13px; font-weight: 700; }

/* 格子单元：格子本身 + 下面的标签下拉，作为一个网格项 */
.slot-cell { display: grid; gap: 4px; min-width: 0; }
.slot-cell-spacer { display: block; height: 22px; }

.slot-cell select {
  width: 100%;
  padding: 2px 4px;
  font-size: 10px;
  border: 1px solid #dfe4ea;
  border-radius: 6px;
  background: #fff;
  color: #353b42;
  box-sizing: border-box;
}

.upload-slot.dragging { border-color: var(--blue, #087be6); background: var(--soft-blue, #e8f3ff); }
.upload-slot a { display: block; width: 100%; height: 100%; }
.upload-slot.result-error { padding: 8px; text-align: center; }
.upload-slot.result-error .slot-empty { color: #d9534f; line-height: 1.5; }

/* 结果格子里点开看大图 */
a.upload-slot { text-decoration: none; }

/* 生成中的小圈 */
.studio-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid #dfe4ea;
  border-top-color: var(--blue, #087be6);
  border-radius: 50%;
  animation: studio-spin .8s linear infinite;
}

@keyframes studio-spin { to { transform: rotate(360deg); } }

/* 参数栏里的表单字段。和 .ts-field 同形，新工具统一用这一套。 */
.studio-field { margin-bottom: 10px; }
.studio-field:last-child { margin-bottom: 0; }
.studio-field label { display: block; font-size: 11px; color: #626b74; margin-bottom: 4px; }

.studio-field input[type="text"],
.studio-field input[type="number"],
.studio-field input[type="password"],
.studio-field select,
.studio-field textarea {
  width: 100%;
  font-family: inherit;
  font-size: 12px;
  padding: 8px 9px;
  border: 1px solid #dfe4ea;
  border-radius: 7px;
  background: #fff;
  color: #20252b;
  box-sizing: border-box;
}

.studio-field textarea { min-height: 56px; resize: vertical; }
.studio-field small { display: block; color: #858c95; font-size: 10px; margin-top: 3px; }

.studio-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

.studio-check { display: flex; align-items: flex-start; gap: 8px; font-size: 11px; color: #353b42; cursor: pointer; }
.studio-check input { margin-top: 2px; flex: 0 0 auto; }
.studio-check small { display: block; color: #858c95; font-size: 10px; margin-top: 2px; font-weight: 400; }

/* 分段选择（去AI画质的光影力度、产品替换的品类） */
.studio-seg { display: grid; gap: 6px; }

.studio-seg button {
  padding: 9px 11px;
  text-align: left;
  font-size: 11px;
  border: 1px solid #dfe4ea;
  border-radius: 7px;
  background: #fff;
  color: #353b42;
  cursor: pointer;
}

.studio-seg button:hover { border-color: var(--blue, #087be6); }
.studio-seg button.active { background: var(--blue, #087be6); border-color: var(--blue, #087be6); color: #fff; }
.studio-seg button small { display: block; margin-top: 3px; font-size: 10px; color: #858c95; }
.studio-seg button.active small { color: rgba(255, 255, 255, .8); }

/* 逐张状态列表（去AI画质） */
.studio-rows > * + * { margin-top: 8px; }

.studio-row-item {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px;
  border: 1px solid #dfe4ea;
  border-radius: 7px;
  background: #fff;
}

.studio-row-item img { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; background: #f4f6f8; }
.studio-row-name { font-size: 11px; color: #20252b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.studio-row-meta { font-size: 10px; color: #858c95; margin-top: 2px; }

.studio-chip {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 13px;
  background: #f1f4f7;
  color: #6b7480;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.studio-chip.done { background: #e4f8eb; color: #24a85b; }
.studio-chip.failed, .studio-chip.interrupted { background: #fdeaea; color: #d9534f; }
.studio-chip.processing, .studio-chip.waiting { background: #e8f3ff; color: #087be6; }

/* 步骤条（室内外摄影、买家秀） */
.studio-steps { display: grid; gap: 5px; }
.studio-step { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #858c95; }
.studio-step i { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: #dfe4ea; }
.studio-step.active { color: #20252b; }
.studio-step.active i { background: var(--blue, #087be6); }
.studio-step.done { color: #20252b; }
.studio-step.done i { background: #24a85b; }

/* 前后对照弹窗 */
.studio-modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(23, 32, 29, .62); }
.studio-modal[hidden] { display: none; }
.studio-dialog { max-width: min(940px, 100%); max-height: 100%; overflow: auto; padding: 16px; border-radius: 10px; background: #fff; }
.studio-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.studio-dialog-head b { font-size: 14px; }
.studio-dialog-head button { border: 0; background: none; color: #858c95; font-size: 20px; line-height: 1; cursor: pointer; }

.studio-compare { position: relative; border-radius: 8px; overflow: hidden; background: #f4f6f8; line-height: 0; }
.studio-compare img { display: block; width: 100%; height: auto; }
.studio-compare img.studio-after { position: absolute; inset: 0; clip-path: inset(0 0 0 50%); }
.studio-compare-bar { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 11px; color: #858c95; }
.studio-compare-bar input[type="range"] { flex: 1; accent-color: var(--blue, #087be6); }

/* ---------- 实时对照预览（手机感） ---------- */

/* 对照预览：处理后的图叠在原图上，靠 clip-path 露出左边一部分。 */
.pl-frame {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  line-height: 0;
  background: repeating-conic-gradient(#f2f4f2 0% 25%, #fff 0% 50%) 50% / 18px 18px;
}

.pl-base { display: block; width: 100%; height: auto; }

.pl-result {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: inset(0 0 0 50%);
}

.pl-busy {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 3px 9px;
  border-radius: 13px;
  background: rgba(32, 37, 43, .82);
  color: #fff;
  font-size: 10px;
  line-height: 1.6;
}

.pl-busy[hidden] { display: none; }

.pl-compare {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  color: #858c95;
  font-size: 10px;
}

.pl-compare input[type="range"] { flex: 1; accent-color: var(--blue, #087be6); }

/* 预设：两列小按钮 */
.pl-presets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pl-presets .studio-btn { width: 100%; }
.pl-presets .studio-btn.active { border-color: var(--blue, #087be6); background: var(--blue, #087be6); color: #fff; }

/* 滑块 */
.pl-slider { margin-bottom: 10px; }
.pl-slider:last-child { margin-bottom: 0; }

.pl-slider-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 11px;
  color: #353b42;
  margin-bottom: 3px;
}

.pl-slider-head output { color: #858c95; font-size: 10px; font-variant-numeric: tabular-nums; }

.pl-slider input[type="range"] { width: 100%; accent-color: var(--blue, #087be6); }

.pl-slider small { display: block; color: #858c95; font-size: 10px; margin-top: 2px; }

/* ---------- 封面框选编辑器（一键改封面文案） ---------- */

.cc-stage {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #dfe4ea;
  background: #f4f6f8;
  line-height: 0;
  cursor: crosshair;
  touch-action: none;
}

.cc-stage img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }

.cc-overlay { position: absolute; inset: 0; }

.cc-box {
  position: absolute;
  border: 1.5px solid #087be6;
  background: rgba(8, 123, 230, .16);
  border-radius: 3px;
  cursor: pointer;
  box-sizing: border-box;
}

.cc-box.active { border-width: 2px; background: rgba(8, 123, 230, .3); box-shadow: 0 0 0 2px rgba(8, 123, 230, .28); }
.cc-box.drafting { border-style: dashed; background: rgba(8, 123, 230, .1); pointer-events: none; }

.cc-box-no {
  position: absolute;
  left: -1px;
  top: -1px;
  transform: translateY(-100%);
  padding: 1px 6px;
  border-radius: 4px 4px 0 0;
  background: #087be6;
  color: #fff;
  font-size: 10px;
  line-height: 1.5;
  font-weight: 700;
}

/* 区域列表 */
.cc-regions > * + * { margin-top: 6px; }

.cc-region {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid #dfe4ea;
  border-radius: 7px;
  background: #fff;
  cursor: pointer;
}

.cc-region:hover { border-color: #b9c6d4; }
.cc-region.active { border-color: #087be6; background: var(--soft-blue, #e8f3ff); }

.cc-region-no {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #087be6;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}

.cc-region-body { min-width: 0; }

.cc-region-text {
  font-size: 11px;
  color: #20252b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cc-region-text.empty { color: #9aa4af; }

.cc-region-del {
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #eef2f6;
  color: #6b7480;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}

.cc-region-del:hover { background: #fdeaea; color: #d9534f; }