/* ============================================================================
   图片裁剪器（配合 js/cropper.js）
   ============================================================================ */

.mskj-cropper {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #0f172a;
  user-select: none;
}

/* ---------- 顶部工具栏 ---------- */
.mskj-cropper-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  background: #1e293b;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.mskj-cropper-ratio {
  display: flex;
  gap: 6px;
}

.mskj-cropper-ratio button {
  padding: 4px 12px;
  font-size: 12px;
  color: #cbd5e1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}

.mskj-cropper-ratio button:hover {
  color: #fff;
  border-color: rgba(34, 211, 238, 0.5);
}

.mskj-cropper-ratio button.is-active {
  color: #fff;
  background: linear-gradient(135deg, #2563eb, #22d3ee);
  border-color: transparent;
}

.mskj-cropper-size {
  font-size: 12px;
  color: #94a3b8;
  font-variant-numeric: tabular-nums;
}

/* ---------- 舞台 ---------- */
.mskj-cropper-stage {
  position: relative;
  flex: 1;
  overflow: hidden;
  background:
    linear-gradient(45deg, #1e293b 25%, transparent 25%, transparent 75%, #1e293b 75%),
    linear-gradient(45deg, #1e293b 25%, #0f172a 25%, #0f172a 75%, #1e293b 75%);
  background-size: 20px 20px;
  background-position: 0 0, 10px 10px;
  cursor: crosshair;
}

.mskj-cropper-stage > img {
  position: absolute;
  left: 0;
  top: 0;
  max-width: none;
  pointer-events: none;
}

/* ---------- 遮罩与裁剪框 ---------- */
.mskj-cropper-mask {
  position: absolute;
  inset: 0;
}

/*
  用超大的 box-shadow 把裁剪框以外的区域压暗。
  比"四个独立遮罩 div"简单得多，也不用随裁剪框位置重新计算。
*/
.mskj-cropper-box {
  position: absolute;
  box-shadow: 0 0 0 9999px rgba(2, 6, 23, 0.62);
  outline: 1px solid rgba(255, 255, 255, 0.85);
  cursor: move;
}

/* 三分构图网格 */
.mskj-cropper-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.28) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.28) 1px, transparent 1px);
  background-size: 33.333% 33.333%;
}

/* 八个缩放手柄 */
.mskj-cropper-box i {
  position: absolute;
  width: 12px;
  height: 12px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.45);
  border-radius: 2px;
}

.mskj-cropper-box i[data-handle='nw'] { left: -6px; top: -6px; cursor: nwse-resize; }
.mskj-cropper-box i[data-handle='n']  { left: 50%; top: -6px; margin-left: -6px; cursor: ns-resize; }
.mskj-cropper-box i[data-handle='ne'] { right: -6px; top: -6px; cursor: nesw-resize; }
.mskj-cropper-box i[data-handle='w']  { left: -6px; top: 50%; margin-top: -6px; cursor: ew-resize; }
.mskj-cropper-box i[data-handle='e']  { right: -6px; top: 50%; margin-top: -6px; cursor: ew-resize; }
.mskj-cropper-box i[data-handle='sw'] { left: -6px; bottom: -6px; cursor: nesw-resize; }
.mskj-cropper-box i[data-handle='s']  { left: 50%; bottom: -6px; margin-left: -6px; cursor: ns-resize; }
.mskj-cropper-box i[data-handle='se'] { right: -6px; bottom: -6px; cursor: nwse-resize; }

/* ---------- 底部操作栏 ---------- */
.mskj-cropper-footer {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  background: #1e293b;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.mskj-cropper-quality {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #cbd5e1;
}

.mskj-cropper-quality input {
  width: 110px;
}

.mskj-cropper-hint {
  flex: 1;
  font-size: 12px;
  color: #64748b;
}

.mskj-cropper-actions {
  display: flex;
  gap: 8px;
}

/* ============================================================================
   图片字段（上传 + 裁剪 + 媒资库选图，一体控件）
   ============================================================================ */

.mskj-image-field {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

/* 预览缩略图 */
.mskj-image-field-preview {
  position: relative;
  flex: 0 0 132px;
  width: 132px;
  height: 88px;
  overflow: hidden;
  background: #f1f5f9;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mskj-image-field-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.mskj-image-field-preview .mskj-image-field-empty {
  font-size: 12px;
  color: #94a3b8;
}

.mskj-image-field-body {
  flex: 1;
  min-width: 0;
}

.mskj-image-field-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

/*
  拖拽上传区
  用 CSS 而不是 JS 控制显示：文件拖入时靠 :hover 之外的 dragover 类切换，
  这里只定义外观，状态由 JS 加/去 .is-dragover
*/
.mskj-image-field.is-dragover .mskj-image-field-preview {
  border-color: #2563eb;
  background: #eff6ff;
}

.mskj-image-field-tip {
  margin-top: 6px;
  font-size: 12px;
  color: #94a3b8;
  line-height: 1.6;
}