/* ============================================================
   Customize — 底图上直接编辑（v3）
   结构：照片层（底） → 底图 PNG（上，照片区已挖空透明） → 文字层（最上）
   坐标：全部用 % （相对底图外框）；字号全部用 cqw（= 舞台宽度的 %）
        舞台是正方形，所以 cqw 也等于高度的 % → 移动端等比缩放不用改任何数字。
   ⚠️ cqw 需要 container-type，见 .cu-stage。旧版用 vw，容器封顶后必然失真，别再改回去。
   坐标来源：底图透明挖空区用 GD 扫描实测；文字外接矩形由视觉模型读最终效果图得出。
   ============================================================ */

:root {
  /* 文字配色（取自最终效果图） */
  --cu-gold: #F9DFA6;   /* First Name 花体 */
  --cu-ink:  #F8F6F1;   /* 其余文字 */
}

/* ---------- 布局 ---------- */
.cu-flow { padding: 16px; }

.cu-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

/* 定制项工具栏（舞台外，不占底图版面）：Symbol Style（左）+ Suggested Messages（右）并列 */
.cu-bar {
  width: 100%;
  max-width: 1000px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.cu-bar__group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cu-bar__label {
  color: #8a8378;
  font-size: 12px;
  letter-spacing: .02em;
}
.cu-preset {
  appearance: none;
  -webkit-appearance: none;
  max-width: 62vw;
  padding: 6px 10px;
  background: #fbf8f1;
  border: 1px solid rgba(212, 175, 55, .45);
  color: #6b5d49;
  font-size: 12px;
  cursor: pointer;
  width:200px
}

/* ---------- 舞台 ---------- */
.cu-stage {
  position: relative;
  width: 100%;
  max-width: 1000px;          /* = 底图原生尺寸，永不放大 */
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  container-type: inline-size; /* 让 cqw = 舞台宽度的 1% */
  /* 不加 border-radius：底图 PNG 自带成品边角，CSS 再圆一次同样是「叠加工艺」。
     overflow 只作为安全网，防止拖动时照片溢出舞台。 */
  overflow: hidden;
  user-select: none;
  touch-action: manipulation;
}

/* 底图：盖在照片上面，照片从挖空处透出。pointer-events 关掉，
   否则事件会被它吃掉、下层照片窗口收不到拖拽/点击。 */
.cu-base {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* ---------- ②½ 符号层（Symbol Style）---------- */
/* 透明 PNG 装饰，叠在底图之上、文字层之下（z-index 同底图、DOM 在其后 → 显示在上）。
   只读展示、不可交互；位置按款在下方分款规则里定。 */
.cu-symbol {
  position: absolute;
  z-index: 2;
  height: auto;
  pointer-events: none;
  -webkit-user-drag: none;
}
.cu-symbol[hidden] { display: none; }

/* ---------- ① 照片窗口（最底层） ---------- */
/* ⚠️ 这里**绝不做 CSS 裁切**（不加 overflow:hidden，也不加 border-radius）。
   底图 PNG 已自带「挖空 + alpha 羽化」，CSS 再裁一次 = 在羽化环处把照片切掉，
   羽化环就只能和舞台背景混合 → 出现一圈暗边，非常不自然。
   照片的遮罩**全部**由 PNG 的 alpha 完成。
   照片容器按「全透明核心」定位，再用负 inset 外扩，盖住整条羽化带（见下方分款规则）。 */
.cu-photo-slot {
  position: absolute;
  z-index: 1;
  cursor: pointer;
  touch-action: none;
}
.cu-photo-slot.is-draggable { cursor: grab; }
.cu-photo-slot.is-dragging  { cursor: grabbing; }

/* 照片容器与默认占位图共用同一条外扩规则（--photo-inset 按款设定，见下方）：
   两者都必须盖住整条羽化带，否则羽化环下面没有内容、就会露出舞台背景。 */
.cu-photo,
.cu-photo-default {
  position: absolute;
  inset: var(--photo-inset, 0);
}

.cu-photo img,
.cu-photo-default {
  height: 100%;
  width:auto;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}
.cu-photo img {
  position: absolute;
  left: 0; top: 0;
  transform-origin: center center;
}

/* 还没传照片时显示这张默认图（纯白底 + "Your Image"）。
   不用任何 CSS 底色/边框/提示字 —— 空态显示什么完全由这张图决定。 */
.cu-photo-default[hidden] { display: none; }

/* ---------- 上传中遮罩（照片窗口内，手机用户可见的上传反馈） ---------- */
.cu-uploading {
  position: absolute;
  inset: 0;
  z-index: 5;                       /* 盖住照片 / 占位图 */
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .45);   /* 半透明深色遮罩 */
  pointer-events: none;             /* 只是视觉层，交互拦截交给 JS 的 uploading 标志 */
}
.cu-uploading[hidden] { display: none; }

.cu-spinner {
  width: 38px;
  height: 38px;
  border: 3px solid rgba(249, 223, 166, .35);   /* 金色底圈（半透明） */
  border-top-color: var(--cu-gold);             /* 转圈高亮 = 品牌金 */
  border-radius: 50%;
  animation: cu-spin .8s linear infinite;
}
@keyframes cu-spin {
  to { transform: rotate(360deg); }
}

/* ---------- ③ 文字层（最上层） ---------- */
.cu-text-group {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;       /* 只有具体输入框可交互，避免挡住所下层的照片窗口 */
}

.cu-input {
  position: absolute;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 1px dashed rgba(255, 255, 255, .3);
  border-radius: 3px;
  outline: none;
  color: var(--cu-ink);
  text-align: center;
  line-height: 1;
  pointer-events: auto;
  transition: border-color .2s, background .2s;
  /* 纵向定位见下方分款规则：top = calc(文字块中心% − 0.5em) */
}
.cu-input::placeholder { color: rgba(255, 255, 255, .3); }
/* 填了内容就把虚线框收掉 → 预览干净、更接近成品；聚焦时再显形 */
.cu-input:not(:placeholder-shown) { border-color: transparent; }
.cu-input:focus {
  border-style: solid;
  border-color: rgba(247, 217, 154, .75);
  background: rgba(0, 0, 0, .2);
}
.cu-input-year::-webkit-outer-spin-button,
.cu-input-year::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* 字体：First 花体 / Last 粗衬线 / 思念语斜体衬线 */
.cu-input-first {
  font-family: "Great Vibes", "Brush Script MT", "Apple Chancery", cursive;
  color: var(--cu-gold);
}
.cu-input-last {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-weight: 800;
  letter-spacing: .5px;
}
.cu-input-message {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  resize: none;          /* textarea：去掉右下角拖拽角 */
  overflow: hidden;      /* 内容不溢出 */
  line-height: 1.3;      /* 两行需要点行高（覆盖 .cu-input 的 line-height:1） */
  height: 2.6em;         /* 固定 2 行高，超长由 refit 缩字号 */
  min-height: 0;         /* 覆盖浏览器对 textarea 的默认最小高度 */
  max-height: 2.6em;
}
.cu-input-year {
  position: static;
  width: 2.5em;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 400;
  border: 0;                  /* 年份在 dates 容器里，不要各自描边 */
  text-align: center;
}
.cu-input-year:focus { background: rgba(0, 0, 0, .2); }

/* 年份容器 */
.cu-dates {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .03em;
}
.cu-year-sep {
  color: var(--cu-ink);
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 400;
  line-height: 1;
}

/* ============================================================
   心形 shape=1（底图 hartbk.png 1000×1000）—— CMP-001 / CMP-002 通用
   挖空区实测：全透明核心 x 53.2~90.7 / y 10.1~47.6（圆形）；
               羽化带 46px ≈ 4.6%（向外渐变到不透明）
   → 照片容器 = 核心框；--photo-inset 外扩盖住羽化带
   （4.6% ÷ 37.6% ≈ 12.3%，取 13.3% 留约 1% 余量防舍入露边）
   文字位置 = 视觉模型读最终效果图得到的外接矩形
   ============================================================ */
.cu-stage[data-shape="1"] {
  --photo-inset: -13.3%;
}
.cu-stage[data-shape="1"] .cu-photo-slot {
  left: 58%;
  top: 18%;
  width: 37.6%;
  height: 37.6%;
}
/* 符号：对齐原底图左上角装饰位，位于思念语上方（初值，待视觉微调） */
.cu-stage[data-shape="1"] .cu-symbol {
  left: 22%;
  top: 8%;
  width: 17%;
}

.cu-stage[data-shape="1"] .cu-input-message {
  left: 9.0%; width: 40.0%;
  top: calc(29.05% - 6cqw);
  font-size: 4.2cqw;
}
.cu-stage[data-shape="1"] .cu-input-first {
  left: 10%; width: 39.1%;
  top: calc(45% - 8cqw);
  font-size: 9cqw;
}
.cu-stage[data-shape="1"] .cu-input-last {
  left: 15%; width: 35%;
  top: calc(54% - 5cqw - 0.5em);
  font-size: 5.3cqw;
}
.cu-stage[data-shape="1"] .cu-dates {
  left: 22%; width: 23.1%;
  top: calc(60% - 5cqw);
  font-size: 3.4cqw;
}

/* ============================================================
   方形 shape=2（底图 squarebk.png 1000×1000）—— CMP-001 / CMP-002 通用
   挖空区实测：全透明核心 x 15.3~85.1 / y 12.4~44.7（横矩形 2.16:1）；
               羽化带 79px ≈ 7.9%（四边等宽）
   → .cu-photo 负 inset 按各自方向换算：上下 7.9/32.4≈24.4%，左右 7.9/69.9≈11.3%
   注意：思念语在这一款是**最下面**一行（与心形那张的顺序相反）
   ============================================================ */
.cu-stage[data-shape="2"] {
  --photo-inset: 0% 25%;
}
.cu-stage[data-shape="2"] .cu-photo-slot {
  left: 15.3%;
  top: 18%;
  width: 69.9%;
  height: 32.4%;
}
/* 符号：二维码正上方、与二维码水平居中对齐（二维码实测 x66.7~83.3 y67.6~81.9，中心 75%；
   底边 63% 离码顶 4.6%，上离照片挖空区底 44.8% 约 3%，初值待微调） */
.cu-stage[data-shape="2"] .cu-symbol {
  left: 63.5%;
  top: 49%;
  width: 15%;
}

.cu-stage[data-shape="2"] .cu-input-first {
  left: 10%; width:40%;
  top: calc(55%);
  font-size: 8cqw;
}
.cu-stage[data-shape="2"] .cu-input-last {
  left: 10%; width: 50%;
  top: calc(62%);
  font-size: 5cqw;
}
.cu-stage[data-shape="2"] .cu-dates {
  left: 28%; width: 17.6%;
  top: calc(71%);
  font-size: 4cqw;
}
.cu-stage[data-shape="2"] .cu-input-message {
  left: 15%; width: 45%;
  top: calc(77.5% );
  font-size:3cqw;
}

/* ---------- 底部 ---------- */
.cu-foot {
  width: 100%;
  max-width: 1000px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.cu-note {
  margin: 0;
  color: #7a7a7a;
  font-size: 13px;
  line-height: 1.5;
}
.cu-submit {
  width: 100%;
  max-width: 320px;
  padding: 14px 24px;
  font-size: 16px;
}
.cu-back {
  color: #8a6d3b;
  font-size: 13px;
  text-decoration: underline;
}

/* ---------- 移动端 ---------- */
@media (max-width: 760px) {
  .cu-flow { padding: 10px; }
  .cu-bar { justify-content: center; }
  .cu-bar__group { flex-wrap: wrap; justify-content: center; }
  .cu-preset { max-width: 100%; }
}