.drop-zone{border:2px dashed var(--color-border);border-radius:var(--radius-lg);padding:var(--space-8) var(--space-4);text-align:center;cursor:pointer;transition:all var(--duration-normal) var(--ease-default);color:var(--color-text-tertiary);display:flex;flex-direction:column;align-items:center;gap:var(--space-3)}.drop-zone:hover,.drop-zone.drag-over{border-color:var(--color-accent);background-color:var(--color-accent-light);color:var(--color-accent)}.drop-zone.has-image{padding:var(--space-3);border-style:solid}.drop-zone p{margin:0;font-size:var(--text-sm)}.drop-zone-preview{max-width:100%;max-height:200px;border-radius:var(--radius-md);object-fit:contain}.image-info{display:flex;flex-wrap:wrap;gap:var(--space-3);font-size:var(--text-sm);color:var(--color-text-secondary);padding:var(--space-3);background-color:var(--color-bg-secondary);border-radius:var(--radius-md);margin-bottom:var(--space-4)}.image-info .reduction{color:#10b981;font-weight:var(--weight-semibold)}.resize-row{display:flex;align-items:flex-end;gap:var(--space-2)}.size-input-group{flex:1}.size-label{display:block;font-size:var(--text-xs);color:var(--color-text-secondary);margin-bottom:var(--space-1)}.size-input{max-width:100%}.aspect-lock{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:none;cursor:pointer;color:var(--color-text-tertiary);transition:all var(--duration-normal) var(--ease-default);flex-shrink:0;margin-bottom:2px}.aspect-lock.active{color:var(--color-accent);border-color:var(--color-accent);background-color:var(--color-accent-light)}.preview-container{display:flex;justify-content:center;margin-bottom:var(--space-4)}.preview-canvas{max-width:100%;max-height:300px;border-radius:var(--radius-md);border:1px solid var(--color-border);object-fit:contain}