.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; }

.stage {
  display: flex; justify-content: center;
  margin-bottom: 18px;
}
#preview {
  width: 100%;
  max-width: 460px;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  background:
    linear-gradient(45deg, #e9e9e9 25%, transparent 25%),
    linear-gradient(-45deg, #e9e9e9 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e9e9e9 75%),
    linear-gradient(-45deg, transparent 75%, #e9e9e9 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
}

.panel-tab { font-size: 0.85rem; }
input[type="range"] { width: 100%; accent-color: var(--primary); }
input[type="color"] { width: 100%; height: 46px; padding: 4px; border: 1.5px solid var(--border); border-radius: 10px; background: var(--field); cursor: pointer; }