/* ---- 打印纸张设置：A5、无页边距 ---- */
@page { size: A5; margin: 0; }

/* ---- 全局盒模型重置 ---- */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* ---- 全局字体：思源黑体优先 ---- */
html, body {
  font-family: "Source Han Sans CN", "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* ---- 编辑页背景：灰色衬底 + 上下留白 ---- */
body {
  padding: 0;
  margin: 0;
  background: #fff;
  overflow: hidden;
}

/* ============ 顶部工具栏（标题 + 导出按钮） ============ */
.toolbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 999;
  background: #fff;
  border-bottom: 1px solid #ddd;
  padding: 6px 12px;
  display: flex;
  gap: 8px;
  align-items: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
/* 工具栏左侧标题 */
.toolbar .tb-title {
  font-size: 10pt;
  font-weight: 700;
  color: #1f2d4a;
  margin-right: auto;
}
/* 工具栏按钮通用样式 */
.toolbar button {
  padding: 5px 14px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 9.5pt;
  font-weight: 600;
  transition: opacity 0.15s;
}
.toolbar button:hover { opacity: 0.85; }
/* 「一键导出 JPG + HTML」深蓝按钮 */
.btn-export { background: #1f2d4a; color: #fff; }
/* 「一键清除」灰色按钮 */
.btn-clear { background: #999; color: #fff; }
/* 「恢复上一个」按钮（无历史时半透明） */
.btn-restore { background: #e85a2c; color: #fff; opacity: 0.45; }
.btn-restore.has-data { opacity: 1; }
/* 工具栏提示小字 */
.toolbar .tb-hint { font-size: 8pt; color: #999; }
/* 输出目录状态标签 */
.toolbar .tb-dir {
  font-size: 8pt;
  color: #999;
  cursor: pointer;
  padding: 3px 8px;
  border: 1px dashed #ccc;
  border-radius: 3px;
  white-space: nowrap;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.toolbar .tb-dir.dir-set {
  color: #2da44e;
  border-color: #2da44e;
  background: rgba(45,164,78,0.06);
}

/* ============ A5 卡片画布（固定 148mm x 190mm，内容不会撑大） ============ */
.page {
  width: 148mm;
  height: 190mm;
  margin: 0 auto;
  background: #fff;
  padding: 0.7cm 1cm;   /* 上下 0.7cm，左右各 1cm，内容居中 */
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* 卡片上的斜纹背景装饰 */
.page::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(115deg,
    transparent 0 6mm,
    rgba(0,0,0,0.025) 6mm 6.05mm);
  pointer-events: none;
  z-index: 0;
}
/* 让卡片内容压在斜纹背景之上 */
.page > * { position: relative; z-index: 1; }

/* ============ 整页背景图（北京剪影，16% 透明度，铺满整张卡片） ============ */
.page-bg {
  position: absolute;   /* 覆盖 .page > * 的 relative，不影响文档流 */
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;    /* 裁切铺满整个页面 */
  z-index: 0;           /* 压在所有内容之下（内容层 z-index: 1） */
  pointer-events: none; /* 不拦截点击上传等交互 */
}

/* ============ 顶部横幅图（PSE 片面记录卡标题图） ============ */
.header-banner {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 3mm;
  flex-shrink: 0;
}

/* ============ 编号行（项目编号 左半 + 产品类型 右半，二分之一处起） ============ */
.meta-row {
  display: flex;
  gap: 0;                     /* 由 .meta-half 控制间距 */
  margin-bottom: 4mm;
  font-size: 8pt;
  color: #1f2d4a;
  align-items: center;
  flex-shrink: 0;
  z-index: 10;                /* 保证下拉列表能盖住下方内容 */
}
/* 左右各一半 */
.meta-half {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 2mm;
}
/* 右半区：产品类型组从中心线开始 */
.meta-half-right {
  padding-left: 2mm;
}
/* 标签文字 */
.meta-half label,
.meta-row label {
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
/* 输入框：30ch 宽，内部文字左对齐 */
.meta-input {
  flex: none;
  width: 30ch;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  border: 1px dashed #888;
  height: 7mm;
  border-radius: 1mm;
  padding: 0 1.5mm;
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0.6);
}
/* ============ 产品类型自定义下拉组件（虚线框透明背景） ============ */
.meta-select-wrap {
  position: relative;
  flex: none;
  width: 30ch;
}
.meta-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2mm;
  width: 100%;
  height: 7mm;
  background: rgba(255,255,255,0.6);
  color: #1f2d4a;
  border: 1px dashed #888;
  border-radius: 1mm;
  padding: 0 2mm 0 3mm;
  font-size: 8pt;
  font-family: inherit;
  cursor: pointer;
  user-select: none;
  outline: none;
  box-sizing: border-box;
}
.meta-select-value {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: left;
}
.meta-select-arrow {
  font-size: 7pt;
  flex: none;
  line-height: 1;
  color: #666;
}
.meta-select-wrap.open .meta-select {
  border-style: dashed;
  border-color: #555;
}
/* 下拉选项列表 */
.meta-select-options {
  position: absolute;
  top: calc(100% + 1mm);
  left: 0;
  width: 100%;
  background: #fff;
  border: 1px dashed #888;
  border-radius: 1mm;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
  list-style: none;
  margin: 0;
  padding: 1mm 0;
  display: none;
  z-index: 999;
}
.meta-select-wrap.open .meta-select-options {
  display: block;
}
.meta-select-options li {
  padding: 1.5mm 3mm;
  font-size: 8pt;
  color: #1f2d4a;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.meta-select-options li:hover {
  background: #f0f0f0;
  color: #1f2d4a;
}
.meta-select-options li.selected {
  background: #e0e0e0;
  color: #1f2d4a;
  font-weight: 600;
}
/* 导出静态化后无交互 */
.meta-select-wrap.static .meta-select {
  cursor: default;
}
.meta-select-wrap.static .meta-select-options {
  display: none !important;
}
/* 产品类型输入框（30ch 同宽） */
.meta-input-cn {
}

/* ============ 模型照片行（原模型 / 戴牙原模型 两个照片框） ============ */
.photo-row {
  display: flex;
  gap: 5mm;
  margin-bottom: 4mm;
  flex-shrink: 0;
}
/* 单个照片框（4:3，点击上传） */
.photo-card {
  flex: 1;
  aspect-ratio: 4 / 3;
  border: 1.5px dashed #888;
  border-radius: 2mm;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  background: #fafafa;
}
/* 照片框内的图片 */
.photo-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* 照片框未上传时的占位提示文字 */
.photo-card .placeholder {
  color: #bbb;
  font-size: 9pt;
}
/* 照片框底部的蓝色标签（原模型 / 戴牙原模型），文字上下左右居中 */
.photo-label {
  position: absolute;
  bottom: 2mm;                  /* 收回父框内，不伸出，避免被 overflow:hidden 裁切 */
  left: 50%;
  transform: translateX(-50%);
  background: #1f2d4a;
  color: #fff;
  padding: 1.5mm 6mm;            /* padding 撑开高度，flex 居中文字 */
  font-size: 9pt;
  border-radius: 1.5mm;
  white-space: nowrap;
  z-index: 3;                    /* 高于图片 z-index，确保不被遮挡 */
  display: inline-flex;          /* flex 居中不依赖 line-height，中文更稳 */
  align-items: center;
  justify-content: center;
  line-height: 1;                /* 配合 flex：line-height 设为 1 避免和 padding 叠加 */
  box-sizing: border-box;
}

/* ============ 底部大框（左：问题描述区，右：PSE 分享区） ============ */
/* flex:1 分配剩余空间，min-height:0 防止弹性溢出 */
.bottom-row {
  position: relative;
  border: 1.5px dashed #888;
  border-radius: 2mm;
  flex: 1;
  min-height: 0;
  padding: 2mm;
  display: flex;
  gap: 0;
  background: #fafafa;
}

/* ---- 左侧：问题描述区（两张问题截图） ---- */
.problem-area {
  flex: 1.5;
  min-height: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2mm;
  padding: 6mm 2mm 2mm 2mm;
}
/* 橙色「问题描述」标签：顶部顶住大框虚线，文字居中 */
.problem-tag {
  position: absolute;
  top: -2mm;
  left: 50%;
  transform: translateX(-50%);
  background: #e85a2c;
  color: #fff;
  height: 7mm;
  padding: 0 5mm;
  font-size: 9pt;
  border-radius: 0 0 1.5mm 1.5mm;
  font-weight: 600;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
/* 问题截图框（点击上传） */
.problem-img {
  flex: 1;
  min-height: 0;
  border: 1px dashed #aaa;
  border-radius: 1.5mm;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: #fff;
}
/* 问题截图框内的图片：裁切铺满整个框 */
.problem-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 问题截图框占位提示文字 */
.problem-img .placeholder {
  color: #ccc;
  font-size: 8pt;
}

/* ============ 图片移除按钮（上传后显示在图片框右上角） ============ */
.img-remove {
  position: absolute;
  top: 1mm;
  right: 1mm;
  width: 5mm;
  height: 5mm;
  border: none;
  border-radius: 50%;
  background: rgba(31,45,74,0.85);
  color: #fff;
  font-size: 8pt;
  line-height: 1;
  display: none;              /* 默认隐藏，有图时由 .has-img 显示 */
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
}
/* 图片框已上传图片 → 显示移除按钮 */
.has-img .img-remove {
  display: flex;
}
.img-remove:hover {
  background: #e85a2c;
}
/* 导出 JPG 截图瞬间：隐藏编辑辅助元素 + 装饰背景（避免干扰截图） */
.exporting .pse-counter,
.exporting .img-remove,
.exporting .page-bg {
  visibility: hidden;
}
/* 导出时去掉 ::before 斜纹装饰 */
.exporting::before {
  display: none !important;
}

/* ---- 中间：左右两区之间的虚线分隔 ---- */
.pse-divider {
  position: absolute;
  left: 60%;
  top: 4mm;
  bottom: 4mm;
  border-left: 1.5px dashed #888;
  z-index: 1;
}

/* ---- 右侧：PSE 分享区（标题 + 文字编辑框） ---- */
.pse-area {
  flex: 1;
  min-height: 0;
  position: relative;
  padding: 3mm 2mm 8mm 2mm;  /* 底部预留 8mm：避开右下角 logo，不遮挡文字 */
  display: flex;
  flex-direction: column;
}
/* 「PSE分享：」标题 */
.pse-title {
  color: #1f2d4a;
  font-size: 13pt;
  font-weight: 900;
  margin-bottom: 2mm;
  padding-left: 1mm;
  flex-shrink: 0;
}
/* PSE 文字编辑框（可输入，字号自适应） */
.pse-box {
  flex: 1;
  min-height: 0;
  font-size: 14pt;
  line-height: 1.6;
  color: #1f2d4a;
  outline: none;
  overflow: hidden;
  white-space: pre-wrap;
  word-break: break-word;
}
/* 编辑框内粘贴进来的子元素统一继承字号行高 */
.pse-box * {
  font-size: inherit !important;
  line-height: inherit !important;
}
/* 编辑框为空时的占位提示文字 */
.pse-box:empty::before {
  content: '在此输入 PSE 分享内容...';
  color: #ccc;
}

/* ============ 右下角义佳 logo ============ */
.footer-logo {
  position: absolute;
  right: 5mm;
  bottom: 3mm;
  width: 18mm;
  height: auto;
  object-fit: contain;
  z-index: 2;
}

/* ============ PSE 字数计数提示（输入框左下角，与 logo 同一行） ============ */
.pse-counter {
  position: absolute;
  left: 2mm;
  bottom: 1mm;
  font-size: 7pt;
  color: #999;
  z-index: 2;
}
/* 写满时变为橙色提醒 */
.pse-counter.full {
  color: #e85a2c;
  font-weight: 600;
}

/* ============ 打印样式：隐藏工具栏、去背景与阴影 ============ */
@media print {
  .toolbar { display: none; }
  body { background: #fff; padding: 0; }
  .page {
    box-shadow: none;
    height: 190mm;
    padding: 0.7cm 1cm;
    width: 148mm;
    display: flex;
    flex-direction: column;
  }
}


/* 导出页：白底、固定 A5 尺寸，不做屏幕自适应 */
body { padding: 0; margin: 0; background: #fff; }
html { overflow: hidden; }
/* 导出页：去掉卡片阴影 */
.page { box-shadow: none; }
/* 导出页：空 PSE 框不显示占位提示文字 */
.pse-box:empty::before { content: none; }
/* 导出页：图片框不再显示手型光标 */
.photo-card, .problem-img { cursor: default; }
/* 导出页：隐藏字数计数提示与图片移除按钮（编辑辅助信息不进正式卡片） */
.pse-counter, .img-remove { display: none; }