/* ============================================================================
   规范级详情图（A+ / 详情页）· 专属样式
   ----------------------------------------------------------------------------
   ⚠️ 只写 dp- 前缀的类；卡片/上传/选择器/底部条/结果卡**沿用 setkit.css 的 sk- 类**，
      这样两个功能的视觉语言天然一致（高级感不是靠这里再造一套）。
   ⚠️ 所有用 display:flex/grid 的元素，一旦要 [hidden]，必须自己补一条
      `[hidden]{display:none!important}` —— 否则 hidden 会被盖掉（站内踩过）。
   ========================================================================== */

/* ---------- [hidden] 兜底（🔴 必须有，本次就是漏了它出的问题） ----------
   setkit.css 里那条兜底写的是 `#sub-setkit [hidden]{display:none!important}` ——
   **只作用于商品套图子页**。本功能复用了一堆 sk- 类，其中 `.sk-thumbs` 是 grid、
   `.sk-drop-hint` 是 flex，在 `#sub-dpage` 里它们的 `hidden` 全被 display 盖掉。
   后果之一就是上传后虚线框收不起来（2026-09-20 用户实测反馈）。
   每个复用了共享类的子页都要有自己这一条 —— 这是**根因级**修复，别再逐元素补。 */
#sub-dpage [hidden] { display: none !important; }

/* ---------- 已上传的商品原图缩略图 ----------
   🔴 类名是 dp-thumb（本功能自己的）。
   原来 dpage.js 里写的是 'sk-thumb' —— **那个类全站不存在**
   （商品套图里单张图叫 .sk-th），于是缩略图一条样式都没匹配上，
   <img> 按原图原始尺寸渲染 → 一张图把整个窗口占满（用户截图实测）。 */
