.cr-scrim {
  /* Above the highlight-card customize sheet (z-index 1000), which the cropper
     can open on top of when reframing a share-card background. */
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(8,9,12,0.72);
  display: flex; align-items: flex-end; justify-content: center;
}
.cr-sheet {
  width: 100%; max-width: 560px; max-height: 92vh;
  background: var(--surface, #15171d); color: var(--text, #eef2ff);
  border-radius: 16px 16px 0 0; display: flex; flex-direction: column;
  box-shadow: 0 -8px 40px rgba(0,0,0,0.5);
}
@media (min-width: 600px) { .cr-scrim { align-items: center; } .cr-sheet { border-radius: 16px; } }
.cr-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; }
.cr-title { font-weight: 700; font-size: 1rem; }
.cr-close { background: none; border: 0; color: inherit; font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 0 6px; }
.cr-stage {
  position: relative; flex: 1 1 auto; min-height: 280px; height: 52vh;
  background: #0b0c10; overflow: hidden; touch-action: none;
}
.cr-view { position: absolute; }
.cr-overlay { position: absolute; inset: 0; pointer-events: none; }
.cr-box {
  position: absolute; pointer-events: auto; cursor: move;
  box-shadow: 0 0 0 9999px rgba(8,9,12,0.5);   /* dim outside the crop */
  outline: 2px solid #fff; outline-offset: -1px;
}
.cr-handle {
  position: absolute; width: 22px; height: 22px; pointer-events: auto;
  background: #fff; border: 2px solid var(--accent, #fbbf24); border-radius: 50%;
  margin: -11px 0 0 -11px;
}
.cr-handle--nw { left: 0; top: 0; cursor: nwse-resize; }
.cr-handle--n  { left: 50%; top: 0; cursor: ns-resize; }
.cr-handle--ne { left: 100%; top: 0; cursor: nesw-resize; }
.cr-handle--e  { left: 100%; top: 50%; cursor: ew-resize; }
.cr-handle--se { left: 100%; top: 100%; cursor: nwse-resize; }
.cr-handle--s  { left: 50%; top: 100%; cursor: ns-resize; }
.cr-handle--sw { left: 0; top: 100%; cursor: nesw-resize; }
.cr-handle--w  { left: 0; top: 50%; cursor: ew-resize; }
.cr-actions { display: flex; gap: 10px; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); }
.cr-btn { flex: 1; padding: 12px 16px; border-radius: 12px; font-weight: 700; border: 0; cursor: pointer; font-size: 0.95rem; }
.cr-btn--ghost { background: rgba(255,255,255,0.08); color: inherit; }
.cr-btn--primary { background: var(--accent, #fbbf24); color: #1a1407; }
.cr-btn--wide { flex: 1.4; }