/* =========================================================
   ClientSideTools — CSS mask-image Gradient Builder
   ========================================================= */

.mask-preview-wrapper {
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background-color: var(--bg-secondary);
}

.mask-preview {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: #0d9488;
  background-size: cover;
  background-position: center;
}

.mask-preview--placeholder {
  background-image:
    linear-gradient(
      135deg,
      #0d9488 0%,
      #0f172a 45%,
      #334155 75%,
      #0d9488 100%
    );
}

.mask-stop-list {
  display: grid;
  gap: var(--space-2);
}

.mask-stop-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: var(--space-2);
  align-items: center;
}

.mask-stop-row input {
  width: 100%;
}