/* 记录卡上的「图片编辑器」入口 */
.image-ps-btn {
  position: absolute;
  right: 138px;
  bottom: 10px;
  z-index: 4;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  font-size: 16px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  color: white;
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(8px);
  opacity: 0;
  transform: translateY(-4px);
  transition: 0.2s ease;
  cursor: pointer;
}

.record-image:hover .image-ps-btn {
  opacity: 1;
  transform: translateY(0);
}

/* 图片编辑器（PS 简易版） */
.ps-editor {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
}

.ps-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 7, 6, 0.72);
  backdrop-filter: blur(4px);
}

.ps-panel {
  position: relative;
  width: min(1180px, 94vw);
  height: min(780px, 92vh);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: #14120F;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}

.ps-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ps-title {
  font-size: 16px;
  font-weight: 700;
  color: #F7F3EA;
}

.ps-sub {
  font-size: 12px;
  color: #8A837A;
}

.ps-close {
  margin-left: auto;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: transparent;
  color: #F7F3EA;
  cursor: pointer;
  line-height: 1;
}

.ps-close:hover { background: rgba(255, 255, 255, 0.12); }

.ps-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  min-height: 0;
}

.ps-stage {
  position: relative;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background:
    linear-gradient(45deg, rgba(255,255,255,0.035) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.035) 75%),
    linear-gradient(45deg, rgba(255,255,255,0.035) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.035) 75%);
  background-size: 28px 28px;
  background-position: 0 0, 14px 14px;
  overflow: hidden;
}

.ps-stage canvas {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  cursor: crosshair;
  touch-action: none;
}

.ps-crop-box {
  position: absolute;
  border: 1px dashed #D99A2B;
  background: rgba(217, 154, 43, 0.14);
  pointer-events: none;
  border-radius: 4px;
}

.ps-tools {
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
  display: grid;
  align-content: start;
  gap: 16px;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
}

.ps-group {
  display: grid;
  gap: 8px;
}

.ps-group-title {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8A837A;
}

.ps-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.ps-tbtn {
  padding: 7px 11px;
  font-size: 12px;
  color: #F0EBE1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  cursor: pointer;
  transition: 150ms ease;
}

.ps-tbtn:hover { background: rgba(255, 255, 255, 0.13); }
.ps-tbtn.wide { width: 100%; justify-content: center; }
.ps-tbtn.active {
  background: rgba(180, 83, 42, 0.28);
  border-color: rgba(180, 83, 42, 0.7);
  color: #fff;
}

.ps-select, .ps-text {
  width: 100%;
  padding: 8px 10px;
  font-size: 13px;
  color: #F0EBE1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
}

.ps-select.small { width: auto; flex: 1; }

.ps-slider {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #C9C2B6;
}

.ps-slider input { width: 100%; accent-color: #B4532A; }
.ps-slider span { text-align: right; color: #8A837A; font-size: 11px; }

.ps-filter-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.ps-fbtn {
  padding: 8px 4px;
  font-size: 12px;
  color: #F0EBE1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  cursor: pointer;
}

.ps-fbtn:hover { background: rgba(217, 154, 43, 0.22); border-color: rgba(217, 154, 43, 0.5); }

.ps-color {
  width: 38px;
  height: 30px;
  padding: 2px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  cursor: pointer;
}

.ps-range { flex: 1; accent-color: #B4532A; }

.ps-hint {
  font-size: 11px;
  line-height: 1.5;
  color: #7A736A;
}

.ps-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.ps-foot .primary-btn { margin-left: auto; }

.ps-status {
  font-size: 12px;
  color: #8A837A;
}

@media (max-width: 900px) {
  .ps-body { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .ps-tools { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.08); max-height: 320px; }
  .ps-panel { height: 94vh; }
}