@charset "UTF-8";
/* Mockup page — 截图美化专属：合成预览舞台 / 标题栏勾选 / 窗口标题输入；其余复用 compress.css */
/* ── 结果区 ── */
.mk-work {
  margin-top: 20px;
}

.mk-stage {
  border: 1px solid #eceae4;
  border-radius: 16px;
  background: #fcfbf8;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 220px;
}

.mk-stage__canvas {
  display: none;
}
.mk-stage__canvas:not([hidden]) {
  display: block;
}
.mk-stage__canvas {
  max-width: 100%;
  max-height: calc(100vh - 340px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 8px 30px rgba(28, 28, 28, 0.08);
}

.mk-stage__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: rgba(28, 28, 28, 0.62);
  font-size: 13px;
  line-height: 1.8;
  text-align: center;
}
.mk-stage__placeholder[hidden] {
  display: none;
}
.mk-stage__placeholder svg {
  width: 40px;
  height: 40px;
  opacity: 0.4;
}

.mk-fileinfo {
  margin: 12px 2px 0;
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  font-size: 12px;
  color: rgba(28, 28, 28, 0.62);
  min-height: 18px;
}

/* ── 侧栏：标题栏勾选（复用 co-check 视觉，独立命名） ── */
.mk-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(28, 28, 28, 0.62);
  cursor: pointer;
}
.mk-check input {
  margin-top: 2px;
  accent-color: #1c1c1c;
  flex-shrink: 0;
}

/* ── 窗口标题行：标签 + 文本框横排 ── */
.mk-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  /* flex 会盖掉 UA [hidden]{display:none}，显隐必须配套补回 */
}
.mk-title-row[hidden] {
  display: none;
}
.mk-title-row .control-label {
  flex-shrink: 0;
}

/* 文本输入：与 .cv-select 同一套奶油凹槽 token，供全站复用 */
.cv-text-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #dcd8cc;
  border-radius: 8px;
  background-color: #efece3;
  font-family: "Plus Jakarta Sans", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", ui-sans-serif, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #1c1c1c;
}
.cv-text-input::placeholder {
  color: rgba(28, 28, 28, 0.62);
  font-weight: 400;
}
.cv-text-input:focus {
  outline: none;
  border-color: #1c1c1c;
  background-color: #fcfbf8;
}

/* ── 批次 1：颜色拾取器 ── */
.mk-color-input {
  width: 100%;
  height: 36px;
  padding: 2px;
  border: 1px solid #dcd8cc;
  border-radius: 8px;
  background: #efece3;
  cursor: pointer;
}
.mk-color-input:focus {
  outline: none;
  border-color: #1c1c1c;
}

.mk-color-pair {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mk-color-pair .mk-color-input {
  flex: 1;
}

.mk-color-arrow {
  font-size: 16px;
  color: rgba(28, 28, 28, 0.62);
  flex-shrink: 0;
}

/* 背景图填充方式行 */
.mk-bg-cover-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.mk-bg-cover-row .control-label {
  flex-shrink: 0;
}

/* 批次 3: 自定义画布尺寸行 */
.mk-cwch-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  /* flex 布局需显式处理 hidden */
}
.mk-cwch-row[hidden] {
  display: none;
}

.mk-num-input {
  width: 80px;
  text-align: center;
  flex-shrink: 0;
}

.mk-num-sep {
  font-size: 14px;
  color: rgba(28, 28, 28, 0.62);
}

/* control-group hidden 兼容性 */
.mockup-page .control-group[hidden] {
  display: none !important;
}

/*# sourceMappingURL=mockup.css.map */