.dp-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; padding: 4px; }
.dp-thumb {
  position: relative; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden;
  background: #fff; border: 1px solid #ffe4d3;
}
.dp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dp-thumb-first {
  position: absolute; left: 4px; bottom: 4px;
  font-size: 10px; font-weight: 700; color: #fff;
  background: rgba(249, 89, 1, 0.86); padding: 2px 6px; border-radius: 6px;
}
.dp-thumb-x {
  position: absolute; right: 3px; top: 3px;
  width: 20px; height: 20px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(28, 18, 12, 0.62); color: #fff;
  font-size: 13px; line-height: 1; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.dp-thumb-x:active { transform: scale(0.9); }

/* ---------------- 生成设置：尺寸规格那个宽下拉 ---------------- */
.dp-sel-wide { width: 100%; margin-top: 8px; }
.dp-sel-wide .sk-sel-k { display: flex; align-items: center; gap: 8px; }
.dp-spec-hint {
  font-style: normal; font-weight: 800;
  color: var(--primary);
  background: var(--chip-bg);
  padding: 1px 7px; border-radius: 6px;
  font-size: 11px; font-variant-numeric: tabular-nums;
}
.dp-spec-hint[hidden] { display: none !important; }

/* ---------------- ④ 模块多选 ---------------- */
.dp-mods {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.dp-mod {
  position: relative;
  display: flex; align-items: flex-start; gap: 9px;
  padding: 10px 11px;
  border: 1px solid var(--line, #efe9e4);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  text-align: left; font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .15s ease, background .15s ease, transform .12s ease;
}
.dp-mod:active { transform: scale(.985); }
.dp-mod .dp-mod-box {
  flex: 0 0 auto;
  width: 17px; height: 17px; margin-top: 1px;
  border: 1.8px solid #d8d0ca; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s ease;
}
.dp-mod .dp-mod-box svg { opacity: 0; transition: opacity .12s ease; }
.dp-mod-tx { min-width: 0; }
.dp-mod-tx b { display: block; font-size: 13px; font-weight: 800; color: var(--text, #2c2320); }
.dp-mod-tx span { display: block; margin-top: 2px; font-size: 11.5px; line-height: 1.45; color: var(--muted, #9a8f88); }
.dp-mod.on {
  border-color: var(--primary);
  background: linear-gradient(180deg, #fff7f2 0%, #fff 100%);
}
.dp-mod.on .dp-mod-box { background: var(--primary); border-color: var(--primary); }
.dp-mod.on .dp-mod-box svg { opacity: 1; }
.dp-mod.dis { opacity: .45; cursor: not-allowed; }

/* ---------------- 空态示例 ---------------- */
.dp-demo {
  margin-top: 14px;
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 12px;
  align-items: stretch;
}
.dp-demo-l {
  display: flex; flex-direction: column; gap: 8px;
  justify-content: center;
}
.dp-demo-ph {
  height: 46px; border-radius: 9px;
  background: linear-gradient(135deg, #f0eae4 0%, #e3d9d0 100%);
  border: 1px solid var(--line, #efe9e4);
}
.dp-demo-ph.a { height: 58px; }
.dp-demo-r {
  border-radius: 14px;
  background: linear-gradient(180deg, #fbf8f5 0%, #f4efe9 100%);
  border: 1px solid var(--line, #efe9e4);
  padding: 10px;
  display: flex; flex-direction: column; gap: 7px;
}
.dp-demo-row {
  border-radius: 8px;
  background: #fff;
  border: 1px solid #f2ece7;
  display: flex; align-items: center; gap: 8px;
  padding: 7px 9px;
  font-size: 11.5px; font-weight: 700; color: var(--muted, #9a8f88);
}
.dp-demo-row i {
  font-style: normal; font-size: 11px;
  background: var(--chip-bg); color: var(--primary);
  padding: 1px 6px; border-radius: 5px;
}
.dp-demo-row.h1 { height: 52px; align-items: flex-start; padding-top: 9px; }
.dp-demo-row.h2 { height: 38px; }
.dp-demo-row.h3 { height: 30px; }
.dp-demo-row.h4 { height: 24px; }
.dp-demo-row.h5 { height: 20px; }

/* ---------------- 第二步：设计规范面板 ---------------- */
.dp-sec-h {
  display: flex; align-items: baseline; gap: 8px;
  padding: 0 2px 8px;
}
.dp-sec-h b { font-size: 15px; font-weight: 800; }
.dp-sec-tip { font-size: 11.5px; color: var(--muted, #9a8f88); }

.dp-brief {
  border: 1px solid var(--line, #efe9e4);
  border-radius: 14px;
  padding: 12px 13px;
  background: #fff;
}
.dp-brief-g { margin-bottom: 11px; }
.dp-brief-g:last-child { margin-bottom: 0; }
.dp-brief-g > i {
  font-style: normal; display: block;
  font-size: 11.5px; font-weight: 800; letter-spacing: .3px;
  color: var(--primary); margin-bottom: 5px;
}
.dp-brief-row { display: flex; gap: 8px; font-size: 12.5px; line-height: 1.75; }
.dp-brief-row > em {
  font-style: normal; flex: 0 0 auto; min-width: 58px;
  color: var(--muted, #9a8f88); font-weight: 700;
}
.dp-brief-row > span { flex: 1 1 auto; color: var(--text, #2c2320); word-break: break-word; }

.dp-briefmods { display: flex; flex-direction: column; gap: 9px; }
.dp-briefmod {
  border: 1px solid var(--line, #efe9e4);
  border-radius: 14px; background: #fff;
  padding: 11px 12px;
}
.dp-briefmod-h {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
}
.dp-briefmod-n {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 7px;
  background: var(--primary); color: #fff;
  font-size: 11px; font-weight: 800; line-height: 20px; text-align: center;
}
.dp-briefmod-h b { font-size: 13.5px; font-weight: 800; }
.dp-briefmod-h .dp-briefmod-d { font-size: 11.5px; color: var(--muted, #9a8f88); }
.dp-briefmod-h .dp-briefmod-x {
  margin-left: auto; border: 0; background: var(--chip-bg);
  color: var(--muted, #9a8f88); border-radius: 7px;
  width: 24px; height: 24px; cursor: pointer; font-family: inherit;
  font-size: 13px; line-height: 1;
}
.dp-briefmod-h .dp-briefmod-x:hover { color: #d9483b; }
.dp-briefmod-f { display: flex; flex-direction: column; gap: 6px; }
.dp-briefmod-f label { display: flex; align-items: center; gap: 8px; }
.dp-briefmod-f label > em {
  font-style: normal; flex: 0 0 auto; min-width: 52px;
  font-size: 11.5px; font-weight: 700; color: var(--muted, #9a8f88);
}
.dp-briefmod-f input {
  flex: 1 1 auto; min-width: 0;
  border: 1px solid var(--line, #efe9e4); border-radius: 9px;
  padding: 7px 9px; font-size: 12.5px; font-family: inherit;
  color: var(--text, #2c2320); background: #fdfcfb;
}
.dp-briefmod-f input:focus { outline: 2px solid #ffd9c2; border-color: var(--primary); }
.dp-briefmod-p {
  margin-top: 8px; font-size: 11.5px; line-height: 1.7;
  color: var(--muted, #9a8f88);
  padding-top: 8px; border-top: 1px dashed var(--line, #efe9e4);
}

.dp-brief-bar {
  display: flex; gap: 10px; align-items: center;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--line, #efe9e4);
}
.dp-brief-bar .gen-btn { flex: 1 1 auto; }

/* ---------------- 结果卡 ---------------- */
.dp-shots { display: flex; flex-direction: column; gap: 12px; }
.dp-shot {
  position: relative;
  border: 1px solid var(--line, #efe9e4);
  border-radius: 14px; background: #fff; overflow: hidden;
}
.dp-shot-b { position: relative; background: #fbf8f5; min-height: 120px; }
.dp-shot-b img { width: 100%; display: block; }
.dp-shot-ph {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, #f4efe9 30%, #faf7f4 50%, #f4efe9 70%);
  background-size: 200% 100%;
  animation: dp-shine 1.25s linear infinite;
}
@keyframes dp-shine { to { background-position: -200% 0; } }
.dp-shot-st {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 22px 12px 10px;
  font-size: 12px; font-weight: 700; color: #fff;
  background: linear-gradient(0deg, rgba(24,16,12,.62), rgba(24,16,12,0));
}
.dp-shot-st.err {
  position: static; color: #d9483b; background: none; padding: 10px 12px 0;
}
.dp-shot-n {
  position: absolute; left: 8px; top: 8px; z-index: 2;
  font-size: 10.5px; font-weight: 800; color: #fff;
  background: rgba(28,18,12,.55);
  padding: 3px 8px; border-radius: 7px;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.dp-shot-sz {
  position: absolute; right: 8px; top: 8px; z-index: 2;
  font-size: 10px; font-weight: 700; color: #fff;
  background: rgba(28,18,12,.55);
  padding: 3px 7px; border-radius: 7px;
  font-variant-numeric: tabular-nums;
}
.dp-shot-f {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 11px 11px;
  border-top: 1px solid var(--line, #efe9e4);
}
.dp-shot-t {
  flex: 1 1 auto; min-width: 0;
  font-size: 12.5px; font-weight: 800; color: var(--text, #2c2320);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dp-shot-f button {
  border: 1px solid var(--line, #efe9e4); background: #fff;
  color: var(--text, #2c2320); border-radius: 9px;
  padding: 6px 11px; font-size: 12px; font-weight: 700;
  cursor: pointer; font-family: inherit; flex: 0 0 auto;
  -webkit-tap-highlight-color: transparent;
}
.dp-shot-f button.pri { background: var(--primary); border-color: var(--primary); color: #fff; }

/* ---------------- 长图预览弹层 ---------------- */
.dp-longmask {
  position: fixed; inset: 0; z-index: 945;
  background: rgba(26,18,12,.5);
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.dp-longmask[hidden] { display: none !important; }
.dp-long {
  width: min(560px, 100%); max-height: 100%;
  background: #fff; border-radius: 16px;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 24px 60px rgba(28,18,12,.28);
}
.dp-long-h {
  display: flex; align-items: center; gap: 8px;
  padding: 13px 14px; border-bottom: 1px solid var(--line, #efe9e4);
}
.dp-long-h b { font-size: 15px; font-weight: 800; }
.dp-long-tip { font-size: 11.5px; color: var(--muted, #9a8f88); }
.dp-long-b {
  flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain;
  padding: 12px; background: #f7f4f1;
}
.dp-long-b img { width: 100%; display: block; border-radius: 8px; }
.dp-long-b canvas { width: 100%; display: block; border-radius: 8px; background: #fff; }
.dp-long-f { padding: 11px 14px 14px; border-top: 1px solid var(--line, #efe9e4); }
.dp-long-f .gen-btn { width: 100%; }

/* ---------------- 单张编辑弹层 ---------------- */
.dp-editmask {
  position: fixed; inset: 0; z-index: 946;
  background: rgba(26,18,12,.5);
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.dp-editmask[hidden] { display: none !important; }
.dp-edit {
  /* 460 → 500：编辑弹窗从"三个文本框"扩成四段（文案/画面/模块/成品操作），
     窄屏仍是 100% 铺满，不受影响。 */
  width: min(500px, 100%); max-height: 100%;
  background: #fff; border-radius: 16px;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 24px 60px rgba(28,18,12,.28);
}
.dp-edit-h {
  display: flex; align-items: center; gap: 8px;
  padding: 13px 14px; border-bottom: 1px solid var(--line, #efe9e4);
}
.dp-edit-h b { font-size: 15px; font-weight: 800; }
.dp-edit-tip { font-size: 11.5px; color: var(--muted, #9a8f88); }
.dp-edit-b { padding: 14px; overflow-y: auto; }
.dp-fl { display: block; margin-bottom: 11px; font-size: 12px; font-weight: 800; color: var(--muted, #9a8f88); }
.dp-fl .sk-ta { margin-top: 5px; font-weight: 400; color: var(--text, #2c2320); }
.dp-edit-f {
  display: flex; gap: 10px; padding: 12px 14px 14px;
  border-top: 1px solid var(--line, #efe9e4);
}
.dp-edit-f .gen-btn { flex: 1 1 auto; }

/* ---------- 本功能内的动作按钮：不许换行、不许被压扁 ----------
   🔴 2026-09-20 用户实测（手机）：结果页的「全部下载（8 张）」被压成三行
      （"全部下" / "载（8" / "张）"），规范面板的「上一步」被压成一个**圆形**。
   根因：共享的 `.sk-act` 是 `inline-flex`，但**没设 `white-space: nowrap`**、
      也没有收缩约束 → flex 容器空间不够时浏览器先压缩文字使其换行；
      再叠上 `.sk-act` 的 `border-radius: 999px`，被压窄的按钮就变成了圆形/畸形。
   修法：本功能内统一 nowrap + 不允许收缩；主按钮仍可拉伸占满剩余宽度。
   ⚠️ 用 `#sub-dpage` 作用域限定，避免影响商品套图的按钮。 */
#sub-dpage .sk-act { white-space: nowrap; flex: 0 0 auto; }
#sub-dpage .sk-act.primary { flex: 1 1 auto; }
#sub-dpage .gen-btn { white-space: nowrap; }

@media (max-width: 560px) {
  /* 🔴 手机上**也是双列**（2026-09-20 用户实测：「为啥不做双排，浪费空间」）。
     实测参考产品（美图 detailpage · 390 视口）就是 `grid-template-columns: 212.5px 212.5px`
     —— 两列等宽、gap 14px。
     我原来在这里写了 `grid-template-columns: 1fr`（单列），是**我自己加的、参考产品并没有**，
     结果 16 个模块拉成 16 长条，又浪费空间又难扫。
     实测：390 视口下两列每列 ≈155px，最长的「尺寸/容量/尺码图」(8 字 ×13px=104px)
     ＋勾选框(17)＋间距(9) ≈130px < 155px，**放得下**，所以手机上不需要退化成单列。 */
  .dp-mod { padding: 9px 10px; gap: 7px; }
  .dp-mod-tx b { font-size: 12.5px; }
  .dp-mod-tx span { font-size: 11px; }
  .dp-demo { grid-template-columns: 74px 1fr; }
  .dp-longmask, .dp-editmask { padding: 10px; }
}

/* ---------- 下拉浮层里的「像素尺寸」标签（尺寸规格专用） ----------
   学参考产品的做法：选项右侧直接标出这一档的实际像素，选之前就知道会出多大。
   ⚠️ 只在详情图子页内生效 —— `.sk-mi-tick` 的 `margin-left:auto` 来自共享的 setkit.css，
      这里要把它让位给尺寸标签，所以用 `#sub-dpage` 作用域限定，避免影响商品套图的浮层。 */
#sub-dpage .sk-menu .sk-mi > span:first-child { flex: 1 1 auto; min-width: 0; }
.dp-mi-wh {
  flex: 0 0 auto; margin-right: 8px;
  font-size: 11.5px; font-weight: 700; color: var(--muted, #9a8f88);
  font-variant-numeric: tabular-nums;
}
#sub-dpage .sk-menu .sk-mi-tick { margin-left: 0; flex: 0 0 auto; }

/* ---------- 「规范级详情图」的图标底色 ----------
   全站 f-* 配色已有 19 个（含商品套图的暖咖 f-setkit）→ 这里造一个**冷调石墨蓝**：
   ① 与暖咖的 f-setkit 一眼区分（一个暖一个冷）；② 冷色自带"规范/严谨"的心理暗示，
   正好配"按平台规范出图"这个定位。写在 dpage.css 里，跟着本功能一起加载。 */
.f-dpage { background: linear-gradient(135deg, #4f7183 0%, #1e3038 100%); }

/* 规范面板底部的引导小字：明确"策划完成 ≠ 已开始出图，需要点按钮"
   （2026-09-20 事故：缺这句提示 + 页面下方误显示"生成中"，用户以为在跑） */
.dp-brief-tip { margin: 14px 0 0; text-align: center; }

/* ---------------- 单张编辑弹窗：四段能力分组 ----------------
   2026-09-20 用户反馈「图片编辑太简陋」—— 原来只有三个文本框，
   而服务端早就支持「画面说明」了，只是没透出来。
   现在按用户改图的真实顺序分段（图上文案 → 画面怎么拍 → 这一张是什么 → 对已有的图），
   每段标题右边一句话写清"这块改了会怎样"，段间用虚线分隔、末段去掉线。 */
.dp-ef { padding: 13px 0; border-bottom: 1px dashed var(--line, #efe9e4); }
.dp-ef:first-child { padding-top: 2px; }
.dp-ef:last-child { padding-bottom: 2px; border-bottom: 0; }
.dp-ef-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.dp-ef-h b { font-size: 13px; font-weight: 800; color: var(--text, #2c2320); }
.dp-ef-h > span { font-size: 11.5px; color: var(--muted, #9a8f88); }
.dp-ef-pic { width: 100%; resize: vertical; min-height: 62px; }
.dp-ef-sel { width: 100%; }
.dp-ef-acts { display: flex; flex-wrap: wrap; gap: 10px; }
/* 「删除这张」是破坏性操作：用红字弱化，不做成实心主按钮（也不放主按钮旁边） */
.dp-ef-del { color: #c0392b; border-color: #f0d3cd; background: #fff; }
.dp-ef-del:hover:not(:disabled) { background: #fff5f3; border-color: #e9bdb4; }
.dp-ef .gen-hint { margin: 8px 0 0; }
.dp-ef .dp-fl:last-of-type { margin-bottom: 0; }

/* 规范面板里标出「这一张的画面被单独改过」——否则用户以为规范面板漏了他改的东西 */
.dp-briefmod-pic {
  margin-top: 7px; padding: 6px 9px; border-radius: 8px;
  font-size: 11.5px; line-height: 1.55; color: #a8642c;
  background: #fff7ef; border: 1px solid #ffe6d3;
}