/* Screenshot Beautifier — an uploader (after="hide") and a split: the stage
   card on the left, the style inspector on the right (layout from
   styles/components/form.css + uploader.css; the checkered stage is
   styles/components/preview.css). Only the title tile and the gradient
   swatches are the page's own. */

.sb-title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #5AC8FA, #0A84FF);
  color: #fff;
}

/* ── Gradient swatches: all eight on one line, never a 7 + 1 ─────────── */
.sb-swatches {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: var(--space-2);
}
.sb-swatch {
  aspect-ratio: 1;
  border-radius: 9px;
  border: none;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--border-strong);
  transition: transform var(--duration-snap) var(--ease-spring), box-shadow var(--duration-snap) var(--ease-standard);
}
.sb-swatch:hover { transform: scale(1.08); }
.sb-swatch.is-active {
  box-shadow: 0 0 0 2px var(--card-bg), 0 0 0 4px var(--accent);
}