/* ============================================================================
 * 绘画MAX（文生图 + 图生图 合并）· 样式（2026-09-21 · 开发员12号）
 * ----------------------------------------------------------------------------
 * 用户需求：
 *   「文生图MAX + 图生图MAX 这俩功能合二为一，取新名字：绘画MAX；
 *     参考这三张图（文生图 / 图生图 / 生成历史），增加尺寸 1:1、2:3、3:2、9:16、16:9」
 *
 * 结构：一个子页 + 顶部三 tab（文生图 / 图生图 / 生成历史）
 *   · 前两个 panel 里装的**就是原来两个子页的 DOM**（元素 ID 一字未改）→ app.js 的
 *     既有逻辑（bindCounter / bindPaste / bindOptimize / sizeValue / 生成按钮…）**零改动**照常工作。
 *     这是本次合并最关键的一个决定：**只搬外壳，不碰逻辑**。
 *   · 第三个 panel（生成历史）由 public/paintmax.js 渲染，数据取已有的
 *     `/api/my/generations`（服务端 24 小时保留，与参考图里的提示一致）。
 *
 * 🎨 配色取舍：参考图那套是紫色主题，但站内主色是品牌橙（项目铁律：品牌色是底线），
 *    所以这里**沿用品牌橙**，只借参考图的**布局与结构**（顶部胶囊 tab / 卡片式历史）。
 *
 * 🔴 类名前缀 `pm-` 全局唯一（写前已 grep 确认未占用）；
 *    含 absolute 装饰物的容器一律 position:relative（老坑：会撑宽文档 → 手机端整页缩水）。
 * ========================================================================== */

/* ============================ 顶部三 tab ================================= */
#sub-paintmax .pm-tabs {
  position: relative;                     /* 内含 absolute 的滑动指示条 */
  display: flex; gap: 4px;
  padding: 4px;
  margin: 10px 0 12px;
  border-radius: 14px;
  background: #f2ece5;                    /* 站内暖灰底，胶囊内嵌感 */
}
#sub-paintmax .pm-tab {
  flex: 1 1 0;
  padding: 10px 4px;
  border: 0; border-radius: 11px;
  background: transparent;
  font-size: 13.5px; font-weight: 700; color: var(--text2, #7a6a5c);
  cursor: pointer;
  transition: background .16s, color .16s, box-shadow .16s;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}
#sub-paintmax .pm-tab.on {
  background: #fff;
  color: var(--primary, #f95901);
  box-shadow: 0 2px 8px rgba(120, 80, 40, .12);
}
#sub-paintmax .pm-tab-ico { margin-right: 3px; }

/* ============================ panel 切换 ================================= */
#sub-paintmax .pm-panel { display: none; }
#sub-paintmax .pm-panel.on { display: block; }
/* 🔴 display:block 会盖掉 [hidden]，每个 panel 各补一条兜底（老坑） */
#sub-paintmax .pm-panel [hidden] { display: none !important; }

/* ============================ 生成历史 =================================== */
#sub-paintmax .pm-hist-stats {
  display: flex; align-items: center;
  padding: 14px 0 12px;
  margin-bottom: 12px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(120, 80, 40, .07);
}
#sub-paintmax .pm-hist-stat { flex: 1 1 0; text-align: center; position: relative; }
#sub-paintmax .pm-hist-stat + .pm-hist-stat::before {
  content: ''; position: absolute; left: 0; top: 12%; bottom: 12%;
  width: 1px; background: var(--line, #ece0d3);
}
#sub-paintmax .pm-hist-num {
  font-size: 21px; font-weight: 800; line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--primary, #f95901);
}
#sub-paintmax .pm-hist-num.zero { color: var(--text2, #7a6a5c); }
#sub-paintmax .pm-hist-lbl { margin-top: 3px; font-size: 11.5px; color: var(--text2, #7a6a5c); }

