/* ============================================================================
   服装提取 · 样式（2026-09-23）
   ----------------------------------------------------------------------------
   类名前缀 `clx-`（全站已核未被占用）。
   🔴 本文件在 style.css 之后加载 —— 只新增类名，**不改 style.css**
      （铁律：改别人的样式别动 style.css，避免与并发会话互相覆盖）。

   配色思路（沿用本项目已验证的两条原则）：
     ① **一个功能一条色轴**：整页只有品红（H 292°）一条色轴。
        图片板块已占 0/15/25/35/38/43/78/142/175/189/198/217/243/258/330，
        292° 是 258°(purple) 与 330°(pink) 之间的空位（各距 34°/38°，均 > 30° 阈值）。
        `node tools/audit-icon-colors.cjs --view image` 可复验，别用肉眼比色。
     ② **冲击力来自明度对比**：不引入第二种颜色，用近黑的深紫 `#2b0a33` 压住品红，
        做出"高级时装"的观感（品红本身就带时尚属性，是服装类的合适选择）。
   ========================================================================== */

/* 🔴 `[hidden]` 的兜底必须**按作用域各补一条**：本页多处用了 display:flex/grid，
   它们会盖掉浏览器默认的 `[hidden]{display:none}`，导致"隐藏"的元素其实还占着位置。 */
#sub-clothget [hidden] { display: none !important; }

