.image-tool-shell { max-width: 1200px; }
.image-tool-content { max-width: 960px; }
.image-preview {
  min-height: 390px; display: flex; align-items: center; justify-content: center;
  overflow: hidden; background-color: #f8f9fa;
  background-image: linear-gradient(45deg,#e9ecef 25%,transparent 25%),linear-gradient(-45deg,#e9ecef 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e9ecef 75%),linear-gradient(-45deg,transparent 75%,#e9ecef 75%);
  background-size: 20px 20px; background-position: 0 0,0 10px,10px -10px,-10px 0;
}
.image-preview img { display: block; max-width: 100%; max-height: 70vh; }
.circular-guide .cropper-crop-box::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 2px dashed rgba(255,255,255,.95);
  border-radius: 50%;
  box-shadow: 0 0 0 9999px rgba(0,0,0,.18);
  pointer-events: none;
}
.ratio-buttons { grid-template-columns: repeat(2,minmax(0,1fr)); }
.ratio-buttons .active { color: #fff; background: var(--bs-secondary); border-color: var(--bs-secondary); }
.metric-value { font-variant-numeric: tabular-nums; }
@media (max-width: 991.98px) { .image-preview { min-height: 280px; } }