/**
 * 命盘 view 样式（PR-6 改版：渲染 fortune-service 出图 PNG）
 *
 * fortune-service 输出 1040×1600 PNG，含 12 宫 + 36+ 颗星 + 中庭信息。
 * webapp 仅负责按窗口宽度等比缩放显示，不做任何前端排版。
 *
 * 视觉与 flying-star.css 米色调一致。
 */

.mp-page {
  max-width: 480px;
  margin: 0 auto;
  padding: 16px;
  padding-bottom: 80px;
  background: #faf3e3;
  min-height: 100vh;
  min-height: 100dvh;
  color: #3a2e1f;
  font-family: var(--onboard-font-sans, -apple-system, "PingFang SC", sans-serif);
}

.mp-topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0 14px;
}
.mp-back {
  background: transparent;
  border: 0;
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
  font-family: inherit;
  color: #3a2e1f;
}
.mp-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.mp-image-wrap {
  background: #fff;
  border: 1px solid #e3d4ae;
  border-radius: 14px;
  padding: 8px;
  overflow: hidden;
}
.mp-image {
  display: block;
  width: 100%;
  height: auto;
  /* 1040×1600 原图 → 等比；宽 100% 即可，aspect-ratio 让 loading 占位高度稳定 */
  aspect-ratio: 1040 / 1600;
  object-fit: contain;
  background: #fff;
}

.mp-loading,
.mp-error,
.mp-empty {
  text-align: center;
  padding: 48px 12px;
  color: #8b7a55;
  font-size: 13px;
}
.mp-loading {
  /* 留出图片大致高度，避免 loading→render 时 layout 跳动 */
  min-height: 60vh;
}
.mp-error { color: #c84e3c; }