.drop-zone { border: 2px dashed var(--border); border-radius: 12px; padding: 4rem 2rem; text-align: center; cursor: pointer; transition: all 0.2s ease; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 2rem; color: var(--text-main); }
.drop-zone:hover, .drop-zone.dragover { border-color: var(--icon-purple-text); background: var(--icon-purple); transform: scale(0.99); }
.drop-zone i { width: 56px; height: 56px; color: var(--icon-purple-text); opacity: 0.8; }
.hidden-input { display: none; }
.settings-panel { margin-bottom: 2rem; padding: 1.5rem; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; }
.control-header { display: flex; justify-content: space-between; font-weight: 600; margin-bottom: 1rem; color: var(--text-main); }
.range-slider { width: 100%; cursor: pointer; accent-color: var(--icon-purple-text); height: 6px; }
.preview-panel { display: flex; flex-direction: column; gap: 1.5rem; }
.stats-row { display: flex; align-items: center; justify-content: center; gap: 1rem; font-size: 1.1rem; color: var(--text-main); background: var(--bg); padding: 1rem; border-radius: 8px; border: 1px solid var(--border); margin-bottom: 1rem; flex-wrap: wrap; }
.stats-row i { width: 18px; height: 18px; color: var(--text-muted); }
#imagePreview { max-width: 100%; max-height: 400px; border-radius: 8px; border: 2px solid var(--border); align-self: center; object-fit: contain; }
@media (max-width: 500px) { .tool-actions { flex-direction: column; } .tool-actions button { width: 100%; margin: 0; } }