/* 三工坊统一版式 — 2026-09-10
   只做覆盖层，不改动 styles.css
   绘图=留白剧场 / 电商=货架网格 / 像素=点阵 */

:root {
  --ws-input: 400px;
  --ws-gap: 20px;
}

/* ── 1. 栅格统一：输入栏统一 400，gap 统一 20 ───────────── */
.generator-grid,
.pixel-layout {
  grid-template-columns: var(--ws-input) minmax(0, 1fr);
  gap: var(--ws-gap);
}
.ecommerce-layout {
  grid-template-columns: var(--ws-input) minmax(300px, 340px) minmax(0, 1fr);
  gap: var(--ws-gap);
}

/* ── 2. 记录区统一到「结果下方」横向条 ─────────────────
   原先绘图是右侧竖条、像素是下方横条，方向不一致 */
.result-content-layout {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 14px;
}
.recent-records-panel {
  max-height: 176px;
  border-radius: 18px;
}
.asset-strip {
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  grid-auto-rows: 104px;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 10px;
  padding-right: 4px;
}
.asset-strip .record-card { height: 104px; min-height: 104px; }

/* ── 3. 去装饰：页标题不再渐变流光 ─────────────────────── */
.view-header h2 {
  background: none !important;
  -webkit-text-fill-color: var(--text-bright) !important;
  animation: none !important;
  color: var(--text-bright);
}

/* ── 4. 母题分化（同主色，靠形态区分） ─────────────────── */
/* 绘图工坊：留白剧场 —— 纯色底，去掉点阵与光晕 */
.result-preview { background-image: none; }
.result-preview::before { display: none; }

/* 像素工坊：点阵母题 —— 收紧棋盘格，强化身份辨识 */
.pixel-result-preview {
  background-size: 24px 24px;
  background-position: 0 0, 12px 12px;
}
.pixel-record-grid {
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  max-height: 220px;
}

/* 电商工坊：货架网格 —— 结果区规整网格 */
.ecommerce-result-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

/* ── 5. 响应式：断点统一到 1200 / 900 ───────────────────
   原样式里电商像素 1200 塌、绘图 1100 才塌，不一致 */
@media (max-width: 1200px) {
  .generator-grid,
  .ecommerce-layout,
  .pixel-layout {
    grid-template-columns: 1fr;
    height: auto;
    overflow: visible;
  }
  .result-content-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }
  .recent-records-panel { max-height: 240px; }
}
@media (max-width: 900px) {
  .view-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .result-preview,
  .pixel-result-preview { min-height: 320px; }
  .ecommerce-result-grid { grid-template-columns: 1fr; }
  .asset-strip {
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    grid-auto-rows: 92px;
  }
  .asset-strip .record-card { height: 92px; min-height: 92px; }
}