/* ===== 内置高画质裁剪器 hq-cropper（零依赖）===== */
.cropper-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex; align-items: center; justify-content: center;
  z-index: 60; padding: 16px;
}
.cropper-box {
  background: var(--panel);
  color: var(--text);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 16px 18px;
  max-width: 96vw;
}
.cropper-head {
  font-size: 15px; font-weight: 600;
  margin-bottom: 10px;
  display: flex; align-items: center; justify-content: space-between;
}
.cropper-x {
  cursor: pointer; font-size: 20px; line-height: 1;
  padding: 0 6px; color: var(--text); opacity: 0.6;
}
.cropper-x:hover { opacity: 1; }
.cropper-stage {
  position: relative; overflow: hidden;
  margin: 0 auto; user-select: none; touch-action: none;
  border-radius: 8px;
  background:
    repeating-conic-gradient(#e9ebef 0% 25%, #f7f8fa 0% 50%) 50% / 22px 22px;
}
[data-theme="dark"] .cropper-stage {
  background:
    repeating-conic-gradient(#20232a 0% 25%, #262a32 0% 50%) 50% / 22px 22px;
}
.cropper-img { display: block; pointer-events: none; }
.crop-sel {
  position: absolute;
  border: 1px solid #fff;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.42);
  cursor: move; box-sizing: border-box;
}
.crop-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.35) 1px, transparent 1px);
  background-size: 33.33% 33.33%;
}
/* 右下角缩放手柄：白色直角三角（直角在右下），替代原来的小方块 */
.crop-handle {
  position: absolute; right: 0; bottom: 0;
  width: 18px; height: 18px;
  background: #fff;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  cursor: nwse-resize;
  touch-action: none;
  filter: drop-shadow(-1px -1px 0 rgba(0, 0, 0, 0.45));
}
.cropper-bar {
  display: flex; align-items: center;
  margin-top: 12px; flex-wrap: wrap; gap: 6px;
}
.cropper-lbl { font-size: 13px; opacity: 0.85; }
.crop-radio { font-size: 13px; opacity: 0.9; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.cropper-spacer { flex: 1; }
.cropper-err {
  color: var(--danger); font-size: 13px;
  min-height: 18px; margin-top: 6px;
}
