.dropzone {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 30px 20px; border: 2px dashed var(--border); border-radius: 14px;
  color: var(--muted); cursor: pointer; text-align: center;
  transition: border-color 0.15s, background 0.15s;
}
.dropzone:hover, .dropzone.drag { border-color: var(--primary); background: var(--primary-soft); }
.dz-icon { font-size: 2rem; }

#preview { display: block; max-width: 100%; border-radius: 12px; border: 1px solid var(--border); margin: 16px 0; }

.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 10px; }
.swatch {
  border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
  cursor: pointer; background: #fff; text-align: center;
}
.swatch .chip { height: 60px; }
.swatch .hex { padding: 6px 4px; font-size: 0.78rem; font-weight: 600; font-family: ui-monospace, monospace; }