.cs-upload-error {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  text-align: center;
}

.cs-workspace { margin-top: 4px; display: flex; flex-direction: column; gap: 20px; }

.cs-stage-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; }

.cs-stage {
  max-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--radius-sm);
  background:
    repeating-conic-gradient(var(--bg-alt) 0% 25%, var(--surface) 0% 50%) 0 0 / 22px 22px;
  transition: padding 0.05s linear;
}
.cs-stage img {
  display: block;
  max-width: 100%;
  max-height: 460px;
  object-fit: contain;
  transition: border-radius 0.05s linear, border 0.05s linear, box-shadow 0.05s linear;
}
.cs-stage.cs-bg-solid { background: var(--cs-bg-color, #ffffff); }

.cs-summary { font-size: 13px; font-weight: 600; color: var(--text-secondary); }

.cs-settings { flex-direction: column; align-items: stretch; gap: 16px; }
.cs-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cs-row input[type="range"] { flex: 1; min-width: 140px; accent-color: var(--accent); }
.cs-row .swatch-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cs-sub-controls { display: flex; flex-direction: column; gap: 12px; padding-left: 2px; }
.cs-sub-controls[hidden] { display: none; }

.cs-swatch-transparent {
  background:
    repeating-conic-gradient(#c9c2b3 0% 25%, #fff 0% 50%) 0 0 / 10px 10px;
}

.cs-actions-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

@media (max-width: 640px) {
  .cs-row { justify-content: center; }
  .cs-stage img { max-height: 340px; }
}