/* 预览 / 导出：独立页与首页挂载共用 */

.preview-page {
  height: 100%;
  display: flex;
  flex-direction: column;
  /* 用 stretch，避免子列居中后宽图左右对称溢出、横向滚不到最左 */
  align-items: stretch;
  justify-content: flex-start;
  overflow: auto;
  width: 100%;
}

/* 内容偏少时垂直居中；超出时 margin 失效，从顶部排布 */
.preview-page .preview-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin-top: auto;
  margin-bottom: auto;
}

.preview-page #preview-container {
  width: 160px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  background-color: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  position: relative;
  margin-inline: auto;
}

.preview-page svg {
  width: 100%;
  height: 100%;
  fill: var(--writer-stroke);
}

.preview-page img {
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
  position: relative;
  z-index: 1;
}

/* 导出：叠加格线预览，不写入导出文件 */
.preview-page.is-export .preview-grid-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: grid;
  grid-template-columns: repeat(var(--preview-cols, 1), var(--preview-cell, 160px));
  grid-template-rows: repeat(var(--preview-rows, 1), var(--preview-cell, 160px));
  gap: var(--preview-gap, 8px);
  z-index: 2;
}

.preview-page.is-export .preview-grid-overlay > div {
  box-sizing: border-box;
  border: 1px solid var(--border-color);
  border-radius: 8px;
}

.preview-page .export-controls {
  margin-top: 20px;
  align-self: stretch;
  width: 100%;
  box-sizing: border-box;
  font-size: var(--ui-font-size);
  color: var(--writer-stroke);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.preview-page .export-options {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}

.preview-page .export-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.preview-page .export-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.preview-page .export-group > span {
  display: inline-flex;
  align-items: center;
  line-height: 1.2;
  font-size: var(--ui-font-size);
}

.preview-page .export-group > select {
  align-self: center;
  line-height: 1.2;
  font-size: var(--ui-font-size);
  border-color: var(--input-border) !important;
  outline: none;
  box-shadow: none;
}

.preview-page .export-group > select:focus,
.preview-page .export-group > select:focus-visible,
.preview-page .export-group > select:active {
  border-color: var(--input-border) !important;
  outline: none;
  box-shadow: none;
}

.preview-page .preview-inline-msg {
  margin: 0;
  font-size: var(--ui-font-size);
  line-height: 1.4;
}

.preview-page .preview-inline-msg--muted {
  color: color-mix(in srgb, var(--text-color) 55%, transparent);
}

.preview-page .preview-inline-msg--danger {
  color: var(--danger);
}

.preview-page:not(.is-export) .export-controls {
  display: none;
}