/* =====================================================
   制作编辑器样式
   ===================================================== */
.editor-page { background: #faf5ee; }

.ed-header {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 28px; background: #fff; border-bottom: 1px solid #f0e4d8;
}
.ed-header-right { display: flex; align-items: center; gap: 16px; }
.save-state { font-size: 13px; color: #b03a2e; }
.link-admin { font-size: 14px; color: #777; }
.link-admin:hover { color: #b03a2e; }

.ed-main { max-width: 860px; margin: 0 auto; padding: 26px 16px 120px; }

.panel {
  background: #fff; border-radius: 16px; padding: 26px 28px; margin-bottom: 20px;
  box-shadow: 0 6px 20px rgba(0,0,0,.05);
}
.panel h3 {
  font-size: 18px; color: #5c3a1e; margin-bottom: 18px;
  display: flex; align-items: center; gap: 10px;
}
.pn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, #b03a2e, #d9a441); color: #fff; font-size: 14px;
}
.hint { font-size: 12px; color: #999; font-weight: 400; }

.panel label { display: block; font-size: 14px; color: #555; margin-bottom: 14px; }
.panel label input, .panel label textarea {
  display: block; width: 100%; margin-top: 6px;
  padding: 10px 12px; font-size: 15px; font-family: inherit;
  border: 1px solid #e3d6c6; border-radius: 10px; outline: none; transition: border .2s;
  background: #fffdf9;
}
.panel label input:focus, .panel label textarea:focus { border-color: #b03a2e; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ---------------- 主题 / 特效选择 ---------------- */
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.pick-card {
  border: 2px solid #eee; border-radius: 14px; padding: 16px 12px;
  text-align: center; cursor: pointer; transition: all .2s; background: #fff;
  display: flex; flex-direction: column; gap: 6px; align-items: center;
}
.pick-card b { font-size: 14px; color: #444; }
.pick-card small { font-size: 12px; color: #999; }
.pick-card:hover { border-color: #d9a441; transform: translateY(-2px); }
.pick-card.active { border-color: #b03a2e; background: #fff6ee; box-shadow: 0 4px 14px rgba(176,58,46,.15); }
.pick-card.active b { color: #b03a2e; }

.swatch { width: 44px; height: 44px; border-radius: 50%; display: block; box-shadow: inset 0 0 0 2px rgba(255,255,255,.6); }
.sw-red    { background: linear-gradient(135deg, #b03a2e, #d9a441); }
.sw-pink   { background: linear-gradient(135deg, #d96b8f, #f0a5bd); }
.sw-green  { background: linear-gradient(135deg, #4f7a52, #9dbd79); }
.sw-purple { background: linear-gradient(135deg, #7a54a3, #c3a1e0); }
.sw-blue   { background: linear-gradient(135deg, #1f2b3a, #9fb8d8); }
.sw-white  { background: linear-gradient(135deg, #fff, #ddd); border: 1px solid #ccc; }
.sw-amber     { background: linear-gradient(135deg, #b0652d, #e0a458); }
.sw-lake      { background: linear-gradient(135deg, #3f7d8c, #9cc9d4); }
.sw-peach     { background: linear-gradient(135deg, #e07a5f, #f4ac8f); }
.sw-champagne { background: linear-gradient(135deg, #a8843c, #dcc084); }

.fx-ico { font-size: 30px; line-height: 1; color: #b03a2e; }

/* ---------------- 版式模板图标 ---------------- */
.tp-ico {
  width: 52px; height: 40px; border-radius: 6px; display: block;
  border: 2px solid #e0c9a8; background: #fffdf9; position: relative;
}
.tp-ico::before, .tp-ico::after {
  content: ''; position: absolute; left: 7px; right: 7px;
  background: #d9a441; border-radius: 2px;
}
.tp-ico::before { top: 6px; height: 6px; }
.tp-ico::after  { bottom: 6px; height: 12px; opacity: .55; }
.tp-album::before { top: 6px; height: 16px; opacity: .8; }
.tp-album::after  { bottom: 6px; height: 5px; opacity: .45; }
.tp-minimal::before { top: 8px; height: 3px; opacity: .7; }
.tp-minimal::after  { bottom: 8px; height: 3px; opacity: .35; }
.pick-card.active .tp-ico { border-color: #b03a2e; }
.pick-card.active .tp-ico::before, .pick-card.active .tp-ico::after { background: #b03a2e; }

/* ---------------- 音乐选择 ---------------- */
.music-list { display: flex; flex-direction: column; gap: 10px; }
.music-item {
  display: flex; align-items: center; gap: 12px;
  border: 2px solid #eee; border-radius: 12px; padding: 12px 16px;
  cursor: pointer; transition: all .2s; font-size: 15px; color: #444;
}
.music-item input { display: none; }
.music-item:hover { border-color: #d9a441; }
.music-item.active { border-color: #b03a2e; background: #fff6ee; color: #b03a2e; }
.music-play { width: 34px; height: 34px; border-radius: 50%; background: #f2e6d8; display: flex; align-items: center; justify-content: center; font-size: 13px; }
.music-item.active .music-play { background: #b03a2e; color: #fff; }
.music-tag {
  font-style: normal; font-size: 11px; color: #2e7d32;
  background: #e8f5e9; border-radius: 10px; padding: 2px 8px; margin-left: auto;
}

/* ---------------- 照片上传 ---------------- */
.dropzone {
  border: 2px dashed #d9a441; border-radius: 14px; padding: 34px 20px;
  text-align: center; cursor: pointer; transition: all .25s; background: #fffdf9;
}
.dropzone:hover, .dropzone.dragover { background: #fff6ee; border-color: #b03a2e; }
.dz-main { font-size: 36px; color: #d9a441; line-height: 1; margin-bottom: 8px; }
.dz-tip { font-size: 14px; color: #999; }

.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; margin-top: 16px; }
.photo-item { position: relative; border-radius: 12px; overflow: hidden; background: #f5ece2; cursor: grab; }
.photo-item img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; }
.photo-item.dragging { opacity: .5; }
.photo-item.drag-over { outline: 3px dashed #d9a441; }
.photo-ops {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 6px;
  padding: 6px 0; background: linear-gradient(transparent, rgba(0,0,0,.55));
}
.photo-move, .photo-del {
  width: 26px; height: 26px; border: none; border-radius: 50%;
  background: rgba(0,0,0,.6); color: #fff; font-size: 15px; cursor: pointer; line-height: 1;
}
.photo-del { position: absolute; top: 6px; right: 6px; }
.photo-move:hover, .photo-del:hover { background: #b03a2e; }
.upload-msg { font-size: 13px; color: #b03a2e; margin-top: 10px; min-height: 18px; }

/* ---------------- 更多邀请人 ---------------- */
.hosts-box { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.host-row { display: flex; gap: 8px; align-items: center; }
.host-row input { flex: 1; }
.host-del {
  width: 30px; height: 30px; border: none; border-radius: 50%;
  background: #f5ece2; color: #b03a2e; font-size: 16px; cursor: pointer; line-height: 1; flex: none;
}
.host-del:hover { background: #b03a2e; color: #fff; }

/* ---------------- 底部操作条 ---------------- */
.ed-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 28px; background: #fff; border-top: 1px solid #f0e4d8;
  box-shadow: 0 -6px 20px rgba(0,0,0,.06);
}
.ed-bar-msg { font-size: 13px; color: #999; }
.ed-bar-btns { display: flex; gap: 10px; }

/* ---------------- 弹窗 ---------------- */
.modal {
  position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal.hidden { display: none; }
.modal-box {
  background: #fff; border-radius: 18px; width: 100%; max-width: 420px;
  box-shadow: 0 20px 60px rgba(0,0,0,.3); overflow: hidden;
}
.modal-wide { max-width: 480px; }
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 22px; border-bottom: 1px solid #f0e4d8;
}
.modal-head h3 { font-size: 17px; color: #5c3a1e; }
.modal-close { font-size: 26px; line-height: 1; background: none; border: none; cursor: pointer; color: #999; }
.modal-close:hover { color: #b03a2e; }
.modal-foot { padding: 14px 22px; text-align: center; border-top: 1px solid #f0e4d8; }

#previewFrame { width: 100%; height: 66vh; border: none; display: block; background: #fff; }

/* ---------------- 分享弹窗 ---------------- */
.share-body { padding: 22px; text-align: center; }
.qr-box {
  width: 210px; height: 210px; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed #e3d6c6; border-radius: 14px; background: #fff;
  overflow: hidden;
}
.qr-box canvas, .qr-box img { max-width: 100%; }
.share-tip { font-size: 13px; color: #888; line-height: 1.8; margin-bottom: 16px; }
.share-link-row { display: flex; gap: 10px; }
.share-link-row input {
  flex: 1; padding: 10px 12px; font-size: 13px; border: 1px solid #e3d6c6;
  border-radius: 10px; background: #faf7f2; color: #555; outline: none;
}

@media (max-width: 640px) {
  .ed-header { padding: 12px 16px; }
  .grid2 { grid-template-columns: 1fr; }
  .ed-bar { padding: 12px 16px; flex-direction: column; align-items: stretch; }
  .ed-bar-msg { display: none; }
  .ed-bar-btns { justify-content: space-between; }
}

/* ---------------- 分享海报 ---------------- */
.poster-row { margin-top: 16px; }
.poster-box { margin-top: 14px; }
.poster-img {
  width: 100%; max-width: 300px; border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18); display: block; margin: 0 auto;
}
.poster-actions { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.poster-tip { font-size: 12px; color: #999; }