input[type="color"] { width: 100%; height: 46px; padding: 4px; border: 1.5px solid var(--border); border-radius: 10px; background: #fff; cursor: pointer; }
input[type="range"] { width: 100%; accent-color: var(--primary); }

.previews { display: flex; align-items: flex-end; gap: 20px; justify-content: center; margin: 18px 0; }
.pv { text-align: center; }
.pv canvas {
  border: 1px solid var(--border); border-radius: 8px; image-rendering: pixelated;
  background:
    linear-gradient(45deg, #eee 25%, transparent 25%), linear-gradient(-45deg, #eee 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #eee 75%), linear-gradient(-45deg, transparent 75%, #eee 75%);
  background-size: 12px 12px; background-position: 0 0, 0 6px, 6px -6px, -6px 0;
}
.pv small { display: block; margin-top: 6px; color: var(--muted); font-size: 0.75rem; }