/* 宫格图导出容器样式:收藏页与聊天页表格下载共用(配套 static/js/grid-image-core.js)。
   严格 hex/rgb,不能用 css var/color-mix —— html2canvas 栅格化时不认这些函数。 */
.gridimg {
  width: 720px; background: #eef3fa;
  padding: 28px 22px 40px; border-radius: 10px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #1a1a1f;
  box-shadow: 0 4px 16px rgba(15,15,25,.08);
}
.gridimg-head {
  display: flex; align-items: center; gap: 16px; padding: 4px 6px 22px;
}
.gridimg-head .logo {
  font-weight: 700; font-size: .95rem; color: #ff7a18; letter-spacing: .5px;
  line-height: 1.15; white-space: nowrap;
}
.gridimg-head .logo .sub { display: block; font-size: .7rem; color: #8a8a93; letter-spacing: 2px; }
.gridimg-head .title-row {
  flex: 1; display: flex; align-items: center; gap: 10px; justify-content: center; min-width: 0;
}
.gridimg-head .title-row .dash {
  flex: 0 0 28px; height: 1px; background: #c8cbd2;
}
.gridimg-head .title-row .title {
  font-size: 1.45rem; font-weight: 800; color: #1a1a1f; letter-spacing: 1px; white-space: nowrap;
}
.gridimg-grid {
  display: grid; gap: 14px;
}
.gridimg-cell {
  background: #ffffff; border-radius: 10px; padding: 14px 12px 16px;
  display: flex; flex-direction: column; gap: 8px;
  box-shadow: 0 1px 2px rgba(15,15,25,.04);
}
.gridimg-fig {
  width: 100%; aspect-ratio: 1/1; background: #ffffff;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.gridimg-fig img { max-width: 100%; max-height: 100%; object-fit: contain; }
.gridimg-fig .noimg { color: #b3b6bf; font-size: .8rem; }
.gridimg-name {
  font-size: .92rem; font-weight: 600; color: #1a1a1f;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gridimg-id {
  font-size: .74rem; color: #9a9aa6; letter-spacing: .3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gridimg-cat {
  font-size: .76rem; color: #6b6b78;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gridimg-price {
  font-size: 1.02rem; font-weight: 700; color: #e5484d; margin-top: 2px;
}
.gridimg-foot {
  margin-top: 22px; padding-top: 14px; text-align: center;
  font-size: .72rem; color: #8a8a93; letter-spacing: 1px;
}

@media (max-width: 860px) {
  .gridimg { width: 100%; max-width: 540px; }
}