#sub-paintmax .pm-hist-tip {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 12px; margin-bottom: 12px;
  border-radius: 11px;
  background: #fff7ed; border: 1px solid #fed7aa;
  font-size: 11.5px; line-height: 1.5; color: #9a3412;
}

#sub-paintmax .pm-hist-list { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 560px) { #sub-paintmax .pm-hist-list { grid-template-columns: 1fr 1fr; } }

#sub-paintmax .pm-hist-card {
  position: relative;
  border-radius: 15px; overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 8px rgba(120, 80, 40, .09);
}
#sub-paintmax .pm-hist-thumb {
  position: relative;
  width: 100%; aspect-ratio: 1 / 1;
  background: #f3efe9;
  display: flex; align-items: center; justify-content: center;
}
#sub-paintmax .pm-hist-thumb img,
#sub-paintmax .pm-hist-thumb video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
#sub-paintmax .pm-hist-badge {
  position: absolute; top: 8px; left: 8px;
  display: flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(20, 130, 90, .9); color: #fff;
  font-size: 10.5px; font-weight: 700;
  backdrop-filter: blur(3px);
}
#sub-paintmax .pm-hist-badge.run { background: rgba(217, 119, 6, .92); }
#sub-paintmax .pm-hist-badge.fail { background: rgba(185, 60, 50, .92); }
#sub-paintmax .pm-hist-kind {
  position: absolute; top: 8px; right: 8px;
  display: flex; align-items: center; justify-content: center;
  min-width: 26px; height: 26px; padding: 0 7px; border-radius: 999px;
  background: var(--primary, #f95901); color: #fff;
  font-size: 11.5px; font-weight: 800;
  box-shadow: 0 2px 7px rgba(0, 0, 0, .18);
}
#sub-paintmax .pm-hist-body { padding: 10px 11px 12px; }
#sub-paintmax .pm-hist-title {
  font-size: 12.5px; font-weight: 800; color: var(--text, #2b2119);
  line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
#sub-paintmax .pm-hist-sub { display: none; }
#sub-paintmax .pm-hist-time {
  margin-top: 6px; font-size: 11px; color: var(--text2, #7a6a5c);
  font-variant-numeric: tabular-nums;
}
#sub-paintmax .pm-hist-ops { display: flex; gap: 7px; margin-top: 10px; }
#sub-paintmax .pm-hist-ops button {
  flex: 1 1 0; padding: 8px 0;
  border-radius: 10px; border: 1.4px solid var(--line, #ece0d3);
  background: #fff; color: var(--text2, #7a6a5c);
  font-size: 12px; font-weight: 700; cursor: pointer;
}
#sub-paintmax .pm-hist-ops button.pri {
  border-color: transparent;
  background: var(--primary, #f95901); color: #fff;
}
#sub-paintmax .pm-hist-ops button:disabled { opacity: .5; }

/* 空态 / 加载态 */
#sub-paintmax .pm-hist-empty {
  padding: 40px 16px; text-align: center;
  border-radius: 15px; background: #fff;
  box-shadow: 0 1px 3px rgba(120, 80, 40, .06);
}
#sub-paintmax .pm-hist-empty .ico { font-size: 34px; line-height: 1; }
#sub-paintmax .pm-hist-empty .t { margin-top: 10px; font-size: 14px; font-weight: 800; color: var(--text, #2b2119); }
#sub-paintmax .pm-hist-empty .s { margin-top: 6px; font-size: 12px; line-height: 1.6; color: var(--text2, #7a6a5c); }
#sub-paintmax .pm-hist-loading { padding: 34px 0; text-align: center; font-size: 12.5px; color: var(--text2, #7a6a5c); }

/* ============================ 窄屏 ====================================== */
@media (max-width: 400px) {
  #sub-paintmax .pm-tab { font-size: 12.5px; padding: 9px 2px; }
  #sub-paintmax .pm-tab-ico { display: none; }   /* 极窄屏藏图标，保文字不换行 */
  #sub-paintmax .pm-hist-num { font-size: 19px; }
}