.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; }
.sr-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); }
.stage { display: flex; justify-content: center; margin: 8px 0 16px; }
#canvas { max-width: 100%; max-height: 340px; border-radius: 12px; border: 1px solid var(--border); touch-action: none; background: #0f1728; }

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

.logo-label { display: flex; align-items: center; gap: 8px; }
.logo-btn { display: inline-block; padding: 6px 12px; border: 1.5px solid var(--border); border-radius: 8px; cursor: pointer; font-weight: 600; color: var(--primary-dark); }
.logo-btn:hover { border-color: var(--primary); }
.logo-clear { background: none; border: none; color: var(--bad); cursor: pointer; font-size: 1rem; }
.brush-btn { font-size: 0.85rem; }
#removePanel #canvas, .brushing #canvas { cursor: crosshair; }