/* 卡片图标配色（给图片板块的新卡片用；style.css 的 12 个 f-* 已占满，故自带一个） */
.f-clothget {
  background: linear-gradient(140deg, #f5d0fe 0%, #d946ef 55%, #a21caf 100%);
  color: #2b0a33;
}

/* 顶栏右侧的「重新开始」（与 qrart 的 .qra-topbtn 同一位置习惯） */
.clx-topbtn {
  margin-left: auto; padding: 5px 12px; border-radius: 999px; cursor: pointer;
  font-size: 12.5px; font-weight: 700; color: #86198f;
  background: rgba(217, 70, 239, .12);
}
.clx-topbtn:active { background: rgba(217, 70, 239, .22); }

/* ===================== 横幅 ===================== */
.clx-banner {
  position: relative;
  display: flex; align-items: center; gap: 13px;
  padding: 16px 18px; margin-bottom: 14px;
  border-radius: var(--radius, 16px);
  background: linear-gradient(118deg, #f7d6ff 0%, #e57ff5 42%, #a21caf 100%);
  color: #2b0a33;
  box-shadow: 0 10px 24px -12px rgba(162, 28, 175, .8);
  overflow: hidden;
}
.clx-banner::after {
  content: ''; position: absolute; right: -34px; top: -58px;
  width: 150px; height: 150px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 68%);
  pointer-events: none;
}
.clx-banner-ico {
  position: relative; flex: none;
  width: 46px; height: 46px; border-radius: 15px;
  display: flex; align-items: center; justify-content: center;
  font-size: 25px; line-height: 1;
  background: rgba(255,255,255,.72);
  box-shadow: inset 0 1px 0 #fff, 0 6px 14px -8px rgba(43,10,51,.6);
}
.clx-banner-tx { position: relative; min-width: 0; }
.clx-banner-t { font-size: 17px; font-weight: 800; letter-spacing: .5px; }
.clx-banner-s { margin-top: 3px; font-size: 12.5px; opacity: .8; line-height: 1.5; }

/* ===================== 上传区 ===================== */
.clx-drop {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 7px; padding: 30px 18px;
  border: 2px dashed #eecdf5; border-radius: 16px;
  background: linear-gradient(180deg, #fdf8ff 0%, #fbeffd 100%);
  cursor: pointer; text-align: center;
  transition: border-color .18s ease, background .18s ease, transform .12s ease;
}
.clx-drop:active { transform: scale(.995); }
.clx-drop.on  { border-color: #d946ef; background: linear-gradient(180deg, #fcf0fe 0%, #f7e1fb 100%); }
.clx-drop-ico {
  width: 52px; height: 52px; border-radius: 17px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 700; color: #86198f;
  background: #fff; border: 1px solid #f2d9f8;
  box-shadow: 0 8px 18px -10px rgba(162, 28, 175, .7);
}
.clx-drop-t { font-size: 15px; font-weight: 700; color: var(--text, #3a2a1e); }
.clx-drop-s { font-size: 12.5px; color: var(--text2, #a08c7c); line-height: 1.6; }

/* 已选图预览 */
.clx-shot { position: relative; border-radius: 16px; overflow: hidden; background: #f6f3f0; }
.clx-shot img { display: block; width: 100%; height: auto; }
.clx-shot-bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(30,6,36,0) 0%, rgba(30,6,36,.72) 100%);
}
.clx-shot-n { flex: 1; min-width: 0; font-size: 12px; color: #fff; opacity: .92; }
.clx-shot-b {
  flex: none; padding: 6px 12px; border-radius: 999px; cursor: pointer;
  font-size: 12.5px; font-weight: 700; color: #2b0a33;
  background: rgba(255,255,255,.92); border: 0;
}

/* ===================== 形态选择（三张竖卡） ===================== */
.clx-mds { display: flex; flex-direction: column; gap: 9px; }
.clx-md {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 13px 14px; border-radius: 14px; cursor: pointer;
  background: #fdfbfe; border: 1.5px solid #f0e6f4;
  transition: border-color .16s, background .16s, box-shadow .16s;
}
.clx-md.on {
  border-color: #d946ef; background: linear-gradient(180deg, #fef7ff 0%, #fbeafd 100%);
  box-shadow: 0 8px 20px -14px rgba(162, 28, 175, .9);
}
.clx-md-ico {
  flex: none; width: 40px; height: 40px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  font-size: 21px; line-height: 1;
  background: #fff; border: 1px solid #f2d9f8;
}
.clx-md-main { flex: 1; min-width: 0; }
.clx-md-h { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.clx-md-n { font-size: 14.5px; font-weight: 800; color: #2b0a33; }
.clx-md-tag {
  font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 999px;
  background: #fbe8fe; color: #86198f;
}
.clx-md-tag.clx-tag-warn { background: #fff2e0; color: #b45309; }
.clx-md-en {
  font-size: 10.5px; color: #b9a7c0; font-style: italic;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.clx-md-d { margin-top: 4px; font-size: 12.5px; color: #6d6272; line-height: 1.55; }
.clx-md-u { margin-top: 3px; font-size: 11.5px; color: #a394ab; }
.clx-md-mk {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: #fff; background: #f0e6f4;
  transition: background .16s;
}
.clx-md.on .clx-md-mk { background: linear-gradient(135deg, #d946ef, #a21caf); }
.clx-md-both.on { border-color: #f0b429; background: linear-gradient(180deg, #fffdf5 0%, #fff7e6 100%); box-shadow: 0 8px 20px -14px rgba(240,180,41,.9); }

/* ===================== 尺寸胶囊 ===================== */
.clx-szs { display: flex; flex-wrap: wrap; gap: 7px; }
.clx-sz {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 12px; border-radius: 999px; cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: #6d6272;
  background: #fdfbfe; border: 1.5px solid #f0e6f4;
  transition: all .16s;
}
.clx-sz.on { border-color: #d946ef; color: #86198f; background: #fdf2fe; font-weight: 700; }
.clx-sz i { font-style: normal; }
.clx-sz em { font-style: normal; font-size: 11px; color: #b9a7c0; }
.clx-sz.on em { color: #c266d6; }

/* ===================== 生成按钮与加载 ===================== */
.clx-run {
  width: 100%; padding: 15px 18px; border: 0; border-radius: 14px; cursor: pointer;
  font-size: 15.5px; font-weight: 800; color: #fff; letter-spacing: .3px;
  background: linear-gradient(118deg, #e879f9 0%, #c026d3 50%, #86198f 100%);
  box-shadow: 0 10px 22px -12px rgba(162, 28, 175, .95);
  transition: opacity .16s, transform .1s;
}
.clx-run:active:not(:disabled) { transform: translateY(1px); }
.clx-run:disabled {
  cursor: default; color: #b9a7c0; background: #f2edf4; box-shadow: none;
}
.clx-cost { margin: 9px 2px 0; font-size: 12px; color: #a394ab; line-height: 1.6; }

.clx-loading {
  display: flex; align-items: center; gap: 9px;
  margin-top: 11px; padding: 11px 14px; border-radius: 12px;
  font-size: 12.5px; color: #86198f; background: #fdf2fe;
  border: 1px solid #f2d9f8;
}
.clx-spin {
  flex: none; width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid #eecdf5; border-top-color: #c026d3;
  animation: clxSpin .8s linear infinite;
}
@keyframes clxSpin { to { transform: rotate(360deg); } }

.clx-err {
  margin-top: 10px; padding: 11px 14px; border-radius: 12px;
  font-size: 12.5px; line-height: 1.6; color: #b42318;
  background: #fef3f2; border: 1px solid #fee4e2;
}

/* ===================== 结果 ===================== */
.clx-outs { display: flex; flex-direction: column; gap: 14px; }
.clx-out { margin: 0; border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid #f0e6f4; }
.clx-out-img { background: #faf7fb; }
.clx-out-img img { display: block; width: 100%; height: auto; }
.clx-out-bar {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 13px; background: #fdfbfe; border-top: 1px solid #f5eefa;
}
.clx-out-t { font-size: 13.5px; font-weight: 800; color: #2b0a33; }
.clx-out-s { flex: 1; min-width: 0; font-size: 11.5px; color: #b9a7c0; }
.clx-out-dl {
  flex: none; padding: 7px 14px; border: 0; border-radius: 999px; cursor: pointer;
  font-size: 12.5px; font-weight: 700; color: #fff;
  background: linear-gradient(118deg, #c026d3, #86198f);
  box-shadow: 0 6px 14px -8px rgba(162, 28, 175, .9);
}
.clx-again {
  width: 100%; margin-top: 12px; padding: 12px 16px; border-radius: 13px; cursor: pointer;
  font-size: 13.5px; font-weight: 700; color: #86198f;
  background: #fdf2fe; border: 1.5px dashed #e9bdf2;
}
.clx-again:active { transform: translateY(1px); }

/* ===================== 说明 / 吐司 ===================== */
.clx-note {
  margin-top: 14px; padding: 12px 14px; border-radius: 12px;
  background: #fbf7fd; border-left: 4px solid #d9468f;
  font-size: 12.5px; line-height: 1.7; color: #6d6272;
}
.clx-note b { color: #2b0a33; }
.clx-toast {
  position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%) translateY(8px);
  padding: 10px 18px; border-radius: 999px; font-size: 13px; font-weight: 600;
  color: #fff; background: rgba(43, 10, 51, .92);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
  z-index: 9999; max-width: 82vw; text-align: center;
}
.clx-toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ===================== 窄屏适配 ===================== */
@media (max-width: 360px) {
  .clx-md { padding: 11px 12px; }
  .clx-md-ico { width: 36px; height: 36px; font-size: 19px; }
}