/* Social media image resizer: scaled preview canvas with drag-to-reposition. */
.sr-stage { display: grid; place-items: center; padding: 12px; border-radius: var(--r); border: 1px solid var(--line); background: var(--field); }
#sr-canvas { display: block; max-width: 100%; max-height: 62vh; width: auto; height: auto; border-radius: 6px; box-shadow: var(--shadow); background-color: #fff;
  background-image: linear-gradient(45deg, #ddd 25%, transparent 25%), linear-gradient(-45deg, #ddd 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ddd 75%), linear-gradient(-45deg, transparent 75%, #ddd 75%);
  background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0; }
#sr-canvas.sr-draggable { cursor: grab; touch-action: none; }
#sr-canvas.sr-draggable:active { cursor: grabbing; }
#sr-canvas:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }