/* FormReady — Signature Background Cleaner page styles (clay system). */

.sc-workspace { margin-top: var(--space-4); display: grid; gap: var(--space-4); }

.sc-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
@media (max-width: 640px) {
  .sc-compare { grid-template-columns: 1fr; }
}
.sc-pane { margin: 0; display: grid; gap: var(--space-2); }
.sc-pane canvas {
  width: 100%;
  height: auto;
  background: #fff;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-clay-sm);
}
.sc-after-wrap {
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-clay-sm);
  /* checkerboard so a transparent result stays checkable */
  background-image:
    linear-gradient(45deg, #e5e0f0 25%, transparent 25%),
    linear-gradient(-45deg, #e5e0f0 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e5e0f0 75%),
    linear-gradient(-45deg, transparent 75%, #e5e0f0 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  overflow: hidden;
}
.sc-after-wrap canvas { border: none; box-shadow: none; border-radius: 0; display: block; }

.sc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}