/* C68：共享「快速裁切」面板（window.CropPanel）
   观感照抄 split_panel.css（同底、同圆角、同 z-index、同按钮），深底浅字不跟随主题。 */

.cp-overlay {
  position: fixed;
  inset: 0;
  z-index: 10040; /* 与 split_panel 同层，都要盖过共享查看器 .image-viewer(9999) */
  display: flex;
  flex-direction: column;
  background: rgba(6, 6, 10, 0.94);
  --cp-fill: rgba(255, 255, 255, 0.08);
  --cp-fill-hover: rgba(255, 255, 255, 0.18);
  --cp-line: rgba(255, 255, 255, 0.18);
  --cp-text: #e8e8ea;
  --cp-text-dim: #c9c9d2;
}

.cp-overlay[hidden] {
  display: none !important;
}

.cp-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  color: var(--cp-text-dim);
  font-size: 12px;
}

.cp-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--cp-text);
}

.cp-close {
  margin-left: auto;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--cp-line);
  border-radius: 8px;
  background: var(--cp-fill);
  color: var(--cp-text-dim);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.cp-close:hover {
  background: rgba(240, 80, 80, 0.85);
  border-color: #f05050;
  color: #fff;
}

.cp-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px 4px;
}

/* 图片与裁切框同框：框用百分比定位，正好按图片的显示区换算（= 原图坐标） */
/* C69：与 split_panel 同源的老毛病 —— flex 默认 stretch + max-height:100% 会把图拉变形，
   而裁切框是按 figure 的百分比定位的，figure 一旦不是图片真实比例，框就跟着错。
   所以这三行（确定高度 / 不 stretch / 宽高交给比例算）是必须的，不能只靠 object-fit。 */
.cp-figure {
  position: relative;
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  max-height: 100%;
}

.cp-img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}

.cp-box {
  position: absolute;
  box-sizing: border-box;
  border: 2px solid #fbbf24;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.62); /* 框外压暗 */
  cursor: move;
  touch-action: none;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.cp-badge {
  margin-top: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.62);
  color: #fde68a;
  font-size: 12px;
  white-space: nowrap;
}

/* ---------- C70：8 个按比例缩放的句柄（4 角 + 4 边） ---------- */
.cp-h {
  position: absolute;
  width: 12px;
  height: 12px;
  background: #fbbf24;
  border: 1.5px solid rgba(255, 255, 255, 0.95);
  border-radius: 3px;
  box-sizing: border-box;
  touch-action: none;
  z-index: 2;
}
.cp-h-nw { left: -6px; top: -6px; cursor: nwse-resize; }
.cp-h-ne { right: -6px; top: -6px; cursor: nesw-resize; }
.cp-h-sw { left: -6px; bottom: -6px; cursor: nesw-resize; }
.cp-h-se { right: -6px; bottom: -6px; cursor: nwse-resize; }
.cp-h-n { left: 50%; top: -6px; margin-left: -6px; cursor: ns-resize; }
.cp-h-s { left: 50%; bottom: -6px; margin-left: -6px; cursor: ns-resize; }
.cp-h-w { left: -6px; top: 50%; margin-top: -6px; cursor: ew-resize; }
.cp-h-e { right: -6px; top: 50%; margin-top: -6px; cursor: ew-resize; }

.cp-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 16px 16px;
}

.cp-seg {
  display: flex;
  gap: 6px;
}

.cp-ratio {
  padding: 6px 14px;
  border: 1px solid var(--cp-line);
  border-radius: 8px;
  background: var(--cp-fill);
  color: var(--cp-text-dim);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
}

.cp-ratio:hover {
  background: var(--cp-fill-hover);
}

.cp-ratio.is-active {
  background: var(--brand, #71DC68);
  border-color: var(--brand-strong, #5BC85A);
  color: var(--brand-ink, #14331B);
  font-weight: 600;
}

.cp-msg {
  font-size: 12px;
  color: #fca5a5;
}

.cp-btn {
  padding: 6px 14px;
  border: 1px solid var(--cp-line);
  border-radius: 8px;
  background: var(--cp-fill);
  color: var(--cp-text-dim);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
}

.cp-btn:hover {
  background: var(--cp-fill-hover);
}

.cp-btn-primary {
  margin-left: auto;
  background: var(--brand, #71DC68);
  border-color: var(--brand-strong, #5BC85A);
  color: var(--brand-ink, #14331B);
  font-weight: 600;
}

.cp-btn-primary:hover {
  background: var(--brand-strong, #5BC85A);
}